【jQuery】submitを使って送信前に処理を実行する方法！

Web技術

2021.05.04

Formの送信前に処理を実行したいけどどうやってやるの？

条件によっては送信を取り消したい。

わかりやすく教えてほしい！

こういった疑問にこたえます。

この記事を読めば

Form送信前に処理を実行することができるようになる
条件によって送信を取り消すことができるようになる

submitメソッドを使えば簡単に実装することが可能です。

エンジニアの僕がわかりやすく解説します。

submitメソッドとは？

submitメソッドはjQuery側でForm送信時の処理をプログラムすることができるメソッドです。

次のようなFormがあったとします。

<form>
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>

このフォームの送信ボタンが押された時に実行する処理を記述することが可能です。

例えば、Formに入力された内容をチェックしてから送信したい場合などに利用できます。

submitの使い方

submitメソッドの書き方は次の通りです。

<form>
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>
<script>
  $('form').submit( 実行したい処理 );
</script>

submitの引数に実行したい処理を記述します。一般的にはfunctionを記述していきます。

例えば、姓名が入力されているかチェックし、入力されていれば送信を実行、入力されていなければアラートを出し送信を停止するような処理をしたい場合は次のようなプログラムになります。

<form method="post" action="post.php">
  <div>
    姓：<input id="lastname" type="text" name="lastname">
  </div>
  <div>
    名：<input id="firstname" type="text" name="firstname">
  </div>
  <button id="btn">送信</button>
        
</form>
<script>
  $('form').submit( function(){
    let n = 0;
    let error = new Array;
    let lastname = $('#lastname').val();
    let firstname = $('#firstname').val();

    if(lastname == ""){
      error[n++] = "姓が入力されていません。";
    }
    if(firstname == ""){
      error[n++] = "名が入力されていません。";
    }

    if(error.length !== 0){
     let message = error.join('\n');
       alert(message);
       return false;
    }
  });
</script>

送信前の入力チェックで未入力項目があった場合、return falseとして送信処理を停止しています。

これを記述することで未入力のまま送信されることを防いでいます。