カテゴリ:
jQuery

Buttonのclickイベントでformのsubmitを抑止する

jQueryを使っていると、Buttonのclickイベントに何らかの処理を書く機会は多いだろう。

最近、Buttonが押下されると$.ajaxメソッドでPOST送信を行うコードを書いていて、送信時に原因不明のエラーにしばらく悩まされたので、その原因と対策を書き留めておく。まず、問題のコードは以下のようなものだ。htmlはformタグの中にbuttonタグを配置している。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./jquery-ui.min.css" />
		<script src="./jquery-2.1.1.min.js"></script>
		<script src="./jquery-ui.min.js"></script>
		<script>
			$(document).ready(function() {
				$('#in-form').button()
				.click(function() {
					console.log('click!');
					$.ajax({url: './target', type: 'POST'})
					.done(function(data, textStatus, jqXHR) {
						console.log('done');
					})
					.fail(function(jqXHR, textStatus, errorThrown) {
						console.log('fail textStatus: ' + textStatus);
					});
				});

				$('#datepicker').datepicker();
			});
		</script>
		<title>Buttonのclickイベントでreturn false</title>
	</head>
	<body>
		<h1>Buttonのclickイベントでreturn false</h1>
		<form>
			<input type="text" id="datepicker" />
			<button id="in-form">form内のbutton</button>
		</form>
	</body>
</html>

1つしかないButtonを押下すると、$.ajaxメソッドでPOST送信する仕組みである。最初はこのままでも問題なく動いていたのだが、ちょっとしたタグの組み換えによって$.ajaxがエラーになり送信できなくなってしまったのだ。textStatusは"error"、jqXHR.statusは0となっていた。

タグを組み換えただけなのに何故エラーになってしまうのだろうとしばらく悩んだのだが、原因はButtonの押下によってformがsubmitされてしまっていたためだ。「そんなの当り前だろ。」と突っ込みたくなる方もいるかもしれないが、buttonタグをformでくくったのは本意ではなく、他のプラグインを利用するためにそうしていた。因みに$.ajaxメソッドを$.postメソッドに変更して試してみたが当然うまくいかなかった。

この問題の対策は簡単で、clickイベントのreturnでfalseを返せば良いだけである。これによってformのsubmitが抑止され、$.ajaxメソッド送信時のエラーは解消した。

				$('#in-form').button()
				.click(function() {
					console.log('click!');
					$.ajax({url: './target', type: 'POST'})
					.done(function(data, textStatus, jqXHR) {
						console.log('done');
					})
					.fail(function(jqXHR, textStatus, errorThrown) {
						console.log('fail textStatus: ' + textStatus);
					});

					// falseで戻ることによってsubmitを抑止
					return false;
				});

また、formタグが必要ないのであれば、formタグを除去することも解決方法の1つだろう。

(2014/11/26)

新着情報
【iOS Objective-C, Swift Tips】画像の向きを指定して保存する(Swift)
【iOS Objective-C, Swift Tips】UIImagePickerControllerの表示を日本語にする(Swift)
【iOS Objective-C, Swift Tips】ウィンドウの階層構造を3D表示する(Swift)

Copyright(C) 2004-2015 モバイル開発系(K) All rights reserved.
[Home]