【jQuery】submit()を使って送信する前に処理を行う!

送信する前に処理を行うにはjQueryのsubmit()メソッドを使用します。

jQueryのsubmit()メソッドとはformタグで囲まれた要素が送信する前に処理を行うメソッドであり、フォーム画面で送信する際に送信前の確認処理を行うように何かの処理を行いたい場合に使用されます。

また、submit()メソッドを無効にすることで、フォームの送信前の処理を無効にすることから、フォームの送信処理も無効にできますので、エラーチェックの処理を行うことができます。

今回は、jQueryのsubmit()メソッドを使って送信する前に処理を行う方法について以下の内容で解説していきます。

⚫︎ 送信する前にイベントを発生させる場合
⚫︎ 送信する前にデータを渡してイベントを発生させる場合

⚫︎ submit()をパラメータなしで使用する方法
⚫︎ submit()を無効にする方法

ハルトさん

今回はjQueryのsubmit()メソッドでクリックした時に処理を行う方法について説明していきます。

さとみさん

お願いします!

submit()とは

submit()とは、要素がマウスによるクリック操作を行うことで、イベント処理を実行するメソッドとなります。

submit()の書き方

submit()メソッドの書き方は下記となります。

パラメータ

⚫︎ イベントデータ:
イベントオブジェクトに渡すデータを指定する
(変数やマップ値のようにオブジェクトリテラル式で指定)
⚫︎ イベントハンドラ:
クリックしたときのイベント(関数)を指定する

$()にはformタグのセレクタを指定します。

そして、submit()のパラメータにイベントハンドラを指定することで、送信する前に指定したイベント処理を行うことができます。
また、パラメータにイベントデータを指定することで指定したイベントハンドラにデータを渡すことができます。

送信する前に処理を行うサンプルコード

submit()でクリックした時に処理を行うサンプルコードを紹介します。

送信する前にイベントを発生させる場合

送信する前にイベントを発生させる場合はsubmit()のパラメータにイベントハンドラを指定します。

sample.html

index.js

sample.html

出力結果

submit()にイベントハンドラを指定することでクリック後にイベント処理を行っています。
そのため、ボタンを押すと指定したoutクラスに文字列が表示され、sampleクラスの背景色が変更されています。

送信する前にデータを渡してイベントを発生させる場合

送信する前にデータを渡してイベントを発生させる場合はsubmit()のパラメータにイベントデータとイバンとハンドラを指定します。

sample.html

sample.html

index.js

出力結果

submit()のパラメータにイベントデータを指定することでクリック処理時にデータの受け渡しを行っています。
そのため、text変数のデータがクリック処理時に表示されています。

さとみさん

submit()のパラメータにイベントデータを指定することでクリック処理時にデータの受け渡しを行うことができるのですね!

ハルトさん

そうですね。
サンプルコードでは、変数のデータを表示していますが、
let obj = {old: 50 ,name: ‘Haruto’}のようなマップ値のデータの受け渡しも可能ですよ。

パラメータ無しでsubmit()を使用する場合

パラメータ無しでsubmit()を使用してみます。

sample.html

sample.html

index.js

出力結果

パラメータ無しではsubmi()は無効になります。
しかし、次のサンプルコードを見てください。

sample.html

sample.html

index.js

出力結果

btnのclick()内でformタグのsubmit()を呼び出すことで、btnクラスのボタンをクリックするとformタグのsubmit()を呼び出したことになります。
そのため、クリックのボタンを押すと、submit()のイベントハンドラで指定したアラートを呼び出したことになり「フォームを送信しました。」が表示されます。

click()について詳しく知りたい場合はこちらをご参考ください。

さとみさん

submit()はパラメータ無い場合でも指定したセレクタのクリック処理があれば処理が行われるのですね!

ハルトさん

そうですね。
サンプルコードでは、btnクラスのclick()のイベントハンドラ内でパラメータ無しのsubmit()を実行しています。
これにより、btnクラスのボタンを押した時にsubmit()が呼び出されているようになります。

submit()を無効にする方法

submit()を無効にするにはreturn文でfalseを指定します。
無効にす流ということはフォームの送信前の処理が行われないので、フォームの送信も行われません。

sample.html

sample.html

index.js

出力結果

submit()でreturn文にfalseを指定することで、submit()の処理を無効にしています。
その為、テキストフィールドが空の状態で送信ボタンを押すと何も処理が行われませんが、テキストフィールドに文字を入力して送信ボタンを押すとアラートが発生してフォームが送信されます。

今回のポイント

submit()でクリック処理を行う

⚫︎ 要素をクリックした時に処理を行うにはjQueryのsubmit()メソッドを使用する

⚫︎ クリック処理時にイベント処理を行う場合はsubmit()のパラメータにイベントハンドラ(関数)を指定する

⚫︎ クリック処理時にデータの受け渡しを行う場合はsubmit()のパラメータにイベントデータを指定する

⚫︎ submit()はパラメータ無い場合はクリック処理は行われないが、指定したセレクタのクリック処理がある状態で、別の要素からsubmit()が呼び出されている状態だと処理が行われる

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し