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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
JS 强制设为首页的代码
Jan 31 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
读懂CommonJS的模块加载
Apr 19 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
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
今天,小程序正式支持 SVG
2019/04/20 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
详解vue 组件注册
2020/11/20 Vue.js
浅析vue中的nextTick
2020/12/28 Vue.js
Python爬取读者并制作成PDF
2015/03/10 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Python模块相关知识点小结
2020/03/09 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python实现简单文件读写函数
2021/02/25 Python
如何查找网页漏洞
2016/06/22 面试题
质检的岗位职责
2013/11/17 职场文书
投资意向书
2014/07/30 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
研究生个人学年总结
2015/02/14 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
MYSQL如何查看操作日志详解
2022/05/30 MySQL