今天在做项目的过程中用到了submit()提交表单。
折腾许久很是郁闷，经过多方资料查询和亲测后，得出结论：
一定要慎用submit()方法
首先，在form表单中一定不要将input中的name或id命名为submit，否则会导致在submit()的失效，例如以下脚本在所有浏览器（IE/FF/CHROME/SAFARI）中都会失效：
<!DOCTYPE html><html><head><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//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
<?//脚本1if(!empty($_POST))print_r($_POST);?><!DOCTYPE html><html><head><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//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
<?//脚本2if(!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
共同学习，写下你的评论
评论加载中...
作者其他优质文章
