JavaScriptのconfirmを使って、form(フォーム)内容の送信前に「する」「しない」を確認するダイヤログを表示する方法をご紹介します。
Contents
ディスプレイ広告
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アナリティクスタグは流用しないで下さい。