submit内にajaxを入れたらsubmitが多重実行されてしまった

form内のデータをajaxでpostしようとしたときに失敗したケースです。

formボタンにclickイベントを付けて、そのボタンが押されたらajaxの処理を走らせようとしてました。

<form id="form" method="post">
  <!-- 送りたいデータフォーム -->
  <button id="btn" type="submit" name="button">送信</button>
</form>

$("#btn").on("click",()=>{
  console.log("clicked");
  $("#form").submit(e=>{
    e.preventDefault();
    console.log("submitted");
    $.ajax({ //以下ajaxの処理
  });
});

結果どうなったかというと、ボタンをクリックするたびにsubmitされる回数が増えてしまったのです。

submitが多重実行される原因

原因は”preventDefault”でform自体が持つsubmitイベントを止めているためです。

こうするとsubmitによるページ遷移が行われないのですが、再度ボタンをクリックしたときにsubmitイベントが多重登録されてしまいます。

そもそもsubmitいらない

どうしてこのようなコーディングをしてしまったかというと「コピペ流用」ですね。そもそもajaxでデータを送るのでformをsubmitする必要はありません。なので、$(“#form”).submit()を消します。

$("#btn").on("click",()=>{
  console.log("clicked");
  $.ajax({ //以下ajaxの処理
});

問題なく動作するようになりました。