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闭包
Dec 14 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
浅谈js闭包理解
Apr 01 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 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
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python基础之函数用法实例详解
2014/09/10 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python占位符输入方式实例
2019/05/27 Python
详解python中的异常捕获
2020/12/15 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
java程序员面试交流
2012/11/29 面试题
综艺节目策划方案
2014/06/13 职场文书
新学期开学标语
2014/06/30 职场文书
医学检验专业自荐信
2014/09/18 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
初中作文评语
2014/12/25 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
电视新闻稿
2015/07/17 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis