`
zhifeichuan
  • 浏览: 20540 次
  • 性别: Icon_minigender_1
  • 来自: 天津
文章分类
社区版块
存档分类
最新评论

javascript如何监听 form.submit()事件

阅读更多
众所周知,动态表单提交(form.submit())无法触发onsubmit事件。

如果想要想要捕捉到form.submit(),在此提供两种解决方案


第一种:

在form.submit()方法之前加上form.fireEvent("onsubmit");关于fireEvent()方法请参考http://topic.csdn.net/u/20100430/09/eafd10d3-0329-4e34-a30f-8102c724816f.html

form.fireEvent("onsubmit")方法用于触发在form标签上定义的onsubmit="方法名"事件

所以要在表单动态提交时做什么处理只要写在onsubmit=“要做的事情”里即可

下面举个例子,实现功能为在表单提交时屏蔽所有的超链接按钮

js

/************************* 避免表单重复提交 ********************************/

function doSubmit(){

   document.getElementById("form1").fireEvent("onsubmit");

    document.getElmentById("form1").submit();

}

//绑定表单提交事件

function newsubmit() {
$("#form1").bind("submit",function(){listenSubmit();});
}

//表单提交时执行函数

function listenSubmit(){
$("body a").each(function(){
      $(this).attr("disabled","true");
       });

$("body a:hidden").each(function(){
     $(this).attr("disabled","true");
    });

}


jQuery(function($) {
newsubmit();
});


第二种:

提交表单用jquery提供的提交方法

$("#formId").sumit();

用此方法 表单提交 同样可以被监听到


除了此方法为好像还有一种通过prototype来重新定义submit事件但是没试成功

希望高手指教
1
2
分享到:
评论

相关推荐

    JavaScript在form表单中使用button按钮实现submit提交方法

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。 在javaScript中关于submit和button的...

    表单Form的submit事件不响应的解决方法

    虽然用submit方法来提交表单有违Unobtrustive Javascript的原则,但有时候不得不用,比如做搜索提示(auto-complete)选中Item之后就需要用JS来提交搜索表单。 二、问题分析 既然本身不响应事件,那只有手工触发这些...

    表单验证大全

    if ((contain(document.form.NAME.value, "%\(\)>)) || (contain(document.form.MESSAGE.value, "%\(\)>))) { alert("输入了非法字符"); document.form.NAME.focus(); return false; } return true; } //--...

    [Head.First.JavaScript].Michael.Morrison...

    Sure, you can submit a form and maybe do a trick here and there with some crafty HTML and CSS coding, but you’re really just playing Weekend at Bernie’s propping up a lifeless web page. Real live ...

    巧用js提交表单轻松解决一个页面有多个提交按钮

    代码如下: ”javascript” name=”code”>function check(txt){ $j(“form”).submit(function(){ if($txt==”提交”){ this.action=”doAddMessage.action?button=提交”; this.submit(); }else{ this.action=”...

    JS提交form表单实例分析

    本文实例讲述了JS提交form表单。分享给大家供大家参考,具体如下: 一、javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value=...

    【JavaScript源代码】HTML form表单提交方法案例详解.docx

     form表单提交方式总结一下: 一、利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址...

    各种代码大全查询包括网页的等等

    <INPUT CHECKED name=myselect onclick=javascript:this.form.myselectvalue.value=0; type=radio value=0> <SPAN class=f12><FONT color=#0000cc style="FONT-SIZE: 12px">网页</FONT></SPAN> ...

    JavaScript权威指南

    JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...

    javaScript常用事件

    常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit ...

    JavaScript[对象.属性]集锦

    适合JavaScript初学者参考学习 内容包含:SCRIPT 标记 windows对象 frame对象 location对象 document对象 form对象 复选框(checkbox)对象 单选按钮(radio)对象 Button对象 submit和reset对象 password对象 ...

    javascript 自动填写表单的实现方法

    本文没有什么技术上创新,只要会一点Javascript的技术就可以写了。 第一步: 在页面查看源代码,把Form中包含的需要填列的HTML控件找出来如: <...mainfrm.submit.focus(); 第三步: 打开浏览器的“收藏夹”

    自动跳转页代码实现在规定时间跳转

    <form action="javascript:history.go(-1)" method="post" name="form1" id="form1"> <input type="text" name="text1"> 秒后将返回">  </form> <SCRIPT language=javascript> var secs = 8; ...

    JSP避免Form重复提交的三种方案

    1 javascript ,设置一个变量,只允许提交一次。 [removed] var checksubmitflg = false; function checksubmit() { if (checksubmitflg == true) { return false; } checksubmitflg = true; return true; } ...

    Ajax-Spring-MVC-CRUD-form-submit-and-ajax.zip

    Ajax-Spring-MVC-CRUD-form-submit-and-ajax.zip,spring mvc crud应用程序(springmvc、hibernate 4.x、bootstrap 3.x、jquery、mysql),ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json...

    laravel-form-js

    Laravel表单Javascript对象 这是用于使用面向对象方法处理表单的程序包。安装在您的控制台中运行: # Using npm npm install laravel-form-js # Using yarn yarn add laravel-form-js用法使用Vue的示例< template> &...

    hubspot-form-submit

    yarn add hubspot-form-submit 使用npm: npm install --save hubspot-form-submit 用法 随同发送您的HubSpot ID,HubSpot表单ID和表单数据。 表单数据可以是表单元素,FormData对象,也可以只是常规对象。 使用...

    JavaScript详解(第2版)

     15.9.4 Microsoft Internet Explorer中的事件监听器   15.9.5 回顾事件属性   15.10 不唐突的JavaScript   15.11 应知应会   练习   第16章 cookie   16.1 什么是cookie   16.1.1 cookie的...

    javascript 键盘事件总结 推荐

    不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit。 键盘事件 键盘事件 [Ctrl+A 全选 ...

    js调用Action

    function formSubmit(url) { document.forms[0].action=url; document.forms[0].submit(); } </script> 查询" onclick= "formSubmit('actionName.action?paraName=arg0') "/> 同样,paraName是需要在action...

Global site tag (gtag.js) - Google Analytics