js表单提交和submit提交的区别实例分析


Posted in Javascript onDecember 10, 2015

本文实例分析了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下阻塞表单的提交,而其他浏览

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
vue mounted组件的使用
Jun 18 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 #Javascript
JS提交form表单实例分析
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 #Javascript
AngularJs实现ng1.3+表单验证
Dec 10 #Javascript
理解AngularJs指令
Dec 10 #Javascript
详解AngularJS实现表单验证
Dec 10 #Javascript
You might like
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
解决laravel session失效的问题
2019/10/14 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
大学生如何写自荐信
2014/01/08 职场文书
化妆品店促销方案
2014/02/24 职场文书
买房协议书范本
2014/10/23 职场文书
保洁员岗位职责
2015/02/04 职场文书
投标单位介绍信
2015/05/05 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Python 匹配文本并在其上一行追加文本
2022/05/11 Python