問題
フォームの送信前に何らかの処理を挟むには？
解決策
- 送信ボタンのtypeをsubmitではなくbuttonにする。
- 送信ボタンのクリックイベント「click(function(){ })」を作成する。
- クリックイベント内で何らかの条件、アクションにより、「$('form').submit();」で送信処理を行う。
フォームの送信前の処理
フォームの送信前に、再度送信確認を促したり、バリデートチェックをしたり等、何らかの処理を挟めるようにする方法をご紹介します。
DEMOはこちら
- ※実際に「送信」を行ってもデータが送信されることはありません。
- ※「送信」ボタンをクリックすると、横に「本当に送信する」ボタンが表示されるので、それをクリックして初めて送信処理がされます。
フォームの作成
まず、フォームの作成を行います。
HTML
<form action="" method="post">
<p class="formbottom">
<input type="button" value="送信" class="btns submit">
</p>
</form>ポイント!
送信ボタンのtypeをsubmitではなく、buttonにします。
フォームの送信前に処理を行う記述例
フォームの送信前に処理を行う記述例は以下となります。
送信ボタンにクリックイベントを作成します。
var clicker = true;
$("form input[type='button']").click(function(){
if(clicker == true){
$(this).after('<span class="btn-type01 checksubmit"><a href="#">本当に送信する</a></span>');
clicker = false;
}
$(".checksubmit a").click(function(event){
event.preventDefault();
$(this).closest('form').submit();
})
});ポイント!
「$(‘form’).submit();」を行うことで、フォームの送信処理を実行することができます。
参照
以下のサイトが、より詳しく解説してくれています。
【【jQuery】submit前に処理を行う方法 – Qiita】
https://qiita.com/kazu56/items/cdbf4e371cdc699709f1
コメント