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 15 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
读懂CommonJS的模块加载
Apr 19 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php广告加载类用法实例
2014/09/23 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
微信小程序自定义胶囊样式
2020/12/27 Javascript
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python实现多人聊天室
2020/03/31 Python
python设置环境变量的原因和方法
2019/06/24 Python
python datetime中strptime用法详解
2019/08/29 Python
python 实现线程之间的通信示例
2020/02/14 Python
keras打印loss对权重的导数方式
2020/06/10 Python
如何理解python对象
2020/06/21 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
导游的职业规划书范文
2013/12/27 职场文书
陈欧广告词
2014/03/14 职场文书
产品销售计划书
2014/05/04 职场文书
运动会100米广播稿
2015/08/19 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL