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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
JS实现吸顶特效
Jan 08 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 前一天或后一天的日期
2008/06/28 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
简单理解Python中的装饰器
2015/07/31 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python中常用的数据结构介绍
2021/01/12 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
小学教师事迹材料
2014/01/13 职场文书
纠风工作实施方案
2014/03/15 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
离婚案件上诉状
2015/05/23 职场文书
开业典礼致辞
2015/07/29 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
MySQL数据库 安全管理
2022/05/06 MySQL
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技