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返回顶部效果(自写代码)
Jan 06 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php的一些小问题
2010/07/03 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php中Smarty模板初体验
2011/08/08 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python爬虫之遍历单个域名
2019/11/20 Python
python 导入数据及作图的实现
2019/12/03 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
python如何调用php文件中的函数详解
2020/12/29 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
孔子观后感
2015/06/08 职场文书
外科护士长工作总结
2015/08/12 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android