JS和jQuery使用submit方法无法提交表单的原因分析及解决办法

175 阅读 0 评论 116 点赞

我是靠谱客的博主糟糕月亮，最近开发中收集的这篇文章主要介绍JS和jQuery使用submit方法无法提交表单的原因分析及解决办法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

昨天，在做一个表单异步提交内容的时候，遇到很奇怪的问题，submit()方法无法进行提交，每次提交都是把当前给刷新了，网络抓包发现，每次都是 get方式去获取当前页面，完全没有post 请求，想着以前遇上这样的问题都是因为表单中有 name 或者 id 这些命名跟submit 有冲突，但是检查了几次，始终没有发现名字冲突，所以这个可能性被排除。

平常自己做触发按钮，基本不用a 标签，但是昨天不知道什么问题，竟然用了 a 而且还给了 href 为空，由于这个a 的class 有多个内容，所以检查时候根本就没有去看href 没有写内容。所以，每次进行click 操作的时候都会触发到 href="" 这个操作，这个操作就重新打开当前页面，所以导致 submit无法起到作用。解决方法：就是给href 加javascript：;或者javascript：void(0);

问题出现地方：

解决了：

js部分：

补充：js表单提交和submit提交的区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script>

function test()
{
  document.getElementById("myform").submit();  
  alert(11);
}
</script>
<form name="myfrom" id="myform" method="get" action="b.php">
<input type="text" name="pwd" value="" />
<input type="submit" name="sub" value="111" />
<input type="button" name="btn" value="btn" onclick="test()" />
</form>
</body>
</html>

注意：get方式提交表单时 action里面不能用url传值, post则可以这样传

js提交和submit按钮提交的区别:

1. js提交表单时不会带上 submit 按钮的值(因为没有被单击) 所有浏览器

2. input 回车提交 w3c浏览器会带上submit按钮的值，ie6则不会带

解决办法：增加一个hidden域,用这个来判断，无论用哪种方式提交都会有值

submit按钮上绑定提交事件:

即:

复制代码代码如下:

都会带上submit的值, 用js提交都检测不到onsubmit状态

w3c：提交一次

ie6: 分两次提交，先js在form提交

解决办法：如果按钮为submit则检测时用onsubmit事件检测