HTMLのフォーム送信時にjQueryのsubmit()を使うと、フォームの送信を無効にしてバリデーションしたり、送信前にメッセージを出したりと、さまざまな表現が可能になります。
いろいろなsubmit()をご紹介します。
目次
submit()でフォーム送信
<button>要素は通常フォーム送信できませんが、jQueryのsubmit()を使って送信可能です。
HTML
|
1 2 3 4 |
<form action="" method="post"> <input type="text" name="textBox"> <button type="button" name="send">送信する</button> </form> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // <button>要素をクリックしたら発動 $('button').click(function() { // <form>要素を送信 $('form').submit(); }); }); |
結果（サンプルページ）
下記サンプルページから動作確認お願いします。
これで上記のフォームが送信されます。
基本構文
|
1 |
$( フォームセレクタ ).submit(); |
フォームにsubmit()を繋げれば<button>や<select>などのsubmitボタン以外の要素でもフォームの送信が可能になります。
<select>で選択したら送信
submit()を使えば、セレクトボックスを選択したらボタンを押さずにそのまま送信できます。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<form action="" method="post"> <select name="citys" id="citys"> <option value="">▼選択</option> <option value="高崎">高崎</option> <option value="前橋">前橋</option> <option value="太田">太田</option> </select> </form> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // セレクトボックスを選択するたびに発動 $('#citys').change(function() { // <form>要素を送信 $('form').submit(); }); }); |
結果（サンプルページ）
下記サンプルページから動作確認お願いします。
チェックボックスなどにも応用できますね。
フォームを送信する前に処理を加える
ダイアログを出して送信
送信する前に「送信しますか？」といったダイアログを出すこともできます。
HTML
|
1 2 3 4 |
<form action="" method="post"> <input type="text" name="textBox"> <input type="submit" name="send"> </form> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { // ①submit()に関数をバインド $('form').submit(function() { // ②ダイアログを出していいえを選択したら… if (!confirm('送信しますか？')) { // 処理を中断 return false; } }); }); |
結果（サンプルページ）
下記サンプルページから動作確認お願いします。
これでダイアログ付きのフォーム送信が可能です。
説明
①submit() にダイアログを出す関数を入れ込む
通常は以下のように引数は空ですが、さらに下段のコードには関数が入っています。（赤字の部分）
通常
$(‘form’).submit();
↓
関数をバインド
$(‘form’).submit(function() {
〜 処理 〜
});
この関数に送信前の処理を入れ込みます。
②ダイアログを出す
jQueryでダイアログを出すにはconfirm()を使います。
|
1 2 3 4 |
if (!confirm('送信しますか？')) { // 処理を中断 return false; } |
if文でキャンセルを選んだ場合に処理を中断するreturn falseを入れています。
バインドとは？
あっちとこっちを紐付ける、関連付ける、割り当てること
ここではsubmit()に処理内容がまとめられた関数を割り当てています。
if()については以下の記事で解説しています。
参考：jQueryでのif文の書き方（else,else ifなども）
基本構文(関数タイプ)
|
1 2 3 4 |
// submit()に関数をバインド $( フォームセレクタ ).submit(function() { 〜処理〜 }); |
上記サンプルのようにsubmit()に関数を結び付けて、送信前にさまざまな処理を付け加えることができます。
submit()を無効にする
先ほどのダイアログのサンプルもsubmit()を無効にするコードがありましたね。
フォームをバリデートする
バリデートとは？
フォームを検証し、入力ミスや入力漏れ等をチェックすることです。
フォームが空欄だったらアラートで警告して送信を中断し、入力されたら送信します。
HTML
|
1 2 3 4 |
<form action="" method="post"> <input type="text" name="textBox" id="textBox"> <input type="submit" name="send"> </form> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { // submit()に関数をバインド $('form').submit(function() { // もしテキストボックスが空欄だったら… if($('#textBox').val() == '') { // 警告を出す alert('空欄です！'); // 処理を中断 return false; } }); }); |
結果（サンプルページ）
下記サンプルページから動作確認お願いします。
if文でテキストボックスが空か判定し、空だったらアラートで警告してreturn falseで処理を中断しました。
return false で処理を中断
return falseは、それ以降の処理を全て中断して終了させます。
処理の最後に記述するようにしましょう。
submit() が効かない
最後にsubmit()を使っても効かずに、フォームが送信されないことがあったのでご紹介します。
フォームのプロパティと競合させない
nameやidにsubmitと名付けるとsubmit()が効かなくなるようです。
効かなくなる例
<input type=”submit” name=”submit” id=”submit“>
input typeの値submitと競合して、効かなくなるんですね。
下記のようにinput typeとnameidとは違う値にしましょう。
nameとidを別名にする
<input type=”submit” name=”send” id=”send“>
HTMLフォームにはデフォルトで使用されているプロパティがあります。
- submit
- length
- method …etc
これらとname属性値やid値が重複するとsubmit()が効かなくなります。
思わぬところでハマるポイントとなりますので注意しましょう。
