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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
Javascript的比较汇总
Jul 25 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 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
德生PL660的电路分析和打磨
2021/03/02 无线电
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python使用Tesseract库识别验证
2018/03/21 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
节约用水标语
2014/06/11 职场文书
检讨书模板大全
2015/05/07 职场文书
甲午大海战观后感
2015/06/02 职场文书
四风之害观后感
2015/06/09 职场文书
结婚主持人致辞
2015/07/28 职场文书
大学生党课心得体会
2016/01/07 职场文书
八年级历史教学反思
2016/02/19 职场文书