ITコラム

プログラミングノウハウ

2018.09.19

#jQuery入門

jQuery【submit】formデータを取得するsubmitメソッド

jQuery の submit メソッドは、送信ボタンをクリックした際に form 要素内のデータを取得できるメソッドです。
submit メソッドを使用すると、本処理に先立って入力チェック等の前処理を行うことが可能となります。
今回は、jQuery の submit メソッドの使用方法について解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. submit メソッド
2. submit メソッドで form データを取得
3. submit メソッドのキャンセル
4. まとめ

1. submit メソッド

　
submit メソッドは、フォーム内容の送信処理を行う際に使用するメソッドです。
form 要素内でのみ使用可能で、フォーム内容を以下のいずれかの動作によって送信します。

• <input type=”submit”>をクリック
• <input type=”image”>をクリック
• <button type=”submit”>をクリック
• form 要素にフォーカスを当てて Enter キーを押下

　
submit メソッドは、引数によって 3 通りの記述方法があります。

$(セレクタ).submit( );

$(セレクタ).submit( handler( eventObject ) );

$(セレクタ).submit( [ eventData ], handler( eventObject ) );

引数なしの「 .submit( ) 」は、「 .trigger(“submit”) 」の省略形です。
（trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。）

submit メソッドの引数の内容は、それぞれ以下の通りです。

.submit( handler( eventObject ) )

handler
実行する処理を関数として指定

.submit( [ eventData ], handler( eventObject ) )

[eventData]
添付したいデータをマップ値で指定
handler
実行する処理を関数として指定

▲目次へ戻る

2. submit メソッドで form データを取得

　
submit メソッドを使用して、入力内容を表示します。
表示したいテキストを入力して送信ボタンをクリックしてみて下さい。
（アラートが表示されますので OK ボタンをクリックして下さい。）

任意のテキストを入力して送信ボタンをクリックして下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("form").submit(function() {
    $("#out1").text("入力内容は「 " + $("#dat1").val() + " 」です！");
  });
});
</script>

<div style="background-color:#CCC; padding:20px;">
  任意のテキストを入力して 送信ボタンをクリックして下さい。
  <form action="javascript:alert('送信します');">
    <div style="display:inline-flex; align-items:center;">
      <input type="text" id="dat1">
    　<input type="submit">
    </div>
  </form>
  <div id="out1"></div>
</div>

上のサンプルでは、form 要素内の action 属性にアラートを表示するプログラムを記述して、フォーム内容が送信される際にアラートでメッセージを表示しています。

このように、submit メソッドを使用すると、送信ボタンをクリックした際に発生する処理の直前に別の処理を行うことができます。

入力内容のエラーチェックを行ったり確認メッセージを表示したりするなど、この直前処理を有効に使用すると、ユーザーがより効率良く作業できる画面を作成することができます。

尚、val メソッドの使用方法についてはjQuery【 val 】value 値の取得と設定をご参照下さい。

▲目次へ戻る

3. submit メソッドのキャンセル

　
submit メソッドによる処理を中止する場合には、返り値に false を指定して、次のように記述します。

$("form").submit(function() {
  return false;
});

通常、次のように条件式と組み合わせて使用します。

$("form").submit(function() {

  if($("#in_dat").val().length < 1) return false;

  $("#out_dat").text($("#in_dat").val().length + " 文字入力されました！");
});

「 return false 」以下は処理されないため、このサンプルは未入力の場合に文字数を表示しないように制御しています。

▲目次へ戻る