SQL見るだけクエリ#181 ボタンクリックで確認のアラートメッセージを表示

記入日：2023-07-08　編集日：2023-07-08

ボタンクリックで確認のアラートメッセージを表示する方法について解説してみようと思います。

ボタンクリックで確認のアラートメッセージを表示

Checkout

以下のコードは、チェックアウトボタンをクリックしたときに確認のアラートメッセージを表示し、ユーザーが「OK」を選択した場合にフォームを送信する機能を実装しています。

1. チェックアウトフォームとチェックアウトボタンの要素を変数として取得します。
2. チェックアウトボタンに「click」イベントリスナーを追加します。ボタンがクリックされたときには、showAlert関数が呼び出されます。
3. showAlert関数では、デフォルトのイベント動作をキャンセルし、ボタンを無効化します。そして、確認のアラートメッセージを表示します。
4. confirm関数を使用してアラートメッセージを表示し、ユーザーが選択した結果をresult変数に格納します。
5. resultの値に応じて条件分岐を行います。もしresultがtrueであれば（ユーザーが「OK」を選択した場合）、チェックアウトフォームを送信します。
6. もしresultがfalseであれば（ユーザーが「キャンセル」を選択した場合）、チェックアウトボタンを再度有効化します。

スクリプトの動作は以下のようになります：

<form id="checkout-form" method="POST" action="/checkout">
  <button type="submit" id="checkout-button">Checkout</button>
</form>

<script>
  var checkoutForm = document.getElementById("checkout-form");
  var checkoutButton = document.getElementById("checkout-button");
  checkoutButton.addEventListener("click", showAlert);

  function showAlert(event) {
    event.preventDefault();
    checkoutButton.disabled = true;

    var result = confirm("アラートメッセージの内容\n\nOKボタンを押して処理を続けるかキャンセルボタンを押して中止します。");

    if (result) {
      // OKボタンがクリックされた場合、フォームを送信
      checkoutForm.submit();
    } else {
      // キャンセルボタンがクリックされた場合、ボタンの無効化を解除
      checkoutButton.disabled = false;
    }
  }
</script>

このコードの目的は、ユーザーがチェックアウトを進める前に確認のダイアログを表示し、ユーザーが処理を続けるかどうかを選択できるようにすることです。ユーザーが「OK」を選択した場合にはフォームが送信され、選択をキャンセルした場合には処理が中止されます。これにより、ユーザーが誤って注文を確定することを防ぐことができます。