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的eval()中使用函数的进一步讨论
Jul 26 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
OpenLayers3实现测量功能
Sep 25 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
mayfish 数据入库验证代码
2010/04/30 PHP
php debug 安装技巧
2011/04/30 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python 解压pkl文件的方法
2018/10/25 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
大客户销售经理职责
2013/12/04 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
办公室主任个人总结
2015/02/28 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers