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 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
JavaScript Promise启示录
Aug 12 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
js实现汉字排序的方法
Jul 23 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 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
创建无限极分类树型结构的简单方法
2017/06/20 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python argparser的具体使用
2019/11/10 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
小学生自我鉴定
2013/10/12 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
担保书怎么写
2014/04/01 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技