form内のデータをajaxでpostしようとしたときに失敗したケースです。
formボタンにclickイベントを付けて、そのボタンが押されたらajaxの処理を走らせようとしてました。
HTML
<form id="form" method="post"> <!-- 送りたいデータフォーム --> <button id="btn" type="submit" name="button">送信</button> </form>
JS
$("#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()を消します。
JS
$("#btn").on("click",()=>{ console.log("clicked"); $.ajax({ //以下ajaxの処理 });
問題なく動作するようになりました。