Submitボタンを非活性にしてユーザビリティを良くする(二重送信を防止)

ボタン押してから遷移するまで時間がかかりそうなフォーム

本当に処理されているのかわからないユーザーは、不安のあまりボタンを連打したりブラウザバックしたり画面を閉じてしまうかもしれない。

html

<form method="post" action="post.php">
  <input type="file" name="image1" required="required">
  <input type="file" name="image2">
  <input type="file" name="image3">
  <input type="file" name="image4">
  <input type="file" name="image5">
  <button type="submit">送信</button>
</form>

そうだ、jQueryでボタンを非活性にしよう！！！

3秒で思いついた方法😇
ボタンをクリックしたら非活性にして、submitしてグルグルを表示する。

jQuery

$('button').on('click', (event) => {
  const $button = $(event.target)

  $button.prop('disabled', true)
    .closest('form').submit()
    .html('<i class="fas fa-spinner fa-spin"></i>')
})

想定してた動きじゃない

なんかrequire効いてなくね？🥺

こうすればよかったっぽい

中でreturn falseすれば送信されないのでバリデーションとか追加できる。

jQuery

$('form').on('submit', (event) => {
  const $button = $(event.target).find('button')

  $button.prop('disabled', true)
    .html('<i class="fas fa-spinner fa-spin"></i>')
})

送信前

送信中