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 相关文章推荐
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
javascript填充默认头像方法
Feb 22 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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 xml文件操作实现代码(二)
2009/03/20 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
详解js异步文件加载器
2016/01/24 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
asp 的 分词实现代码
2007/05/24 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
jquery对表单操作2
2011/04/06 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
vue实现文字加密功能
2019/09/27 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python调用.NET库的方法步骤
2019/12/27 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
出纳岗位职责模板
2013/11/27 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
自我鉴定四大框架
2014/01/17 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
思想作风建设心得体会
2014/10/22 职场文书
银行先进个人总结
2015/02/15 职场文书
初中物理教学反思
2016/02/19 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP