jquery：submit()

このメソッドの説明

submit() はjQueryメソッドです。

プログラムでフォームをサブミットさせます。

メソッド

$('form').submit()

パラメータ

ありません

戻り値

ありません

このメソッドを使うケースとは

一般的には、フォームの「onclick属性」でエラーチェックを行いますが、ECプログラムのカスタマイズ等では、これが既に利用されているケースがあります。

例えば下記の様な場合です。

<form method='post' action='' onsubmit='XXXXXX()'><!-- ユーザがカスタマイズできないonsumitが設定されている -->
  <!-- 色々な処理 -->
　<button type='submit' class='real' name='button' value='select' >送信</button>
</form>

1行目：ユーザがカスタマイズできない onsubmit属性 が設定されている。

3行目：ボタンのタイプは 'submit' になっている。

上記の様な場合、ユーザがボタン操作を検知してエラー処理するプログラムを作成しても、このフォームのサブミットを中止させる事ができません。

この様な場合は下記の方法でユーザプログラムを作成します。

①ボタンのType属性を submit→button 変更する。

②ボタンの挿入を検知し、エラー処理をするプログラムを作成する。

③エラーがない場合は、submit()メソッドで、フォームをサブミットする。

※click()メソッドでも上記と同じ対策に利用できます。

利用例

1.プログラムでフォームをサブミットさせる。

セレクト操作を行ってください。

・サイズを選択しないで購入ボタンを挿入すると、エラーメッセージを表示します。

・サイズを選択して購入ボタンを挿入すると（エラーなし）、onsubmit処理が実行された後、サブミットされます。

・リセットボタンを挿入すると、選択を解除します。

上記のプログラムは下記から構成されています。

<?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='DB_update()'>
	<label for='select'>選択して下さい<span style='font-size:12px;'>　※必須項目</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='button' class='real'  name='button'	value='select' >送信</button><!-- ボタンタイプをsubmitからbuttonに変更 -->
	<button type='button' class='reset'>リセット</button><br>
	<p class='msg01' style='color:red;'><?php esc_html_e($select_msg);?></p>
</form>
<script>
	function DB_update(){  // onsubmitのダミープログラム
		window.alert('『購入DB』を更新します。');
	}
	$('.real').click(function(){
		var my_select = $('[name="select_name"]').val();
		if(my_select == '#none#'){
			window.alert('オプションが選択されておりません');
			$('.msg01').css('display','none')
		}else{
			$('form').submit(); // フォームをプログラムでサブミットする
		}
	});
	$('.reset').click(function(){
		$('[name="select_name"]').prop('selectedIndex', 0);
		$('.msg01').css('display','none');
	});
</script>

参考情報

その他の 操作系メソッド も参照してください。