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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 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
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python中实现php的var_dump函数功能
2015/01/21 Python
python计算文本文件行数的方法
2015/07/06 Python
python实现红包裂变算法
2016/02/16 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python实现人像动漫化的示例代码
2020/05/17 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
八年级物理教学反思
2014/01/19 职场文书
通信研究生自荐信
2014/02/01 职场文书
护士个人自我鉴定
2014/03/24 职场文书
植树节活动总结
2014/04/30 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
网络营销计划
2015/01/17 职场文书
社团个人总结范文
2015/03/05 职场文书
初中班长竞选稿
2015/11/20 职场文书
Win11查看设备管理器
2022/04/19 数码科技