string(11) "3.239.76.25"

2022年04月24日

jquery:submit(func)

このイベントの説明

jQueryの submit(func) は、フォームのサブミット・イベントを検知した時の処理を記述します。

関数の中で return false;で終了させると、サブミットをキャンセルする事ができます。

 


構文

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

 


事例

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

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

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

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





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

<?php 
	if($_POST['select_name'] != ''){
		$item = $_POST['select_name'];
		$item = preg_replace('/1/','項目1',$item);	// 文字を正規表現で探して置き換える
		$item = preg_replace('/2/','項目2',$item);
		$item = preg_replace('/3/','項目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' <?php if($_POST['select_name']=='1')esc_html_e('selected');?>>項目1</option> 
		<option value='2' <?php if($_POST['select_name']=='2')esc_html_e('selected');?>>項目2</option> 
		<option value='3' <?php if($_POST['select_name']=='3')esc_html_e('selected');?>>項目3</option> 
	</select>
	<br><br>
	<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;
		}
	});
	$('.reset').click(function(){
		$('[name="select_name"]').prop('selectedIndex', 0);
		$('.msg01').css('display','none');
	});
</script>

■1行目~9行目

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

■10行目~22行目

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

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

■24行目~31行目

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

■32行目~35行目

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

 

<参考情報>

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

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

<?php 
	if($_POST['select_name'] != ''){
		$item = $_POST['select_name'];
		$item = preg_replace('/1/','項目1',$item);	// 文字を正規表現で探して置き換える
		$item = preg_replace('/2/','項目2',$item);
		$item = preg_replace('/3/','項目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' <?php if($_POST['select_name']=='1')esc_html_e('selected');?>>項目1</option> 
		<option value='2' <?php if($_POST['select_name']=='2')esc_html_e('selected');?>>項目2</option> 
		<option value='3' <?php if($_POST['select_name']=='3')esc_html_e('selected');?>>項目3</option> 
	</select>
	<br><br>
	<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;
		}
	}
	$('.reset').click(function(){
		$('[name="select_name"]').prop('selectedIndex', 0);
		$('.msg01').css('display','none');
	});
</script>

変更箇所は下記です。

■10行目:onsubmit='return err_check()' を追加しています。

■24行目~31行目:jQueryでなく、JavaScriprでfunctionを記述しています。

 

 onsubmit .submit(func)の優先順位

1つの<form>の中に①onsubmit と②.submit(func) があった場合は、①onsubmitを処理をした後、②.submit(func)の処理が行われます。

 

よって、ECプログラムのカスタマイズ等でonsubmitの前に他のエラーチェックを行いたい場合は、下記のメソッドを利用します。

.subitメソッド

.clickメソッド

 


参考情報

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

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()