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 相关文章推荐
js中的异常处理try...catch使用介绍
Sep 21 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
微信小程序实现下拉加载更多商品
Dec 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
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
node内置调试方法总结
2018/02/22 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python生成验证码实例
2014/08/21 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
Python requests模块session代码实例
2020/04/14 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
新闻专业应届生求职信
2013/10/31 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
区域总监的岗位职责
2013/11/21 职场文书
预备党员政审材料
2014/02/04 职场文书
公司外出活动方案
2014/08/14 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android