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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
ThinkPHP安装和设置
2015/07/27 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
深入理解vue中的$set
2017/06/01 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
vue-swiper的使用教程
2018/08/30 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
解析Python中while true的使用
2015/10/13 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
某某同志考察材料
2014/05/28 职场文书
大学活动总结模板
2014/07/10 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书