JavaScript

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

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>

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

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

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。