ワイヤード・パンチ

サイトレイアウトを変えてみました。よろしければアンケートにご協力ください。

jQueryのsubmit()が効かないときの対処法。

jQueryでformタグに対してsubmit()を使うと、form内のsubmitボタンをクリックされたときに処理をかけることができます。

通常ならば次の画面に遷移してしまうところを、まだフォーム内の入力ボックスに不備があった場合は、遷移を止めたりなど。

しかし、ほんの些細なミスでコードが全く効かないことがありました。

広告

今回試そうと思ったコード。

ごくごく単純に、submitを行っても、次の画面に遷移させずに、強制的に停止してしまうだけの処理です。

まずはhtml側。

<form method="post">
	<button type="submit" id="start">実行</button>
</form>

続いてjQuery。

jQuery(function($) {
	$("#start").submit(function() {
		return false;
	});
});

submitの中でreturn falseをするとその時点で処理は終了、画面遷移することなく止めることができます。

しかし実際にブラウザを開き、いくらボタンをクリックしても、次の画面に進んでしまいます。

処理がなぜか止まってくれません。

要素の指定先が間違っている。

submitされたときの処理を書く要素ですが、上記の例だとsubmitボタンのidが入力されています。

これが間違いです。

正しくはformに対してsubmitの処理を入れるのであって、submitボタンに対してsubmitの処理を入れても意味がありません。

よって、今回の場合は以下が正しいコードとなります。

jQuery(function($) {
	$("form").submit(function() {
		return false;
	});
});

ほんの些細なミスではあるのですが、意外と勘違いするので、いちおうメモとして残しておきました。