今天在做項目的過程中用到了submit()提交表單。
折騰許久很是鬱悶，經過多方資料查詢和親測後，得出結論：
一定要慎用submit()方法
首先，在form表單中一定不要將input中的name或id命名爲submit，否則會導致在submit()的失效，例如以下腳本在所有瀏覽器（IE/FF/CHROME/SAFARI）中都會失效：
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<title>Page Title</title>
</head>
<body>
<form id="myform" method="post" action="chromeTest.php">
<input name="test" value="test">
<input type="submit" name="submit" value="Edit">
</form>
<script>
$(function(){
form = $('#myform');
$('#myform input[type="submit"]').on("click",function(e){
e.preventDefault()
form.submit();
})
})
</script>
</body>
</html>jquery的官方文檔的additional notes中也提到了這一點
https://api.jquery.com/submit/
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as
submit,length, ormethod. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.
----------------------
其次，我們要注意到通過form.submit()提交的表單，相對於正常提交表單會遺漏一些信息。
測試以下兩個腳本：
腳本1
<?
//腳本1
if(!empty($_POST))
print_r($_POST);
?>
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<title>Page Title</title>
</head>
<body>
<form id="myform" method="post" action="chromeTest.php">
<input type="text" name="text1" value="test">
<input type="password" name="password1" value="test">
<input type="radio" name="radio1" value="test">
<input type="checkbox" name="checkbox1" value="test">
<input type="button" name="button1" value="test">
<input type="submit" name="submit1" value="Edit">
<input type="reset" name="reset1" value="Reset">
</form>
<script>
$(function(){
form = $('#myform');
$('#myform input[type="submit"]').on("click",function(e){
e.preventDefault()
form.submit();
})
})
</script>
</body>
</html>輸出結果爲：
Array ( [text1] => test [password1] => school [radio1] => test [checkbox1] => test )
腳本2
<? //腳本2 if(!empty($_POST)) print_r($_POST); ?> <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <form id="myform" method="post" action="chromeTest.php"> <input type="text" name="text1" value="test"> <input type="password" name="password1" value="test"> <input type="radio" name="radio1" value="test"> <input type="checkbox" name="checkbox1" value="test"> <input type="button" name="button1" value="test"> <input type="submit" name="submit1" value="Edit"> <input type="reset" name="reset1" value="Reset"> </form> </body> </html>
輸出結果爲：
Array ( [test1] => test [password1] => school [radio1] => test [checkbox1] => test [submit1] => Edit )
比較結果：
type爲"text"、"password"、"radio"、"checkbox"的input在兩種方法中都會正常傳遞
type爲"button"、"reset"的input在兩種方法中都不會傳遞
type爲"submit"的input在正常的表單提交中會傳遞，而在submit()中會丟失
解決方法：
在submit()前，添加"submit"的值
<input type="hidden" name="submit1" value="Edit">
2.換用以下方法，親測可用
form.submit(function(){
submit = true
//你的業務邏輯
if(!submit) return false
})---------------
要說明一點：
網上有部分聲音說webkit瀏覽器（例如chrome）不支持submit()方法，根據我親身測試新版本的chrome/safari是支持的，可能某些遠古版本不支持吧。
最後附上測試所用的瀏覽器版本：
Chrome： 50.0.2661.102 m
Firfox： 48.0a2
IE：11.0.9600
Safari：windows上的5.1.7 及IOS9.3.1上的Safari