CODEWITHSUNDEEP
javascripthtml
user1068991
user1068991

Reputation: 55

Intercept form onSubmit

Is there any way we can intercept the html form's onsubmit event? In my web application, there are several screens containing forms etc. The issue we are facing is when the user presses any button multiple times, the server gets overloaded with same requests. Some of the forms have event handlers already attached to them(like onSubmit, button.onClick etc). One way can be to "inject" my button disable code by going through all the screens.

But what I am looking for is a generic solution which can be applied to all the screens by just including the script where the function is written.

I know I can setup callback using jQuery (capturing onSubmit for form), but in the issue in this case is if any screen has a onSubmit registered already, it may not get called.

Any help in this regard appreciated!

Upvotes: 3

Views: 3636

Answers (2)

J0HN
J0HN

Reputation: 26941

I think this piece of code is a good place to start. It should be placed in separate file and included where you want to use it (if you appear to have global list of scripts - its a good place for it)

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);
    });
});

You can use the allowOnlyOne function with any item you wish. So, for example to allow single click on all hyperlinks, inside that ready handler add:

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

I hope you get the basic idea: catch the event, get the ID of the element that trigger it, fed it to AllowOnlyOne along with event.

Of course you can wrap it all around into self-executing closure to achieve incapsulation and so on...

Upvotes: 2

iDev247
iDev247

Reputation: 1901

If you already have jQuery I suggest you use it... All you need to do is make sure is that your form's onsubmit do not have a "return false" or else it can block jQuery's on submit.

Here's what you need to do:

  1. Remove any return false from your form's onsubmit (if any). Don't worry we'll take care of this later in jQuery.

  2. Add a class to your forms... something like "disableOnSubmit". Example:

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

    OR

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

  3. Implement a code similar to:

    <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>

Upvotes: 1

Related Questions