カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

フォームの値を配列で渡したい時のJavaScriptでのチェック

この記事は最終更新日から1年以上経過しています。

フォームの値をCGIやPHPなどのプログラムに送信するとき、
name属性に「inq[]」という風に設定する。
その際、JavaScriptでの値チェックの方法。

JavaScript関数を定義

<script type="text/javascript">
<!--//
    var check = function()
    {
        var n = 0;

        for(i = 0; i < document.frm.elements["inq[]"].length; i++)
        {
            // document.frm.elements["inq[]"][i].checked //チェックを判別
            // document.frm.elements["inq[]"][i].value;  //値を取り出す

            if(document.frm.elements["inq[]"][i].checked)
            {
                // IDを利用してラベルのテキストを取得
                // document.getElementById("label_" + document.frm.elements["inq[]"][i].id).innerText
                n++;
            }
        }

        if(n == 0)
        {
            alert("チェックが1つもありません!");
            return false;
        }
        else
        {
            return true;
        }
    }
//-->
</script>

HTMLフォーム

<form name="frm" action="example" onsubmit="return check();">
    <input type="checkbox" id="inq1" name="inq[]" value="1" />
    <label id="label_inq1" for="inq1">1</label><br />
    <input type="checkbox" id="inq2" name="inq[]" value="2" />
    <label id="label_inq2" for="inq2">2</label><br />
    <input type="checkbox" id="inq3" name="inq[]" value="3" />
    <label id="label_inq3" for="inq3">3</label><br />
    <input type="submit" value="submit" />
</form>
この記事がお役に立ちましたらシェアお願いします