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按钮上绑定提交事件:

即:

代码如下:

<input type="submit" name="btn" value="btn" onclick="test()" />

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

  w3c： 提交一次   

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

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

如果按钮为button，则检测通过后在触发submit事件

一定不要用js提交表单，然后又用onsubmit去检测

单纯的用js提交表单, alert, ff下阻塞表单的提交，而其他浏览

以上所述是小编给大家介绍的JS和jQuery使用submit方法无法提交表单的原因分析及解决办的相关知识，希望对大家有所帮在，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

  • Javascript的表单验证-提交表单

    推荐阅读:Javascript的表单验证长度 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" name

  • JavaScript阻止回车提交表单的方法

    大家对回车键的功能应该比较熟悉,比如在windows系统的很多应用程序中,只要点击回车键就可以进入此程序或者开启某项功能,不过有时候我们希望阻止它的功能,例如在填写表单的时候,可能不小心点击回车键造成表单误提交,下面就来简单介绍一下如何实现此功能.代码实例如下: 如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了. <!DOCTYPE html&g

  • JavaScript禁止用户多次提交的两种方法

    [当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大.所以我们需要进行限制] [1]将提交按钮禁止 <html> <head> <script> //禁止默认行为 因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能 function preventDef(event){ event=event||window.event; if(event.preventDefault){ return even

  • js表单提交和submit提交的区别实例分析

    本文实例分析了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> <

  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

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

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

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题 都是因为 表单中 有 name 或者 id 这些命名跟submit 有冲突,但是检查了几次,始终没有发现 名字冲突,所以这个可能性被排除. 平常自己做触发按钮,基本不用a 标签,但是昨天不知道什么 问题,竟然用了 a 而且还给了 href 为空,由于这个a 的class 有多个

  • js和jq使用submit方法无法提交表单的快速解决方法

    js和jq使用submit方法无法提交表单的快速解决方法

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题 都是因为 表单中 有 name 或者 id 这些命名跟submit 有冲突,但是检查了几次,始终没有发现 名字冲突,所以这个可能性被排除. 平常自己做触发按钮,基本不用a 标签,但是昨天不知道什么 问题,竟然用了 a 而且还给了 href 为空,由于这个a 的class 有多个

  • jquery中使用$(#form).submit()重写提交表单无效原因分析及解决

    问题:最近使用 jqeury 的 validationEngine 做ajax校验,当表单中的最后一个字段需要做ajax验证时,此时在字段输入完毕后点击回车提交表单时不起作用,必须再按一次/点击submit按钮. 分析:通过个跟踪其源代码,最终发现ajax验证成功后也再次submit了表单,但还是不能真正提交表单. 原因:很诡异,因为我的提交表单按钮名字是submit.改掉就好了. 复制代码 代码如下: <input id="submit" type="submit&q

  • form.submit()不能提交表单的原因分析

    直接上代码把: 复制代码 代码如下: <div id="register"> <h4>会员注册</h4> <div class="formdiv"> <form method="post" action="register.php?action=register" name="register" id="registerForm"&g

  • 利用JS屏蔽页面中的Enter按键提交表单的方法

    如在设置了JS代码响应<p>标签的Enter按键触发事件时,根据冒泡型事件原则该事件会一直传到<from>表单处,并将表单提交.这不是我们想要的效果,我们可以设置如下代码来加以屏蔽: $(document).keydown(function(event){ switch(event.keyCode){ case 13:return false; } }); 但是,如果页面中有按钮时在Opera浏览器中同样会提交表单,这是因为按钮在生成的HTML代码中是submit类型的,解决办法是

  • Ajax提交表单页面刷新很快的解决方法

    注:使用ajax 提交表单时 type类型最好不用submit 用button合适 <form> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <input type="button" class="btn btn-info" value="重置" onclick="return resetaa()">

  • JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法

    背景:想通过Esc键关闭展示中的Dialog对话框,发现有些对话框可以,有些会失效. 原因分析: 1.对话框上可以输入内容的标签元素可以,反之不行. 2.如果鼠标点击对话框后,也可以Esc键关闭. 可以看出对话框上是需要聚焦就可以了. 解决方案: 方案一: focus:function(){ $("#id").focus(); } 方案二: 延迟聚焦 setTimeout(function() { $("#id").focus(); }, 500); 以上所述是小编

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

  • jquery+ajax验证不通过也提交表单问题处理

    validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 复制代码 代码如下: //验证不通过时return      if(!$("form#ajaxForm").val

  • jQuery通过ajax快速批量提交表单数据

    当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据. 请看下面的表单: <form id="fm"> <table> <tr> <td>姓名</td> <td> <input type="text" name="name" /> </td> </tr>

随机推荐