Question

有什么办法可以拦截html表单的onsubmit事件吗？在我的Web应用程序中，有几个屏幕包含表单等。我们面临的问题是当用户多次按下任何按钮时，服务器会因同样的请求而过载。一些表单已经附加了事件处理程序（如onSubmit，button.onClick等）。一种方法是通过浏览所有屏幕来“注入”我的按钮禁用代码。

但我正在寻找的是一个通用的解决方案，只需包含编写函数的脚本即可应用于所有屏幕。

我知道我可以使用jQuery设置回调（捕获表单的onSubmit），但在这种情况下的问题是，如果任何屏幕已经注册了onSubmit，它可能不会被调用。

在这方面的任何帮助表示赞赏！

Answer 1

我认为这段代码是一个很好的起点。它应该放在单独的文件中并包含在你想要使用它的地方（如果你看起来有全局脚本列表 - 它是一个很好的地方）

var suppressed_items = [];

function allowOnlyOne(item,e){
    if (jQuery.inArray(item, suppressed_items)==-1){
        //hi little item, I haven't saw you before, please go on... but I remember you
        suppressed_items.push(item);
        return true;
    }
    else{
        //Hey, you have been submitted already, stay where you are!
        return false; //or e.preventDefault(), it's a matter of faith :)
    }
}

jQuery(document).ready(function(){ 
    //don't worry, it won't replace your `ready` handlers, but just append new handler
    jQuery("from").submit(function(e){
        return allowOnlyOne(jQuery(this),e);
    });
});

您可以将allowOnlyOne功能用于您想要的任何项目。因此，例如，允许单击所有超链接，在ready处理程序内添加：

jQuery("a").click(e){
    return allowOnlyOne(jQuery(this),e);
}

我希望你能得到基本的想法：捕捉事件，获取触发它的元素的ID，将其与事件一起提供给AllowOnlyOne。

当然你可以将它全部包装成自动执行的闭包以实现封装等等......

Answer 2

如果你已经有jQuery，我建议你使用它...你需要做的就是确保你的表单的onsubmit没有“return false”，否则它可以阻止jQuery的提交。

以下是您需要做的事情：

从表单的onsubmit（如果有）中删除任何 return false 。别担心我们稍后会在jQuery中处理这个问题。

在表单中添加一个类......类似于“disableOnSubmit”。例如：

<form action="something" onsubmit="yourExistingCode" class="disableOnClick">
</form>

OR

<form action="something" onsubmit="yourExistingCode" class="someOtherClass disableOnClick">
</form>

实现类似于：

的代码

<script type="text/javascript">
     $(document).ready(function(){
         $('form.disableOnClick').submit(function(e){
             // preventDefault() does the same as "return false;". It
             // will not submit the form. If you're not using return false
             // and want the form to be submitted remove the line below
             e.preventDefault();

             // Now diable any submit button
             $('input[type=submit], button[type=submit]').attr('disabled, 'disabled');
         });
     });
</script>

拦截形式onSubmit

2 个答案: