jQuery【submit】submitイベントを使ってフォーム送信時にデータを取得

フォームが送信されると、ブラウザ上では「submitイベント」が発生します。jQueryでは、このイベントの発生タイミングに合わせて、入力内容の取得や未入力チェックなどの処理を追加できます。

以前は、このイベントを扱うために「submit()メソッド」がよく使われていました。ただしこのメソッドは、引数の有無によって異なる動作をするため、コードを読んだときに動きが分かりにくい場合があります。そのため現在は、on()メソッドを使ってイベントを登録する「 .on(“submit”, …) 」のような、用途がわかりやすい書き方が主流になっています。

この記事では jQuery のフォーム送信処理の基本について、以前のsubmit()メソッド を使った書き方にも触れつつ、現在のトレンドを分かりやすく解説します。

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

最終更新日：2026年8月3日

1. jQueryのsubmitイベント

submitは、フォームが送信されるときに発生するイベントです。jQueryでは、このイベントの発生タイミングに合わせて処理を追加することができます。

フォームは、主に次のような操作で送信されます。

※Enterキーでの送信は、フォーム内にsubmitボタンがある場合、またはテキスト入力欄が1つだけの場合に限られます。

jQueryでは以前、このsubmitイベントを扱うために、次のようにsubmit()メソッドを使って書くことがよくありました。

▼ 引数を渡さずに呼び出す：フォームの送信を強制的に実行

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

▼ 関数を渡す：submitイベントのハンドラとして登録

$(セレクタ).submit(function(event) {
  // 実行する処理
});

このようにsubmit()メソッドは、引数の有無により違う動作をするため、慣れていないと読みにくい場合があります。
そのため現在は、「イベントの登録」だけを行う on() メソッドを使い、次のように「 .on(“submit”, …) 」と書く方法が一般的です。

$(セレクタ).on("submit", function(event) {
  // 実行する処理
});

この書き方を選ぶメリットには、次のような点が挙げられます。

なお初心者のうちは、送信時の処理を書くには「 .on(“submit”, …) 」を使うと覚えておけば大丈夫です。

 

▲目次へ戻る

2. submit イベントで form の入力内容を取得する

submit イベントを使うと、送信ボタンが押されたタイミングで入力内容を取得できます。

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(() => {
  $("form").on("submit", function(event) {
    event.preventDefault();
    $("#result").text("入力内容は「" + $("#input").val() + "」です！");
  });
});
</script>

<div style="background-color:#ccc; padding:20px;">
  任意のテキストを入力して送信ボタンをクリックしてください。
  <form>
    <div style="display:inline-flex; align-items:center; gap:8px;">
      <input type="text" id="input">
      <button type="submit">送信</button>
    </div>
  </form>
  <div id="result"></div>
</div>

このサンプルでは、フォーム送信時に「 $(“#input”).val() 」で入力内容を取り出し、「 $(“#result”).text(…) 」で画面に表示しています。

さらに、「 event.preventDefault() 」で本来の送信動作を止めています。これによりページの再読み込みが行われないため、表示した結果をそのまま確認することができます。

submit イベントは、次のような場面でよく使われています。

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

また、form 要素については、以下のページもご参照下さい。

 

▲目次へ戻る

3.jQueryでsubmitイベントをキャンセルする

submitイベントには、ブラウザが標準で用意している「デフォルトの動作」があります。それは、「フォームのデータをサーバーへ送信」し、「ページを遷移（＝再読み込み）させる」、という一連の動作です。

「 event.preventDefault() 」 は、この「ブラウザ標準のデフォルト動作」をまとめてキャンセルするメソッドです。そのため、event.preventDefault()をsubmitイベントの中で使うと、「フォームが送信される」ことと「ページが再読み込みされること」を、両方とも止めます。

項目2では、event.preventDefault()の「ページの再読み込みを止める」役割によって、submitイベント発生時も画面が初期化されることなく、結果の表示を確認することができました。
ここでは、もう1つの「フォームが送信されることを止める」役割に着目します。

フォーム送信を中止したいとき、このevent.preventDefault()メソッドを使うことができます。

$("form").on("submit", function(event) {
  event.preventDefault();
});

たとえば、未入力なら処理を止めたい場合は、次のように書けます。

$("form").on("submit", function(event) {
  event.preventDefault();
  if ($("#input").val().length < 1) {
    return;
  }
  $("#result").text($("#input").val().length + "文字入力されました！");
});

この例では、入力された文字が1文字未満（未入力）ならそこで処理を終了し、結果の文字数は表示せずに処理を終了しています。

💡【ポイント】 jQueryのreturn falseとの違い

jQueryでは、次のように「 return false; 」と書いても送信を止めることができます。

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

ただ、return false は送信停止だけでなくイベント伝播（イベントが親要素へ伝わっていくこと）も停止するため、送信だけを止めたい場合は preventDefault()メソッド を使う方法がおすすめです。

 

▲目次へ戻る

4. jQueryのsubmitイベントについて、よくある質問

Q1. return false; でも送信を止められますか？

 

Q2. submitイベントの中で入力値を取得できますか？

 

Q3. button要素とinput type="submit" はどちらを使えばよいですか？

 

Q4. submitイベントが動かないとき、どんな原因が考えられますか？

 

Q5. clickイベントとsubmitイベントとの違いはありますか？

 

Q6. jQueryを使わずに、JavaScriptだけでフォーム処理を書くことはできますか？

 

▲目次へ戻る

5. まとめ

jQueryのsubmitイベントについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。

「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。

本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る