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触发器详解
Mar 10 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
layui table设置某一行的字体颜色方法
Sep 05 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
Add a Table to a Word Document
2007/06/15 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Pycharm修改python路径过程图解
2020/05/22 Python
如何使用Python调整图像大小
2020/09/26 Python
办公室文秘自我评价
2013/09/21 职场文书
教育系毕业生中文求职信范文
2013/10/06 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
便利店促销方案
2014/02/20 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
文艺节目主持词
2015/07/06 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫