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中null与undefined分析
Jul 25 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
Three.js基础学习教程
Nov 16 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
php文件上传的简单实例
2013/10/19 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
详解vue路由
2020/08/05 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python实现基于POS算法的区块链
2018/08/07 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python实现画图工具
2020/08/27 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
护士自我鉴定
2013/10/23 职场文书
2014年纪委工作总结
2014/12/05 职场文书
平安建设汇报材料
2014/12/29 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL