window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示する方法をご紹介します。
Contents
ディスプレイ広告
form送信前に確認ダイヤログを表示するCSS記述
※確認ボタン(.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; line-height: 1.8em; } .btn1{ padding: 6px; } </style>
form送信前に確認ダイヤログを表示するHTML記述
※formタグにclass=”dadform”を指定します。formタグ内に確認ボタン(type=”submit”)を用意します。その他、必要に応じて変更して下さい。
<h1>window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示します。<br>以下の「確認」ボタンをクリックしてみてください。</h1> <form action="https://dad-union.com" method="GET" class="delform"> <input class="btn1" name="btn" type="submit" value="確認"> </form>
window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示するJavaScriptの記述
※jquery-3.1.1.min.jsファイルを読み込みます。$(“フォームタグのclass”).submit(function(){送信時の処理})を記述することで、formタグ(class=”dadform”)内の確認ボタン(type=”submit”)をクリックすると、送信時の処理としてform送信前にwindow.confirm()でダイヤログに確認メッセージを表示します。「OK」ボタンクリックの場合は「https://dad-union.com」サイトに移動し、「キャンセル」ボタンクリックの場合は何もしない記述になってます。
<script type="application/javascript" src="jquery-3.1.1.min.js"></script> <script type="application/javascript"> $(".delform").submit(function(){ if(window.confirm('dad-union.comに移動しても良いですか?')) { return true; } else { return false; } }); </script>
window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示するデモページ
window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。