フォームをsubmitするonClickイベントが重なった際のブラウザによる挙動の違い

onClick=”submit()” + type=”submit” が重なると…

あんまりない状況だとは思うのだけど、フォームをsubmitするonClickイベントが重なった場合、ブラウザによって挙動が違ったのでメモ。

例えば下記のようなHTMLの場合

<form action="" name="form">
	<div onclick="javascript:goSubmit()" style="background-color:#ffeeee;padding:30px;">
		<input type="submit" />
	</div>
</form>
<script>
function goSubmit(){
	document.form.submit();
}
</script>

<div>自体にonClickを指定して、フォームをsubmitするようにしている。

この時、<input type=”submit” />をクリックすると、InternetExplorerの場合のみ、二重にsubmitされる。Firefox/ChromeなどはgoSubmit()を実行するだけ。

なので、こういった形式を使いたい場合は

<form action="" name="form">
	<div onclick="javascript:goSubmit()" style="background-color:#ffeeee;padding:30px;">
		<input type="button" />
		<button></button>
		<img />
	</div>
</form>
<script>
function goSubmit(){
	document.form.submit();
}
</script>

などのsubmitしないボタンに変えてやると良い。

ただし、この場合はJavaScriptがオフになっていると、うんともすんとも言わないので、そこら辺は配慮する必要がある。

• 
• Tweet