jquery：submit(func)

このイベントの説明

submit(funk) は「onsubmit」の代わりにフォームのエラー処理等を行う時に利用します。

普通はフォームのエラーチェックに下記の様なonsubmitを利用します。

<form method='post' action='' onsubmit='×××'>

しかし、このonsubmitが無くてもjQueryの submit(func) を利用すると、フォームがサブミットされた事を検知しここに色々な処理を記述する事ができます。

構文

セレクタ.submit(function(){イベントが発生した時の処理})

事例

①エラーをsubmit(func)で処理する方法。

選択なしで送信ボタンを挿入するとエラーを表示し、サブミットをキャンセルします。

選択をして送信ボタンを挿入すると、送信されたデータを表示します。

リセットボタンで選択を解除します。

上記は下記のプログラムで作成されています。

<?php 
	$select_msg = "";
	if(isset($_POST['select_name']) && $_POST['select_name'] != ''){
		$item = $_POST['select_name'];
		$item = str_replace(['1', '2', '3'], ['項目1', '項目2', '項目3'], $item);
		$select_msg = '選択値は『'.$item.'』です。';
	}
?>
<form method='post' action=''>
	<label for='select'>選択して下さい<span style='font-size:12px;color:red;'>　※必須項目</span></label><br>
	<select id='select' name='select_name'> 
		<option value='#none#'>選択してください</option> 
		<option value='1'>項目1</option> 
		<option value='2'>項目2</option> 
		<option value='3'>項目3</option> 
	</select>
	<br><br>
	<input type='hidden' name='position' value=''> 
	<button type='submit' name='button'	value='sumple01' >送信</button>
	<button type='button' class='reset'>リセット</button><br>
	<p class='msg01' style='color:red;'><?php esc_html_e($select_msg);?></p>
</form>
<script>
	$('form').submit(function(){				//フォームのサブミットの検知
		var my_select = $('[name="select_name"]').val();
		if(my_select == '#none#'){
			window.alert('オプションが選択されておりません');
			$('.msg01').css('display','none');
			return false;}
	});
	$(document).on('click','.reset',function(){	//リセットボタンの処理
		$('[name="select_name"]').prop('selectedIndex', 0);
		$('.msg01').css('display','none');
	});
</script>

■1行目～8行目

サブミット後のphp処理を記述しています。

■9行目～22行目

HTMLでセレクト文を記述しています。

セレクト値は、name='select_name' で受け渡しをしています。

■24行目～30行目

フォームのサブミットを検知して、選択がない場合はエラーを表示しサブミットをキャンセルします。

■31行目～34行目

リセットボタンが挿入された時の処理を記述しています。

＜参考情報＞

エラー処理はフォームのonsumit属性でも処理できます。

下記は上記サンプルと同じ動きをするプログラムになります。

<?php 
	$select_msg = "";
	if(isset($_POST['select_name']) && $_POST['select_name'] != ''){
		$item = $_POST['select_name'];
		$item = str_replace(['1', '2', '3'], ['項目1', '項目2', '項目3'], $item);
		$select_msg = '選択値は『'.$item.'』です。';
	}
?>
<form method='post' action='' onsubmit='return err_check()'>
	<label for='select'>選択して下さい<span style='font-size:12px;color:red;'>　※必須項目</span></label><br>
	<select id='select' name='select_name'> 
		<option value='#none#'>選択してください</option> 
		<option value='1'>項目1</option> 
		<option value='2'>項目2</option> 
		<option value='3'>項目3</option> 
	</select>
	<br><br>
	<input type='hidden' name='position' value=''> 
	<button type='submit' name='button'	value='sumple01' >送信</button>
	<button type='button' class='reset'>リセット</button><br>
	<p class='msg01' style='color:red;'><?php esc_html_e($select_msg);?></p>
</form>
<script>
	function err_check(){
		var my_select = $('[name="select_name"]').val();
		if(my_select == '#none#'){
			window.alert('オプションが選択されておりません');
			$('.msg01').css('display','none');
			return false;}
	});
	$(document).on('click','.reset',function(){	//リセットボタンの処理
		$('[name="select_name"]').prop('selectedIndex', 0);
		$('.msg01').css('display','none');
	});
</script>

参考情報

その他の イベント発生のメソッド も参照してください。