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 相关文章推荐
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
jquery validate demo 基础
Oct 29 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python入门篇之字典
2014/10/17 Python
Python实现识别手写数字大纲
2018/01/29 Python
python实现汽车管理系统
2018/11/30 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
外贸业务员求职自荐信分享
2013/09/21 职场文书
信息管理应届生求职信
2014/03/07 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
大学生逃课检讨书
2015/05/04 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
四年级语文教学反思
2016/03/03 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript