こんにちは、ライターのマサトです！
今回は、Form要素の送信（submit）処理をjQueryから操作できる「submit()」メソッドについて学習をしていきましょう！
この記事では、
- 「submit()」とは？
- submit()の使い方
- Formのactionを変更する
- submit()のキャンセル
- submit()を引数なしで使う
などの基本的な内容から、応用的な使い方に関しても解説していきます。
この記事で、「submit()」をしっかり学習して自分のスキルアップを目指しましょう！
「submit()」とは？
それでは、まず最初に「submit()」メソッドの基本的な知識から学んでいきましょう！
「submit()」は、jQuery側でFormの送信（submit）処理をプログラムすることができるメソッドになります。
例えば、以下に簡単なForm要素を用意したので見てください。
<form>
<input type="text">
<input type="submit" value="送信">
</form>
Form要素の中にあるinputタグのtypeが「submit」になっているボタンがあることに注目してください。
この時に「submit()」メソッドを使うと、ユーザーが送信ボタンをクリックした際に実行する処理を記述できるのです。例えば、Formの内容をサーバーへ送信する前に正しい入力がされているかを確認するような処理も実行できるわけです。
本記事では、「submit()」の基本的な使い方から応用技までまとめて学習できるように構成しているので、ぜひ参考にしてみてください！
submit()の使い方
ここからは、subtmi()メソッドを使って実際のプログラミング手法を学んでいきましょう！
submit()の基本的な書き方や具体的なイベント処理の記述方法を解説していきます。
submit()の書き方
まず最初に、submit()の基本的な書き方について見ていきましょう！
一般的な記述としては、【 $(Form要素).submit( 実行する処理 ) 】のように引数へ送信時に実行したい処理を記述します。
例えば、次のサンプル例を見てください！
<body>
<form>
<input type="text">
<input type="submit" value="送信">
</form>
<script>
$('form').submit( 実行したい処理 );
</script>
</body>
この例では、簡単なForm要素を配置しており「$(‘form’)」と記述することで対象要素をFormに指定しています。
そして、このFormに対してsubmit()を実行しているのが分かりますね。
あとは、submit()の引数に実行させたい処理を記述するわけですが、一般的には関数（function）を設定します。
functionでイベント処理を設定する方法
それでは、submit()の引数に実行させたい関数（function）を設定してみましょう！
最も簡単な方法としては「無名関数」としてそのまま引数に関数を指定する方法です。
次のサンプル例を見てください！
$('form').submit(function() {
alert('送信しました！');
});
この例では、Form要素を対象にして引数に関数が設定されたsubmit()を実行しています。
この場合はユーザーがFormの「送信ボタン」をクリックしたタイミングで文字列がアラートで表示されます。
また、無名関数ではなく通常の関数のように別の場所で作成したfunctionを実行することも可能です。
$('form').submit( sample );
function sample() {
alert('送信しました！');
}
この例では、「sample()」という関数名をsubmit()の引数に指定しているのが分かりますね。
関数内の処理が複雑になるようであれば、コードの見通しをよくするために関数を別の場所に記述する方が良いでしょう。
Formのactionを変更する
Form要素は送信を実行すると指定した送信先と通信を行うわけですが、この送信先をjQueryから変更することができます。
そこで、submit()を実行した際に送信先を変える手法について詳しく見ていきましょう。
submit()した時に変更する方法
まずは、単純な方法としてsubmit()した時に送信先を変更する手法を見てみましょう！
方法は簡単で、Formタグのaction属性に記述している送信先をjQueryから変更すれば良いわけです。
次のサンプル例を見てください！
$('form').submit(function() {
$(this).attr('action', '/sample.html');
});
この例では、submit()を実行した際に「attr()」メソッドを使ってaction属性値を変更しているのが分かります。
attr()の第2引数へ送信したいサーバーへのパスを記述すれば、フォームの送信先が変更されることになります。
これは、あらかじめFormタグのaction属性を記述していてもsubmit()実行時に変更されるようになります。
ボタン毎にaction先を変更する方法
今度は、複数のボタンを配置したForm要素を想定して、ボタン毎に送信先を変更する手法を学びましょう！
これを実現するためには、ボタンをクリックする毎に異なる送信先を関数に教えてあげるように工夫する必要があります。
そこで、次のような関数を作ってみましょう！
function setAction(url) {
$('form').attr('action', url);
$('form').submit();
}
この関数は引数に「url」を取得し、そのURLをattr()メソッドの第2引数に設定するようにしています。
これにより、送信先を関数に教えるだけで異なる通信がsubmit()を実行するたびに実現できるわけです。
あとは、Form要素に設置するボタンを次のようにすれば良いですね！
<form>
<input type="button" value="送信１" onclick="setAction('/sample.html')">
<input type="button" value="送信２" onclick="setAction('/index.html')">
</form>
onclick属性に関数を指定し、引数へ送信先を設定すればボタン毎に異なるaction属性値を指定できるというわけです。
注意点としては、type属性値を「submit」ではなく「button」にすることです！
「submit」にすると2重に送信される恐れがあるため、「button」と記述することを忘れないようにしましょう！
submit()のキャンセル
submit()を実行するだけでなく、送信処理をキャンセル（無効化）する手法についても学習しましょう！
これにより、例えばフォームの内容を確認してエラーが合った場合に送信処理をキャンセルすることが出来るようになります。
submit()を無効化するには？
まず最初に、submit()の実行をキャンセル（無効化）する方法について見ていきましょう！
どのようにキャンセルさせるかと言うと、実はsubmit()メソッドは返り値に「false」を指定すると実行を中止するという特徴があります。
これを利用すると、一般的には以下のような記述になります。
$('form').submit(function() {
return false;
});
やっていることは非常に簡単で、「return文」でfalseを返しているだけです。
これにより、submit()メソッドは実行を中止するので結果的に送信処理がキャンセルされるというわけです。
submit()する前に処理を行う方法
送信処理をキャンセルする方法を学んだところで、submit()を実行する前にフォームの内容をチェックする処理を記述してみましょう！
例えば、入力フォームにユーザーが何も入力していなければ送信処理をキャンセルして実行されないようにしてみます。
次のサンプル例を見てください！
$('form').submit(function(e) {
var count = $('input').val().length;
if( !count ) return false;
});
この例では、入力フォームの文字数を「val().length」で確認していますね。
つまり、文字数が「0」の場合は何も入力されていないというシンプルな考え方です。そこで、IF文を使って入力がされていなければfalseを返すようにしているわけです。
これにより、文字が入力されていなければ送信ができないフォームを作ることができるので便利ですね。
submit()を引数なしで使う
これまでは、submit()メソッドの引数に実行したい処理を関数で指定してきました。
しかし、この引数は指定しなくてもsubmit()は利用することができます。
「引数なし」の場合は、submit()処理を他のHTML要素で代用することができるという特徴があるのでご紹介します。
次のサンプル例を見てください！
$('button').click(function() {
$('form').submit();
});
これは普通のボタン要素にクリックイベント処理を記述しているのですが、その中身にsubmit()を実行しているのが分かります。
この記述だけで、ボタンをクリックするとForm要素の送信処理が実行されるのです。
通常であればForm要素内にある送信ボタンをクリックしてsubmit()処理を実行するわけですが、他のボタンでも代用できるというわけです。
submit()の引数「あり・なし」で処理の方法が少し変わるので、どちらの方法でも実行できるように慣れておきましょう！
まとめ
今回は、jQueryからForm要素の送信（submit）処理を操作できる「submit()」メソッドについて学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
- submit()はForm要素を対象にして任意の処理を実行することができる
- submit()の実行時にaction属性値を変更することで送信先を変えることができる
- submit()は返り値にfalseを指定することで処理をキャンセルすることができる
- submit()は引数なしだと、他のHTML要素に処理を代用することができる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
