JavaScriptのconfirmを使ってform内容の送信「する」「しない」を確認する方法｜DAD UNION

JavaScriptのconfirmを使って、form（フォーム）内容の送信前に「する」「しない」を確認するダイヤログを表示する方法をご紹介します。

Contents

form内容の送信「する」「しない」を確認するCSS記述
form内容の送信「する」「しない」を確認するHTML記述
confirmを使ってform内容の送信「する」「しない」を確認するJavaScriptの記述
JavaScriptのconfirmを使って、form内容の送信「する」「しない」を確認するデモページ

form内容の送信「する」「しない」を確認するCSS記述

※テキストボックス（.txt1）と送信ボタン（.btn1）のCSS記述です。必要に応じて変更して下さい。

<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>

form内容の送信「する」「しない」を確認するHTML記述

※formタグに任意のname=”dadform”とmethod=”GET”（またはmethod=”POST”）を指定します。GETの場合はformタグ内の入力・選択要素（value値）をURLパラメータとして送信します。formタグ内にテキストボックス（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>

confirmを使ってform内容の送信「する」「しない」を確認する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>