form表单的submit()和onsubmit()的区别
submit()和onsubmit()的区别
最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,
在提交前触发这个button的onclick事件,在其事件中触发form的submit事件。问题出现了:
以下是出现相关代码:
- <form action="http://www.baidu.com/s?wd=this.form.submit%28%29%3B&cl=3" method="post" name="form1" οnsubmit="return alert('已提交!'); return false;">
- <table align="center" width="420px" cellPadding="2" cellSpacing="1" bgcolor="#A4B6D7" style="word-wrap:Break-word;">
- <tr style="cursor: hand;background:#d7e3f6" >
- <td width="20%" align="right">条型码</td>
- <td><input style="width:90%" type="text" name="GOODSNUM" size="30" maxlength="8" ></td>
- </tr>
- <tr>
- <td align="center" colspan="2">
- <input type="button" name="save" value="保存" οnclick="if((confirm('确定要提交吗?'))) this.form.submit();"/>
- </td>
- </tr>
- </table>
- </form>
却发现并没有触发form的onsubmit事件,而是直接提交了。奇怪了,难道没有这种方式无法结合form的onsubmit方法吗?
仔细想了想,既然this.form表示form这个对象,那么肯定能获取到form的属性和方法的
,就改成 this.form.onsubmit(); 成功!
我又查了查手册,原来submit的方法是这样解释的:
The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.
意思是说submit这个方法是不触发onsubmit时间的,如果想要触发它,需要调用
fireEvent方法。尝试一下:this.form.fireEvent('onsubmit');哈哈,果然也成功!不过这样不是多此一举吗?呵呵!
就这个小问题也搞了我将近一个小时,不过为了以后不为这个问题烦恼,这也是值得的。
this.form.submit(); //直接提交表单,但是不调用form的onsubmit事件
this.form.onsubmit(); //调用form的onsubmit事件
PS:又学到了fireEvent这个方法,
2.onsubmit()与submit() :
<html>
<script>
function fun()
{
alert("form_submit");
}
</script>
<form οnsubmit="fun()">
<input type="submit" id="aaa" value="submit"> <!--能弹出form_submit-->
<input type="button" id="bbb" value="onCliCk_submit" οnclick="document.forms[0].submit()">
<!--
表单会提交,但是不会运行fun() 原因是 onsubmit事件不能通过此种方式触发(在IE环境)
直接用脚本doCumetn.formName.submit()提交表单是不会触发表单的onsubmit()事件的
-->
<input type="button" id="bb1" value="onCliCk_onsubmit" οnclick="document.forms[0].onsubmit()"><!--会触发fun()参数,能弹出form_submit-->
</form>
</html>
</form>
form表单的submit()和onsubmit()的区别相关推荐
- form表单验证时的onsubmit事件
form标签提交时,会触发onsubmit事件.onsubmit会在提交之前发生,所以验证可以写在onsubmit中. <!DOCTYPE html> <html> <h ...
- javascript中FORM表单的submit()方法经验教训.
@author songfeng 因为JS内对象的方法实际上是存储语句的一个类似于指针的东西. 其指向了内存的一个位置, 也就是其函数的位置,当然也可以让其指向一个变量值 ...
- form表单,submit,ajax提交
尼玛... 一个简单的表单提交,竟然给我整的直郁闷. 本来就是个保存功能,几个前人都用的ajax提交,我也就没改成submit.然后坑爹的就来了. 我在表单里写了个<form></f ...
- form表单的action和onsubmit事件说明
首先 action在form是属性,onsubmit是事件. <form action="table1.jsp" onSubmit="return check(); ...
- 提交form表单方法
ajax提交form表单,这在日常项目中是经常用到的.前台无论是简单的html.jsp或者使用了easyui框架,只要是提交表单一般都会使用到ajax. ajax提交表单分为两种: 1.无返回结果的, ...
- form表单提交三种方式,demo实例详解
第一种:使用type=submit 可以直接提交 <html><head><title>submit直接提交</title></head>& ...
- 《uni-app》表单组件-form表单
本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组件-form表单 ...
- 微信小程序form表单Cannot read property ‘detail‘ of undefined原因之一
我利用form表单打算提交两个input框的内容,并在form的提交函数loginContainer里将input值赋给两个变量,如下图所示,在点击form button后出现了detail unde ...
- form表单提交FormData数据
代码见https://gitee.com/bladeandmaster/freemarkerDemo 1.第一种直接使用form表单的submit提交 2.第二种采用ajax提交,需要设置conten ...
最新文章
- Cocos事件监听(JS)
- vivox3android系统,vivo X3手机系统是什么 vivo X3手机能升级安卓4.3
- mongodb复制集部署
- react打包后图片丢失_React中型项目的优化实践
- 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联等)
- Helixoft VSdocman 是一个集成于Visual Studio并提供了命令行版本的帮助文档编译工具...
- 朋友圈发图多大不会被压缩_类风湿会不会引发肾病?会!本文告诉你对内脏的伤害有多大...
- 08. 旋转数组的最小数字(C++版本)
- handlersocket mysql,MySQL插件HandlerSocket
- 尚硅谷ssm整合实战项目笔记
- HEVC(H.265)与AVC(H.264)的区别与联系
- 浏览器提示网站链接不安全,证书过期了
- java实现文件分割_java 实现文件分割
- linux网络编程面试题
- python基础训练—字符串
- 寒武纪MLU270 平台 CNStream 学习记录
- Java String类源码阅读笔记
- Spark的性能优化案例分析(下)
- php撮合引擎,C++ Match Engine撮合引擎 安装搭建(ubuntu)
- MAC10.15登录EasyConnect失败报“版本太低,请更新到最新版”