今回は、jQueryでフォームの値を送信（submit）する方法を説明します。
フォームを送信する.submit()
submit()メソッドは、フォームを送信するメソッドです。submitボタンをクリックすればsubmitはできますが、ほかのイベントと絡めて処理したい時などに使います。
HTML
|
1 2 3 |
<form action="post.php" method="post" name="sample-form" id="sample-form"> <input type="text" name="name" value=""> </form> |
jQuery
|
1 |
$("#sample-form").submit(); |
フォーム送信前にデータを処理する
また、フォームのデータを送信する前に処理することもできます。
例えば、データのバリデーションチェックや、入力フォームに値が入力されていなければ警告ダイアログを表示する時などに使用します。
以下は、nameが空の場合、アラートを表示してsubmitをキャンセルするという例です。
HTML
|
1 2 3 4 |
<form action="post.php" method="post" name="sample-form" id="sample-form"> <input type="text" name="name" value=""> <input type="submit" id="submit" value="送信"> </form> |
jQuery：submit()を使う場合
|
1 2 3 4 5 6 7 8 |
$("#sample-form").submit(function(){ if ($("input[name='name']").val() == '') { alert('入力してください'); return false; } else { $("#sample-form").submit(); } }); |
また、submit()を用いずにon()メソッドやclick()メソッドを用いて同様の処理をすることも可能です。
jQuery：on()を使う場合
|
1 2 3 4 5 6 7 8 |
$("#submit").on('click', function(){ if ($("input[name='name']").val() == '') { alert('入力してください'); return false; } else { $("#sample-form").submit(); } }); |
submit()とon()の使い分け
submit()を使う場合は、form内にsubmitボタンがある必要があります。一方、on()を使う場合は、form外の要素がクリックされた時に送信するといった処理も可能になります。
通常のフォーム送信ではsubmit()を利用し、それ以外は用途に応じてon()を用いると良いでしょう。
