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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
取选中的radio的值
Jan 11 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python函数和模块的使用总结
2019/05/20 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
大学军训感言1000字
2014/02/25 职场文书
环保建议书200字
2014/05/14 职场文书
管理人员岗位职责
2015/02/14 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
经典爱情感言
2015/08/03 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书