今天在做项目的过程中用到了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
, or method
. 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是支持的,可能某些远古版本不支持吧。
最后附上测试所用的浏览器版本:
Firfox: 48.0a2
IE:11.0.9600
Safari:windows上的5.1.7 及IOS9.3.1上的Safari
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。