Wednesday, January 11, 2012

Disable submit button after user click using jQuery

Recently i have got a requirement to disable  the submit buttons Once it is clicked so that user should not click more than once.

 
                $("input[type='submit']").each(function () {
                    
                        $(this).attr("disabled", "disabled");
                });

Writing above code in button click you can disable all the submit buttons once user click any submit button in the form.  But some browsers  you cannot submit a form if you disable the button on  click event.

Here is the solution which works all the browsers  :



//Disable all the submit buttons when user click on any submit button
function DisableSubmitButtons( clickedButton) {
    $("input[type='submit']").each(function () {
        if (this.name != clickedButton)
            $(this).attr("disabled", "disabled");
        else {
         //hiding the actually clicked button
            $(this).hide();
            //Creating dummy button to same like clicked button
            $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" class="' + $(this).attr('class') + '" />');
        }
    });
}

This code disables all the submit buttons and hide the clicked button and put a new disabled button in it's place.


You can call this function with passing the clicked button Id


Example :Here is the example snipped code to call DisableSubmitButton function in Save button click



$('#btnSave').click(function(){
//I have hard coded to easily understand you can pass dynamically
  DisableSubmitButtons("btnSave");
});

3 comments:

  1. I'm impressed, I must say. Seldom do I encounter a blog that's both equally educative and amusing,
    and let me tell you, you have hit the nail on the head.
    The problem is something that not enough folks are speaking
    intelligently about. Now i'm very happy that I came across this during my hunt for something concerning this.

    Here is my site Bellagenix skin care

    ReplyDelete
  2. Its such as you read my mind! You seem to know so much approximately this, such as you wrote
    the ebook in it or something. I think that you can do with a few p.

    c. to drive the message home a little bit, but instead of that, this is excellent blog.
    An excellent read. I'll certainly be back.

    Feel free to surf to my webpage ... Splendyr Reviews (http://splendyrfacts.com)

    ReplyDelete
  3. I blog quite often and I really thank you for your content.
    This article has really peaked my interest. I will take a note of your blog and keep checking for new details about once a week.
    I subscribed to your Feed as well.

    Feel free to visit my website :: No2 maximus reviews

    ReplyDelete