submit()とsubmitボタンクリックの挙動の違い

javascript

javascriptでformのサブミットを実行するsubmit()がある。サンプルソースはこんな感じで。

<html>

<head>
<script type="text/javascript">
<!--
function cmd1(){
 var f=document.getElementById('f');
 f.submit();
 return false;
}
//-->
</script>
</head>

<body>

<form id="f">
 <input type="submit" id="cmd1" name="cmd1" value="cmd1"/>
</form>

<p>
 <input type="button" value="cmd2" onclick="cmd1()"/>
</p>

</body>

</html>

cmd2ボタンを押すとcmd1をクリックした時と同様にサブミットされる事がわかると思う。

でも実はこれ若干挙動が違うのである。それは付加されるパラメーターの違い。

cmd1ボタンを押すとcmd1の値がクエリパラメーターとして付加する。

http://xxx.xxx/ex-submit.html?cmd1=cmd1

cmd2ボタンを押すとどうなるか？

http://xxx.xxx/ex-submit.html?

cmd1の値はパラメーターとして渡さずにサブミットが行われた。

つまり

name指定のあるsubmitボタンをクリックする事とsubmit()を実行する事は厳密には同じ挙動でなはい。

という事。

webアプリ書いていて、この事を意識して書いてる人は少なさそう。googleで検索してもこの事に対して書かれてる情報を見ることはなかった。通常はformのactionを分けて書くんだろうねー。

ちなみに同じ挙動にする為には

function cmd1(){
 var f=document.getElementById('f');
 f.elements['cmd1'].click();
 return false;
}

とすればOK。