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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
关于vue中 $emit的用法详解
Apr 12 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
video.js添加自定义组件的方法
Dec 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
react-native fetch的具体使用方法
2017/11/01 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python Socket传输文件示例
2017/01/16 Python
python3实现多线程聊天室
2018/12/12 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python实现飞船大战
2020/04/24 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
院药学专业个人求职信
2013/09/21 职场文书
护理职业应聘自荐书
2013/09/29 职场文书
自我鉴定200字
2013/10/28 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
初一体育教学反思
2014/01/29 职场文书
运动会开幕式解说词
2014/02/05 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
python中如何对多变量连续赋值
2021/06/03 Python