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(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
video.js添加自定义组件的方法
Dec 09 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网站被挂木马后的修复方法总结
2014/11/06 PHP
php格式化日期实例分析
2014/11/12 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
javascript 动态创建表格
2015/01/08 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
QML使用Python的函数过程解析
2019/09/26 Python
python 实现二维列表转置
2019/12/02 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
2014年秋季新学期寄语
2014/08/02 职场文书
公务员考察材料范文
2014/12/23 职场文书
家长评语怎么写
2014/12/30 职场文书
督导岗位职责范本
2015/04/10 职场文书
正规欠条模板
2015/07/03 职场文书