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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
js表单验证实例讲解
Mar 31 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
js实现搜索提示框效果
Sep 05 Javascript
JavaScript的Set数据结构详解
Feb 18 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实现memcache缓存示例讲解
2013/12/04 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
js中判断控件是否存在
2010/08/25 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
python文件写入实例分析
2015/04/08 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
python读取Kafka实例
2019/12/23 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
了解一下python内建模块collections
2020/09/07 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
《乡愁》教学反思
2014/02/18 职场文书
活动总结报告格式
2014/05/09 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
高二英语教学反思
2016/03/03 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Python各协议下socket黏包问题原理
2022/04/12 Python