HTMLのformタグで問い合わせフォームなどを実装した時に、送信ボタンを押した時に確認のダイアログを表示させたい場合がある。

以下のようなシンプルなHTMLコードを例にする。

<form action="" method="POST">
  <input type="text" name="">
  <button type="submit">送信</button>
</form>

このようなフォームに確認ダイアログを実装する場合、JavaScriptで別途関数を用意する必要がある。

<script>
  function beforeSubmit() {
    if(window.confirm('この内容で送信しますがよろしいでしょうか？')) {
      return true;
    } else {
      return false;
    }
  }
</script>

この関数をformタグのonsubmit属性に渡してあげれば良い。

まとめると、コード全文は以下のとおりとなる。

<form action="" method="POST" onsubmit="return beforeSubmit()">
  <input type="text" name="">
  <button type="submit">送信</button>
</form>

<script>
  function beforeSubmit() {
    if(window.confirm('この内容で送信しますがよろしいでしょうか？')) {
      return true;
    } else {
      return false;
    }
  }
</script>

なお1点注意があり、以下のようにbuttonタグのonclick属性に関数を渡すと挙動が変わってくる。

<form action="" method="POST">
  <input type="text" name="">
  <button type="submit" onclick="return beforeSubmit()">送信</button>
</form>

この場合、確認ダイアログが表示された時にキャンセルを押してもフォームの内容が送信されてしまうのだ。

パッと見どちらも同じような処理に見えるが、実際の動きは大きく違うため、ECサイトの注文完了ボタンなどで使う場合は特に注意が必要だ。