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编程起步(第三课)
Feb 27 Javascript
javascript Keycode对照表
Oct 24 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
js实现时分秒倒计时
Dec 03 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
浅谈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+javascript的日历控件
2009/11/19 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php简单日历函数
2015/10/28 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
军校本科大学生自我评价
2014/01/14 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
自荐信怎么写
2015/03/04 职场文书
防汛通知
2015/04/25 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript