フォーム送信前の入力チェック用に、フォームの値を連想配列で取得するjavascript関数を書いてみました
フォームを送信する前にJSで入力チェックを･･･という作業が必要な場面に連続して出くわしたので、フォームの入力値を連想配列で取得するfunctionを書いてみました。
PHPで受け取った場合の入力チェックの書式を出来る限り近づけたいと思ったので、連想配列にしました。
input、select、textareaの値をname属性をキーにした連想配列で取得します。
name属性の名前の末尾に[]が付いている場合、キー名には[]をはずして値を配列で取得します。
自分が使いやすいように、と作ったので、以下の点に注意してください。
※ name属性がないものは取得しません。
※ checkboxやselectリストで選択がない場合には、falseを返します。
※ checkboxやselectリストで、name属性に[]がついていて設定がない場合は、空の配列が返ります。
サンプル（完成イメージ）
「入力チェック」ボタンを押すと、フォームの値を取得したfunctionの返り値をボタン下のグレーの箱にdumpを表示します。
フォームのＨＴＭＬ
<form id="sample_form"> <table id="sample_table" width="100%"> <tr> <th>テキストボックス</th> <td><input type="text" name="txtbox" placeholder="name=txtbox" /></td> </tr> <tr> <th>ラジオボタン</th> <td> １つだけのチェックボックス（name="radio1"）<br /> <label><input type="radio" name="radio1" value="項目１" />項目１</label> <label><input type="radio" name="radio1" value="項目２" />項目２</label> <label><input type="radio" name="radio1" value="項目３" />項目３</label> </td> </tr> <tr> <th>チェックボックス</th> <td> １つだけのチェックボックス（name="chk1"）<br /> <label><input type="checkbox" name="chk1" value="チェックする" />チェックする</label> </td> </tr> <tr> <th>チェックボックス２</th> <td> 複数選べるチェックボックス（name="chk2[]"）<br /> <label><input type="checkbox" name="chk2[]" value="項目Ａ" />項目Ａ</label> <label><input type="checkbox" name="chk2[]" value="項目Ｂ" />項目Ｂ</label> <label><input type="checkbox" name="chk2[]" value="項目Ｃ" />項目Ｃ</label> <label><input type="checkbox" name="chk2[]" value="項目Ｄ" />項目Ｄ</label> </td> </tr> <tr> <th>セレクトリスト</th> <td> １つだけ選べるリスト（name="list1"）<br /> <select name="list1"> <option value="リスト項目１">リスト項目１</option> <option value="リスト項目２">リスト項目２</option> <option value="リスト項目３">リスト項目３</option> <option value="リスト項目４">リスト項目４</option> <option value="リスト項目５">リスト項目５</option> <option value="リスト項目６">リスト項目６</option> </select> </td> </tr> <tr> <th>セレクトリスト２</th> <td> 複数選べるmultipleリスト（name="list2[]"）<br /> <select name="list2[]" multiple> <option value="リスト項目Ａ">リスト項目Ａ</option> <option value="リスト項目Ｂ">リスト項目Ｂ</option> <option value="リスト項目Ｃ">リスト項目Ｃ</option> <option value="リスト項目Ｄ">リスト項目Ｄ</option> <option value="リスト項目Ｅ">リスト項目Ｅ</option> <option value="リスト項目Ｆ">リスト項目Ｆ</option> </select> </td> </tr> <tr> <th>テキストエリア</th> <td><textarea name="txtarea" placeholder="name=txtarea"></textarea></td> </tr> <tr> <td colspan="2" style="text-align:center;"> <input id="chk_btn" type="button" onClick="chk_btn_on();" value="入力チェック"> <textarea id="kekka" style="height:10em;"> </textarea> </td> </tr> </table> </form>
フォームの値を連想配列で取得する関数
jQueryを使用するので、head部で読み込んでおいてください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script>
関数には、jQueryでフォームを指定する際に使用するセレクタ文字列を渡します。
例えば $("#sample_form") なら 「#sample_form」 という文字列を渡すので get_form_values("#sample_form")
といった具合で使用します。
<script>
//指定したフォームの各値を連想配列で取得するfunction ====================
function get_form_values(form_selector){
var return_val = false;
if(typeof form_selector == "string"){
form_selector = form_selector + " ";
}else{
form_selector = "";
}
form_selector = form_selector + " input, " + form_selector + "textarea, " + form_selector + "select";
$(form_selector).each(function(){
var tag_name = $(this).get(0).tagName;
var name = $(this).attr("name");
if(typeof name == "string"){
if(return_val === false){return_val = {};}
var arr_flag = false;
// name属性の末尾が[]で終わっているものは、配列として取得
if(name.match(/\[\]$/)){
arr_flag = true;
name = name.replace(/\[\]$/, "");
}
if(name in return_val == false){
return_val[name] = false;
}
if(arr_flag){
if(typeof return_val[name] != "object"){
return_val[name] = [];
}
}
// テキストエリアの入力値取得
if(tag_name.match(/^textarea$/i)){
return_val[name] = $(this).val();
// リスト項目の入力値取得
}else if(tag_name.match(/^select$/i)){
$(this).children("option:selected").each(function() {
// 配列で取得する場合
if(arr_flag){
return_val[name].push($(this).val());
// 配列で取得しない場合
}else{
return_val[name] = $(this).val();
}
});
// type=textの入力値取得
}else if($(this).is(":text")){
return_val[name] = $(this).val();
// type=radio入力値取得
}else if($(this).is(":radio") && $(this).is(":checked")){
return_val[name] = $(this).val();
// type=checkboxの入力値取得
}else if($(this).is(":checkbox")){
if($(this).is(":checked")){
// 配列で取得する場合
if(arr_flag){
return_val[name].push($(this).val());
// 配列で取得しない場合
}else{
return_val[name] = $(this).val();
}
}
}
}
});
return return_val;
}
</script>
入力チェックボタン用関数
今回は入力チェックボタンを押すと処理を実行し、戻りをグレーの箱（#kekka）にdumpするので、その処理を書きます。
dumpに使用する「vardump」関数は、こちらで紹介されているものを利用させていただきました。
http://note.chiebukuro.yahoo.co.jp/detail/n172878
<script>
function chk_btn_on(){
$("#kekka").html(""); //前回の結果出力を削除
var rs = get_form_values("#sample_form");
if(rs){
//結果出力を追加
$("#kekka").html(vardump(rs));
}
}
// 配列や連想配列、オブジェクトなどの中身を視覚的に表示する関数
function vardump(arr,lv,key) {
var dumptxt = "",
lv_idt = "",
type = Object.prototype.toString.call(arr).slice(8, -1);
if(!lv) lv = 0;
for(var i=0;i<lv;i++) lv_idt += " ";
if(key) dumptxt += lv_idt + "[" + key + "] => ";
if(arr == null || arr == undefined){
dumptxt += arr + '\n';
} else if(type == "Array" || type == "Object"){
dumptxt += type + "...{\n";
for(var item in arr) dumptxt += vardump(arr[item],lv+1,item);
dumptxt += lv_idt + "}\n";
} else if(type == "String"){
dumptxt += '"' + arr + '" ('+ type +')\n';
} else if(type == "Number"){
dumptxt += arr + " (" + type + ")\n";
} else {
dumptxt += arr + " (" + type + ")\n";
}
return dumptxt;
}
</script>
これで、ザックリと入力値をチェックするときに「これはcheckboxだから･･･」と、細かいことを考えずに済むようになりました。
まぁ、あくまでも簡易的なものと思って使っております。
