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高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
如何用RxJS实现Redux Form
Dec 29 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
微信小程序 slot踩坑的解决
Apr 01 Javascript
返回上一个url并刷新界面的js代码
Sep 12 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在字符断点处截断文字的实现代码
2011/04/21 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
php动态生成函数示例
2014/03/21 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
setTimeout学习小结
2017/02/08 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
Python中的super用法详解
2015/05/28 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
个人自荐书
2013/12/20 职场文书
业务员自荐信范文
2014/04/20 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
《检阅》教学反思
2016/02/22 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js