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 相关文章推荐
关于session和cookie的简单理解
Jun 08 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
浅谈PHP进程管理
2019/03/08 PHP
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
python3实现多线程聊天室
2018/12/12 Python
详解python的argpare和click模块小结
2019/03/31 Python
python集合是否可变总结
2019/06/20 Python
简单了解python变量的作用域
2019/07/30 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
致200米运动员广播稿
2014/02/06 职场文书
运动会广播稿100字
2014/09/14 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
客户经理岗位职责
2015/01/31 职场文书
开平碉楼导游词
2015/02/06 职场文书
建立共青团委员会的请示
2019/04/02 职场文书