カテゴリ:
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>

１つしかない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タグを除去することも解決方法の１つだろう。

(2014/11/26)
新着情報
【オープンソースソフトウェア環境構築】Apple silicon Macで開発環境を構築
【Rust Tips】Actix webでJSONをPOSTする
【Rust Tips】コマンドライン引数を取得する
Copyright© 2004-2018 モバイル開発系(K) All rights reserved.
[Home]