window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示する方法｜DAD UNION

window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示する方法をご紹介します。

Contents

form送信前に確認ダイヤログを表示するCSS記述
form送信前に確認ダイヤログを表示するHTML記述
window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示するJavaScriptの記述
window.confirmとjQueryのsubmitを使って、form送信前に確認ダイヤログを表示するデモページ

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>