アド企画 制作部
アド企画 制作部
 

フォーム送信前の入力チェック用に、フォームの値を連想配列で取得するjavascript関数を書いてみました

フォーム送信前の入力チェック用に、フォームの値を連想配列で取得するjavascript関数を書いてみました


フォームを送信する前にJSで入力チェックを・・・という作業が必要な場面に連続して出くわしたので、フォームの入力値を連想配列で取得するfunctionを書いてみました。

PHPで受け取った場合の入力チェックの書式を出来る限り近づけたいと思ったので、連想配列にしました。
input、select、textareaの値をname属性をキーにした連想配列で取得します。

name属性の名前の末尾に[]が付いている場合、キー名には[]をはずして値を配列で取得します。


自分が使いやすいように、と作ったので、以下の点に注意してください。

※ name属性がないものは取得しません。
※ checkboxやselectリストで選択がない場合には、falseを返します。
※ checkboxやselectリストで、name属性に[]がついていて設定がない場合は、空の配列が返ります。

サンプル(完成イメージ)

「入力チェック」ボタンを押すと、フォームの値を取得したfunctionの返り値をボタン下のグレーの箱にdumpを表示します。

テキストボックス
ラジオボタン 1つだけのチェックボックス(name="radio1")
チェックボックス 1つだけのチェックボックス(name="chk1")
チェックボックス2 複数選べるチェックボックス(name="chk2[]")
セレクトリスト 1つだけ選べるリスト(name="list1")
セレクトリスト2 複数選べるmultipleリスト(name="list2[]")
テキストエリア

フォームのHTML


<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>
			1つだけのチェックボックス(name="radio1")<br />
			<label><input type="radio" name="radio1" value="項目1" />項目1</label> 
			<label><input type="radio" name="radio1" value="項目2" />項目2</label> 
			<label><input type="radio" name="radio1" value="項目3" />項目3</label> 
		</td>
	</tr>
	<tr>
		<th>チェックボックス</th>
		<td>
			1つだけのチェックボックス(name="chk1")<br />
			<label><input type="checkbox" name="chk1" value="チェックする" />チェックする</label> 
		</td>
	</tr>
	<tr>
		<th>チェックボックス2</th>
		<td>
			複数選べるチェックボックス(name="chk2[]")<br />
			<label><input type="checkbox" name="chk2[]" value="項目A" />項目A</label> 
			<label><input type="checkbox" name="chk2[]" value="項目B" />項目B</label> 
			<label><input type="checkbox" name="chk2[]" value="項目C" />項目C</label> 
			<label><input type="checkbox" name="chk2[]" value="項目D" />項目D</label> 
		</td>
	</tr>
	<tr>
		<th>セレクトリスト</th>
		<td>
			1つだけ選べるリスト(name="list1")<br />
			<select name="list1">
				<option value="リスト項目1">リスト項目1</option>
				<option value="リスト項目2">リスト項目2</option>
				<option value="リスト項目3">リスト項目3</option>
				<option value="リスト項目4">リスト項目4</option>
				<option value="リスト項目5">リスト項目5</option>
				<option value="リスト項目6">リスト項目6</option>
			</select>
		</td>
	</tr>
	<tr>
		<th>セレクトリスト2</th>
		<td>
			複数選べるmultipleリスト(name="list2[]")<br />
			<select name="list2[]" multiple>
				<option value="リスト項目A">リスト項目A</option>
				<option value="リスト項目B">リスト項目B</option>
				<option value="リスト項目C">リスト項目C</option>
				<option value="リスト項目D">リスト項目D</option>
				<option value="リスト項目E">リスト項目E</option>
				<option value="リスト項目F">リスト項目F</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だから・・・」と、細かいことを考えずに済むようになりました。

まぁ、あくまでも簡易的なものと思って使っております。