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


Posted in Javascript onMay 17, 2016

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

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

问题出现地方:

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

解决了:

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

js部分:

JS和jQuery使用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>
<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方法无法提交表单的原因分析及解决办的相关知识,希望对大家有所帮在,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
纯JS实现简单的日历
Jun 26 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
vuejs点击class变化的实例
Sep 05 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 #Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 #Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 #Javascript
js字符串截取函数slice、substring和substr的比较
May 17 #Javascript
javascript Promise简单学习使用方法小结
May 17 #Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 #Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 #Javascript
You might like
PHP 日期加减的类,很不错
2009/10/10 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
Javascript的一种模块模式
2010/09/08 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
python爬虫 requests-html的使用
2020/11/30 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
2015年小学体育工作总结
2015/05/22 职场文书
运动会100米广播稿
2015/08/19 职场文书
怎么用Python识别手势数字
2021/06/07 Python