慎用jQuery中的submit()方法

今天在做项目的过程中用到了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
)

比较结果:

  1. type为"text"、"password"、"radio"、"checkbox"的input在两种方法中都会正常传递
  2. type为"button"、"reset"的input在两种方法中都不会传递
  3. type为"submit"的input在正常的表单提交中会传递,而在submit()中会丢失

解决方法:

  1. 在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

时间: 2024-10-19 12:21:29

慎用jQuery中的submit()方法的相关文章

jQuery中的$.grep()方法的使用

jQuery中的$.grep()方法的使用 转载▼ grep()方法用于数组元素过滤筛选 grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值.此函数应返回一个布尔值.另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值.如“a > 0”代表“

重新认识Jquery中的html()方法

今天测试给我提了一个bug:在页面上我需要借助"</td>"来获取表格中某行内的某列以后的单元格,也就是说里面有这样一行代码:"tr = tr.substring(tr.indexOf("</td>"));",这个JavaScript脚本在谷歌等浏览器中均可以达到预期效果,可是在IE8中就不行了,弄了一个多小时最后终于发现了问题,先看如下代码: <html> <head> <title>

jQuery 中的 unbind() 方法

jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: [javascript] view plain copy unbind([type][, data]); type是事件类型,data为将要移除的事件.具体说明如下: 1.如果没有参数,则删除所有的绑定事件: 2.如果提供了事件类型(type)作为参数,则只删除该类型的绑定事件: 3.如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数被删除.

jQuery中的join方法

和JS 中的JOIN 方法一样,将一数组按照JOIN的参数连接起来.比如: var arr = [ "a", "b", "c", "d", "e" ]; document.write(arr.join("-")); 结果:a-b-c-d-e. var members=["John","Steve","Ben","Dam

$.ajax()方法详解 jquery中的ajax方法

jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async: 要求为Boolean类型的参数,默

关于jQuery中的submit()函数

关于jQuery中的submit()函数(绑定event handler or 触发event?) 今天在敲代码的时候无意间碰到了一个比较绕的问题(一个小师弟问的问题),思前想后都不明白,上午百度.谷歌了半天,再加上读了下英文api才算明白开来.现在记下来,给大家做个提醒.废话不多说,代码如下: 1 $('#myFormId').submit(function() { 2 // submit the form 3 $(this).ajaxSubmit(); 4 // return false,这

jquery中的$.post()方法无法给变全局变量的问题

今天遇到一个问题,在使用jquery的$.post()方法时,没有办法返回布尔值. function check_exist() { var email = $('#email').val().Trim(); url = "/Account/Exist"; $.post(url, { email: email }, function (result) { if (result == "1") { $('#email_error').html("该邮箱已经被

jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

jQuery中animate()的方法可以去w3school查看,这里主要说一下: $("body").animate({"scrollTop":top}) 不被Firefox支持问题的解决. 其实是使用body的: $("body").animate({"scrollTop":top}) 只被chrome支持,而不被Firefox支持. 而使用html的: $("html").animate({"

解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy”错的方法

解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy”错的方法 今天在看<jquery基础教程(第三版)>第十章的时候,运行随书下载的源码时总是不成功.起初以为书中自带的JS文件有错呢,但是测来测去也没发现哪里有问题.现在把源码附下: 1.这是书中带的HTML文件,其余的忽略不计,关键的就是下面这个a. <a id=&qu