👌

Event.preventDefault()で止めたフォームの送信を再開する

2022/06/13に公開

初めに結論

HTMLFormElement.submit() を実行する。

const form = document.getElementById('form'); 

form.addEventListener('submit', event => {
  // イベントを停止する
  event.preventDefault();

  // なんかの処理

  // 改めてsubmitする
  form.submit();
});

HTMLFormElement.submit()Event.preventDefault() で処理止まらないの?

HTMLFormElement: submit イベント

submit イベントは、ユーザーが送信ボタン (<button> または <input type="submit">) を押したり、 Enter キーをフォーム内のフィールド (例えば <input type="text">) の編集中に押したりしたときに発生します。このイベントは form.submit() メソッドを呼び出した場合には送信されません。

HTMLFormElement.submit() を実行した場合、そもそも submit イベントが発生しないので、addEventListener で登録したコールバック関数は実行されずに、サーバーへの送信が行われます。

GitHubで編集を提案

Discussion