問題 × 解決策

フォームの送信前に何らかの処理を挟む方法

問題

フォームの送信前に何らかの処理を挟むには?

解決策

  • 送信ボタンの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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

10 + sixteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧