jQueryのsubmitとは？jQueryのsubmitでフォームを使いこなそう

システム
エンジニア

フォームを送信できるメソッドにはどんな種類がありますか？

プロジェクト
マネージャー

submitメソッドが代表的です。では、詳しく見ていきましょう。

jQueryのsubmitとは？

jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つのsubmitメソッドは、HTMLのsubmitの処理と連動して様々なことがます。JavaScriptだけで作るよりも、jQueryを使った方がずっと簡単に実現できるのです。

なおこの記事のサンプルを利用する場合、htmlのheadタグ内に以下を記述してください。下記が最新版のjQueryではない可能性もありますが、古いバージョンでも動作はします。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

HTMLのsubmitとは

jQueryのsubmitを解説する前に、HTMLのsubmitとは何なのかを説明します。submitとはformタグ内で利用するinputタグのタイプの1つで、送信ボタンを出す時に使用します。

<form>
  <input type=”text”>
  <input type=”submit” value=”送信する”>
</form>

上の例のように、submitタイプのinputタグのボタンは、textタイプのinputタグのテキストボックス等とセットで使われます。これによりユーザが入力データを送信することができます。コメント機能やWebメールに利用されることが多くなっています。

submitのサンプル

それではjQueryのsubmitを利用してみましょう。上の例のhtmlを記述した後、scriptタグ内に以下を記述してください。

$(document).ready(function(){
$(‘form’).submit(function() {
alert(‘送信しました。’);
});
});

$(document).ready(function(){～})の部分は、Webページを読み込んだ後にfunction内の処理を行うという意味です。documentや’form’はセレクタ、readyやsubmitはメソッドと言います。

指定したfunctionをsubmit後に実行できる

上のサンプルではsubmitメソッドのパラメータにfunctionを指定しています。その中ではalertでポップアップウィンドウを出しています。これによりHTMLのsubmitのボタンがクリックされた後にこのfunctionの処理が行われます。

実行してボタンを押すと、ポップアップウィンドウが表示されます。なおsubmitに指定するfunctionは以下のように分けて宣言することも可能です。

$(document).ready(function(){
$(‘form’).submit(dispAlert);

function dispAlert() {
alert(‘送信しました。’);
}
});

遷移先を選べるようにする

次は条件によってsubmitの動作を変える方法を紹介します。まずはsubmitした時に、ラジオボタンのチェック箇所によって遷移先を切り替えるサンプルです。htmlは以下のように記述してください。

No.1
No.2
No.3

<form>
  <input type=”radio” name=”group” value=”1″ checked>No.1
  <input type=”radio” name=”group” value=”2″>No.2
  <input type=”radio” name=”group” value=”3″>No.3
  <input type=”submit” value=”送信する”>
</form>

action属性を書き換える

jQueryは以下のようにします。

$(document).ready(function(){
$(‘form’).submit(function() {
var v = $(‘input:checked’).val();
switch(v) {
case ‘1’:
$(this).attr(‘action’, ‘/page1.html’);
break;
case ‘2’:
$(this).attr(‘action’, ‘/page2.html’);
break;
case ‘3’:
$(this).attr(‘action’, ‘/page3.html’);
break;
}
});
});

まず$(‘input:checked’).val()でチェックされたラジオボタンのvalueを取得します。その結果でswitch文で分岐します。$(this).attr(‘action’, ‘～’);でformタグのaction属性を変更して、遷移先のページを切り替えています。thisは自分自身で、この場合formタグになります。

押したボタンによって切り替える

次はクリックしたボタンによって遷移先を切り替える方法です。htmlは以下のようにします。

<form>
  <input type=”button” value=”1″ onclick=”setAct(‘/page1.html’)”>
  <input type=”button” value=”2″ onclick=”setAct(‘/page2.html’)”>
  <input type=”button” value=”3″ onclick=”setAct(‘/page3.html’)”>
</form>

htmlではなくjQuery側でsubmitする

jQueryは以下のように記述します。html側からコールされるfunctionの定義のため、$(document).ready～は不要です。

function setAct(page) {
$(‘form’).attr(‘action’, page);
$(‘form’).submit();
}

実行するとinputタグのonclickからsetActが呼び出され、そこでattrメソッドで遷移先が設定されます。その後setAct内でsubmitします。そのためhtml側のinputタグのtypeはsubmitではなくbuttonにしています。今回のやり方は処理の発生順の関係でこのようにする必要があります。

フォームの内容をチェックする

フォームの入力内容をチェックして、正しくない場合はsubmitしないということもできます。htmlが以下のようになっているとします。

<form>
  <input type=”text”>
  <input type=”submit” value=”送信する”>
</form>

jQueryは以下のように記述します。

$(document).ready(function() {
$(‘form’).submit(function() {
var val = $(‘input’).val();
var cnt = val.length;

if(val===’NGワード’) {
alert(“NGワードです。”);
return false;
}
if(cnt==0) {
alert(“入力欄が空です。”);
return false;
}
});
});

falseを返すとsubmitが発生しない

上のサンプルでボタンをクリックすると、inputタグに入力された内容をvalメソッドで取得します。そしてlengthで文字数も取得します。取得した内容がNGワードであるか、文字数が0だった場合はalertで警告を出して、return falseで終了します。

return falseでfalseを返すとsubmitが発生しません。実際にやってみると、falseが返される場合はページがリロードされないのがわかるでしょう。alertを外してみるとよりわかりやすくなります。

システム
エンジニア

jQuery側からform送信処理をコントロールできるメソッドなんですね。

プロジェクト
マネージャー

そうですね。他にもイベント処理を設定できたりと何かと便利なメソッドですので、ぜひマスターしてください。

jQueryのsubmitでフォームを使いこなそう

jQueryのsubmitを解説しましたが、ご理解頂けましたでしょうか。jQueryを使えばformタグとinputタグを使う処理で、色々と出来ることが分かったと思います。是非使いこなして素晴らしいWebページを作って下さい。