ZeroPlus Media > Web制作 > JavaScript > 【jQuery】submit()イベントでフォームを制御する方法を解説

【jQuery】submit()イベントでフォームを制御する方法を解説

2022/05/10

2023/05/08

jQueryに送信フォームを制御するsubmit()イベントがあります。submit()は送信ボタンをクリックしてデータを送信する際に、さまざまな処理を実行することができます。submit()はホームページなどのWebサイト制作で使用することは少ないでしょう。一般的にはWebアプリで利用される傾向にあります。

submit()イベントが扱えるようになると、送信前にキャンセルイベント処理を実行したり、送信時にイベントを設定できるようになります。

この記事では「jQueryのsubmitイベントの使い方」について解説します。

この記事で身につく内容

jQueryのsubmitイベントの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

submit()イベントの使い方

jQueryのsubmitイベントは、jQueryのイベントの一つ。ユーザーが送信ボタンをクリックした際にイベントが発火します。

基本書式

$("submit要素").submit(function(){
  // ここに処理の内容を記述する
});

上の書式にコードを当てはめると次のようになります。

<form action="">
  <button type="submit">送信</button>
</form>

$('form').submit(function () {
  alert('submit!');
});

出力結果

See the Pen submit-sample by ZeroPlus (@zeroplus-programming) on CodePen.

送信ボタンをクリックすると、submit()によってalertメソッドが発火します。

submit()で無効化処理（キャンセル）

submit()はクリックした際に送信を無効化（キャンセル）することができます。

無効化処理をする場合は、次のように記述します。

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

});

返り値にreturn false;で処理の内容が止まります。

無効化処理のイメージがしやすいように、次のようなコードで見てみましょう。

<form method="post" action="sample.html">
  <input type="text" placeholder="テキストを入力する">
  <button type="submit">送信</button>
</form>

const form = $("form");
const input = $("input");

$("button").click(function () {
  form.submit(function () {
    if (input.val() === '') {
      alert("テキストを入力してください");
      return false;

    } else {
      alert("送信しました");

    }
  });
});

出力結果