form内のボタンをクリックした際に、すぐに登録処理をさせずに、ポップアップを入れたいときに簡単に実装する方法を記載します。
目次
対象コード
例えば、こんなコードの時です。
<body>
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
<form method="post">
<input type="hidden" name="type" value="register”>
<input type="hidden" name="user_id" value=“1”>
<input type="hidden" name=“id” value=“10001”>
<button type="submit" class="btn">処理する</button>
</form>
</body>
</code></pre>
よくあるform文かと思います。
<h2>対応方法</h2>
このコードをこんな感じに修正します。
<pre><code><body>
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~
<form method="post" onSubmit="return check()">
<input type="hidden" name="type" value="register”>
<input type="hidden" name="user_id" value=“1”>
<input type="hidden" name=“id” value=“10001”>
<button type="submit" class="btn">処理する</button>
</form>
<script type="text/javascript">
function checkApprove() {
if (window.confirm('処理します。よろしいですか？')) {
return true;
} else {
window.alert('キャンセルされました');
return false;
}
}
</script>
</body>
formタグ内に、onSubmitを追加します。追加することで、submitされた際に、onSubmit内の処理を呼び出すことができます。
ここでは、ボタンをクリックした際に、window.confirm を実行し、ポップアップで確認をするようにしています。OKであれば、submitされ、OKしなければ処理が中断されます。
簡単ですね。