JavaScriptで実装する！フォーム送信の確認ダイアログ：Confirmメソッドの簡単ガイド｜DAD UNION

ウェブ開発において、フォームの内容を送信する前にユーザーの確認を得ることは非常に重要です。
この記事では、JavaScriptのconfirmメソッドを使って、フォーム送信前に「送信する」「送信しない」という選択をユーザーに求める方法を分かりやすく解説します。

Contents

CSSによるフォームのスタイリング
HTMLによるフォームの構築
JavaScriptによる確認ダイアログの実装
JavaScriptのconfirmを使って、form内容の送信「する」「しない」を確認するデモページ
まとめ

CSSによるフォームのスタイリング

まず、フォームとその要素にスタイルを適用するためのCSSを見てみましょう。
ここでは、テキストボックス（.txt1）と送信ボタン（.btn1）のデザインを設定しています。これらのスタイルは、フォームの見た目を整えるのに役立ちます。

<style>
* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 24px;
  padding: 20px 0 40px 0;
}
.txt1{
  width: 450px;
  padding: 8px;
}
.btn1{
  padding: 6px;
}
</style>

　
このCSSは、フォームの要素を中央に配置し、適切なパディングとマージンを設定することで、視覚的に魅力的なフォームを作成します。

HTMLによるフォームの構築

次に、フォームのHTML構造について説明します。ここでは、formタグに任意の名前（例：name=”dadform”）とメソッド（GETまたはPOST）を指定します。GETを選択した場合、フォームの入力内容はURLパラメータとして送信されます。フォーム内にはテキストボックス（name=”txt1″）と送信ボタン（name=”btn”）を配置します。

<h1>JavaScriptのconfirmを使って、form内容の送信前にダイヤログで「する」「しない」を確認します。</h1>

<form name="dadform" method="GET">
    <input class="txt1" type="text" name="txt1" value="右の「送信」ボタンをクリックするとdad-union.comサイトに移動します。">
    <input class="btn1" name="btn" type="submit" value="送信">
</form>

　
このHTMLコードは、ユーザーにフォームの送信前に確認する機会を与える基礎を作ります。

JavaScriptによる確認ダイアログの実装

ここが重要な部分です。
formタグ（name=”dadform”）内のボタン（name=”btn”）をクリックすると、form送信前にwindow.confirm()でダイヤログに確認メッセージを表示します。
ユーザーが「OK」をクリックした場合、フォームのアクションが”https://dad-union.com”に設定され、そこに送信されます。ユーザーが「キャンセル」を選択した場合は何も起こりません。

<script>
document.dadform.btn.addEventListener('click', function() {
    var okng = window.confirm('dad-union.comサイトに移動してもよいですか？');
    if(okng) {
        //「true」の場合
        document.dadform.action = "https://dad-union.com";
    }else{
        //「false」の場合
    }
})
</script>

　
このJavaScriptコードは、フォーム送信のプロセスをよりユーザーフレンドリーにするための鍵となります。