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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
详解VUE调用本地json的使用方法
May 15 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微信开发之音乐回复功能
2018/06/14 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
Javascript----文件操作
2007/01/18 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Vue中使用vux配置代码详解
2018/09/16 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
python日志记录模块实例及改进
2017/02/12 Python
Python实现的购物车功能示例
2018/02/11 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
班主任工作年限证明
2014/01/12 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
股东大会通知
2015/04/24 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
vue+iview实现手机号分段输入框
2022/03/25 Vue.js