submitさせないアレコレ

フォーム作ってるとここで submit してほしくないんだよなあ、ということがある。
その時に使える手法である。

1. disabled にすると submit できなくなる

type="submit" が与えられた <input> や <button> でも disabled 属性を付加すれば submit できなくなる。disabled 時のCSSを用意してグレーアウトさせるなどの使い方ができる。

<input type="submit" value="戻る" disabled>戻る

2. button がただのボタンであってほしいとき

<form> タグで囲まれている中に <button> があると、押した時に submit の動作になる。
こうなると、button に何かの役割を与えていたとしても get / post の動作が優先されてしまい、望んだ結果が来ない時がある。

原因と対策

<button> の基本仕様が「 submit しろ」になってるから。

<a href="#"><button>戻る</button></a>

これだと action 先にフォームの内容が指定のメソッドで放たれて終わりで、<a> タグの飛び先には遷移してくれないから「 submit されるせいで <a> タグが効かない」みたいになるわけで。

これは type 指定することで回避できる。

<a href="#"><button type="button">戻る</button></a>

3. 文字入力中の Enter で送信するのやめてほしいとき

フォームにモノ書いててエンター押したら「まだなのに送信した」とかすっごい嫌、って話。

あの状況を作らないためには Enter を無効にするしかない。

$(function(){
	$("input").on("keydown", function(e) {
		if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
			return false;
		} else {
			return true;
		}
	});
});