DOM/jQuery的submit() 方法失效的解決方案
背景
我們在開發(fā)form表單的時(shí)候大都情況下并不是直接使用<input type="submit" />
提交表單镐依,我們更希望自定義我們的提交方法比如在提交之前做一些其他工作。這就要使用DOM/jQuery的submit()方法了。
submit()的方法可以綁定在很多地方,如<button />,<input />,<div />,<a />
等等,使用onclick事件綁定或者jQuery的選擇器綁定泊窘。
那么問題來了,有些人會遇到如下問題(我們以w3school的submit方法事例做例子)。
代碼
(代碼做了相應(yīng)修改)
<html>
<head>
<script type="text/javascript">
function formSubmit()
{
//do something you need
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<p>在下面的文本框中輸入一些文本烘豹,然后點(diǎn)擊提交按鈕就可以提交表單瓜贾。</p>
<form id="myForm" action="/i/eg_smile.gif" method="get">
名:<input type="text" name="firstname" size="20" /><br />
姓:<input type="text" name="lastname" size="20" /><br />
<input type="button" onclick="formSubmit()" value="常用的提交按鈕" />
<!--傳統(tǒng)的提交按鈕-->
<input type="submit" name="submit" value="傳統(tǒng)的提交按鈕" />
</form>
</body>
</html>
以上的代碼當(dāng)然是沒有問題的。但是很多開發(fā)者的規(guī)范性不強(qiáng)携悯,往往在按鈕自定義化的時(shí)候直接講submit按鈕就行修改祭芦,
<input type="submit" name="submit" value="傳統(tǒng)的提交按鈕" />
以上真確的按鈕往往被誤改成
<input type="button" name="submit" onclick="formSubmit()" value="錯(cuò)誤修改的按鈕" />
仔細(xì)的朋友已經(jīng)注意到了,在自定義化的時(shí)候只是講type修改成button蚌卤,但是并沒有將name="submit"
清除或修改实束,這樣會致使瀏覽器解析混亂而進(jìn)程阻塞。
報(bào)錯(cuò)
解決方案
【1】 將<input type="button" name="submit" onclick="formSubmit()" value="錯(cuò)誤修改的按鈕" />
的name="submit"
清除逊彭,或者定義成“submit”以外的任何你想要的標(biāo)記咸灿,如name="mysubmit"
<input type="button" name="mysubmit" onclick="formSubmit()" value="已修正的按鈕" />
【2】 使用<button />
按鈕 (推薦方案)
<button name="submit" onclick="formSubmit()" >button提交按鈕</button>
【3】 將<input name="submit" />
提到<form />
表單外(不推薦)
<form id="myForm" action="/i/eg_smile.gif" method="get">
名:<input type="text" name="firstname" size="20"><br />
姓:<input type="text" name="lastname" size="20"><br />
</form>
<input type="button" name="submit" onclick="formSubmit()" value="提交">