月別アーカイブ: 2014年7月

入力内容の確認(テキスト以外)

前回は入力内容の確認処理にて textbox の入力内容チェックの方法を行いました。
今回は textbox 以外の入力内容のチェック方法をまとめて書いておこうと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#textarea_check').click( function() {
                    alert($('#textarea_val').val());
                });

                $('#checkbox_check').click( function() {
                    $('input.checkbox:checked').each(function(index, obj) {
                        alert($(obj).val());
                    });
                });

                $('#radio_check').click( function() {
                    alert($('input[name="radio"]:checked').val());
                });


                $('#select_check_value').click( function() {
                    alert($('#select_val option:selected').val());
                });


                $('#select_check_text').click( function() {
                    alert($('#select_val  option:selected').text());
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            .input_area {
                margin  : 20px;
                padding : 20px;
            }

        --></style>

    </head>

        <div id="disp_area">
            <div class="input_area">
                <textarea name="textarea" id="textarea_val"></textarea>
                <input type="submit" value="Textarea Check" id="textarea_check">
            </div>
            <div class="input_area">
                <input type="checkbox" name="checkbox01" id="checkbox01_val" class="checkbox" value="checkbox01">Checkbox01
                <input type="checkbox" name="checkbox02" id="checkbox02_val" class="checkbox" value="checkbox02">Checkbox02
                <input type="checkbox" name="checkbox03" id="checkbox03_val" class="checkbox" value="checkbox03">Checkbox03
                <input type="submit" value="Checkbox Check" id="checkbox_check">
            </div>
            <div class="input_area">
                <input type="radio" name="radio" id="radio01_val" value="radio01">Radio01
                <input type="radio" name="radio" id="radio02_val" value="radio02">Radio02
                <input type="radio" name="radio" id="radio03_val" value="radio03">Radio03
                <input type="submit" value="Radio Check" id="radio_check">
            </div>
            <div class="input_area">
                <select name="select" id="select_val">
                    <option value="Value01">DispText01</option>
                    <option value="Value02">DispText02</option>
                    <option value="Value02">DispText03</option>
                </select>
                <input type="submit" value="Select Check Value" id="select_check_value">
                <input type="submit" value="Select Check Text" id="select_check_text">
            </div>
        </div>

    </body>
</html>

sample

spmple には 幾つかの入力項目と button があります。
button を押すと入力内容を alert で表示します。

入力内容の取り方がわからないと色々不便ですからね。
とりあえず、いつも調べるのも大変なので纏めておきました。
select に関しては value と表示内容の 2 種類の情報が取得できるようですね。

個人的に不思議だと思った内容は textarea ですね。
val() で取れるんだ・・・
・・・なんか違う気がする。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

入力内容の確認処理

今回は textbox の入力内容チェックの方法です。
それ程難しい処理ではありませんが頻繁に使うので備忘録的に書いておきます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var txtVal;
                $('#submit_check').click( function(eObj) {
                    eObj.preventDefault();

                    txtVal = $('#text_check').val();
                    if (txtVal == '') {
                        alert('Error : No input');
                        return;
                    } else if (!(txtVal.match(/^[0-9]+$/))) {
                        alert('Error : No numeral');
                        return;
                    } else if (txtVal.length > 2) {
                        alert('Error : Max Lenght Over');
                        return;
                    }

                    $('#form_check').submit();

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>

    </head>

        <div id="form_area">
            <form action="" method="get" id="form_check">
                <input type="text" name="textbox" id="text_check">
                <input type="submit" value="send" id="submit_check">
            </form>
        </div>

    </body>
</html>

sample

spmple には textbox と button があります。
今回は以下の条件によってエラーを表示するか判断しています。
 ・数字のみの入力可能
 ・1 ~ 99 までの範囲が入力可能
 ・未入力はエラー
エラーの場合は submit 処理を行いません。

今回の処理として特に難しい処理はしていません。
あえて注意が必要な点として「いったん submit を無効にする」点です。

「問題がなければ実行する」はそれほど難しいものではありません。
ですが既存サイトの場合、システムを変更出来ない場合もよくあります。
そのような既存サイトに入力チェック処理を追加する時には今後も使うことになるかと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

一定時間後に処理を行う

今回は一定時間放置した場合の処理です。
今までも一定時間度に処理を行う「setTimeout」や一定時間毎に同じ処理を実行する「setInterval」は使ったことがあります。
今回は jQuery の中にそういったものが無いのかなぁと調べた結果「delay」がありました。
今回は「delay」の使い方をやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('button').click( function() {

                    $(this).fadeOut().delay(4000).fadeIn();

                    $('#delay_n').fadeIn().fadeOut();
                    $('#delay_1').fadeIn().delay(1000).fadeOut();
                    $('#delay_2').fadeIn().delay(2000).fadeOut();
                    $('#delay_3').fadeIn().delay(3000).fadeOut();

                });
                $('.box').hide();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div.box {
                margin          : 10px;
                padding         : 10px;
                
                width           : 50px;
                height          : 50px;
                border          : 1px solid #000000;
            }

            #form_area {
                width           : 420px;
                border          : 1px solid #000000;
            }

        --></style>

    </head>

        <div id="button_area">
            <button>Click Me!!!</button>
        </div>

        <div id="disp_area">
            <div id="delay_3" class="box">3 second Delay</div>
            <div id="delay_2" class="box">2 second Delay</div>
            <div id="delay_1" class="box">1 second Delay</div>
            <div id="delay_n" class="box">No Delay</div>
        </div>

    </body>
</html>

sample

spmple には button が存在しています。 
今回は button を click することで4つの div を表示してから所定の秒数後に div を消しています。
上から順に「3秒後」「2秒後」「1秒後」「指定なし」です。

別段難しい処理でもなくそのまま処理に待ち時間を設定できるのはありがたいですね。
実際の処理内容は内部処理にて「setTimeout」を使用しているようです。
使用する際の注意事項も「setTimeout」と同じであれば、今後は「delay」を使用していくようにしたいですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

標準コメントの追加

今回は標準コメントの選択入力です。
サイトを作るときだけでなくても、簡単なテンプレートが決まっているのであれば便利ですね。
ということでやってみましょう。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var Titlle1   = 'Title1 Sample Title1';
                var Comment1  = 'Text1 Text1 Text1 Text1\n';
                    Comment1 += 'Text1 Text1 Text1 Text1\n';
                    Comment1 += 'Text1 Text1 Text1 Text1\n';
                    Comment1 += 'Text1 Text1 Text1 Text1\n';

                var Titlle2   = 'Title2 Sample Title2';
                var Comment2  = 'Text2 Text2 Text2 Text2\n';
                    Comment2 += 'Text2 Text2 Text2 Text2\n';
                    Comment2 += 'Text2 Text2 Text2 Text2\n';
                    Comment2 += 'Text2 Text2 Text2 Text2\n';

                var Titlle3   = 'Title3 Sample Title3';
                var Comment3  = 'Text3 Text3 Text3 Text3\n';
                    Comment3 += 'Text3 Text3 Text3 Text3\n';
                    Comment3 += 'Text3 Text3 Text3 Text3\n';
                    Comment3 += 'Text3 Text3 Text3 Text3\n';

                $('button').click( function() {

                    // init
                    $('#fTBox').val('');
                    $('#fTArea').val('');

                    // set
                    switch ($(this).attr('id')) {
                        case 'button1':
                            $('#fTBox').val(Titlle1);
                            $('#fTArea').val(Comment1);
                            break;
                        case 'button2':
                            $('#fTBox').val(Titlle2);
                            $('#fTArea').val(Comment2);
                            break;
                        case 'button3':
                            $('#fTBox').val(Titlle3);
                            $('#fTArea').val(Comment3);
                            break;
                        default:
                            break;
                    }
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin          : 10px;
                padding         : 10px;
            }

            #form_area {
                width           : 420px;
                border          : 1px solid #000000;
            }

            #fTBox {
                width           : 400px;
            }

            #fTArea {
                width           : 400px;
                height          : 200px;
            }

        --></style>

    </head>

        <div id="disp_area">
            <h1>Button Area</h1>
            <button id="button1">Click Template 1 Load!!!</button>
            <button id="button2">Click Template 2 Load!!!</button>
            <button id="button3">Click Template 3 Load!!!</button>
        </div>

        <div id="form_area">
            <h1>Form Area</h1>
            <input id="fTBox" type="text" value=""><br />
            <textarea id="fTArea"></textarea>
        </div>

    </body>
</html>

sample

spmple には button が3つ存在しています。 
button を click することで Form の 入力欄にテンプレートの内容を追加します。

今回は、一度消して別の内容を入力していますが、ちょと変更すれば追記も出来るかなと思います。
毎回入力はしないと行けないけれど、基本は大体パターンが決まっている時などに如何でしょうか。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。