Disable submit button after click to prevent users from sending multiple requests to server

Question

I want to prevent users from clicking on a server button multiple times causing multiple similar requests to be sent to the server.

Buttons are ASP.Net buttons (Webforms). There are many pages on the website and I don't want to write some codes for every button. I want to do it on the Masterpage for all buttons.

A possible solution would be finding the button and disabling it after it has been clicked. like:

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

This code works fine but overrides the previous onclick event of the button. So the button doesn't do the submission or any other tasks that it wants to do.

Another solution is disabling all submit buttons on "onbeforesubmit" event. They will be enabled right after the postback. This is also not a good solution because there are some buttons that update part of the page by Ajax and they can not re-enable other buttons beyond the ajax panel after the postback.

Is there a way to find the clicked submit button and disable it and allow it to do it's onclick event?

Bahman · Accepted Answer · 2014-04-04 03:58:48Z

I found the answer. Because I use asp.net server buttons, Page won't be submitted if I disable the button in client side onclick event. Instead I disable the button in the second click. In this case I can be sure that page has been submitted one time:

        $("input[type='submit']").click(function (e) {
            if (e.target && Page_IsValid) {
                var attr = $(this).attr('submitting');
                if (typeof attr !== 'undefined' && attr !== false) { // If button has submitting attribute then do not submit it again.
                    $(this).prop('disabled', true);
                    $(this).removeAttr("submitting");
                    e.preventDefault();
                }
                else {
                    $(this).attr("submitting", "true"); // Add "submitting" attribute to prevent multiple submissions.
                }
            }
        });

Felix · Accepted Answer · 2014-04-02 10:21:42Z

1

Try to use .one():

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

$("input[type='submit']").one('click',function(){
    $(this).prop('disabled',true);   
});

Also, you should use .prop() instead of .attr() to set the state of your input

answered Apr 2, 2014 at 10:21

Felix

38.2k8 gold badges45 silver badges56 bronze badges

3 Comments

kpull1 Over a year ago

In jQuery 1.9+ versions use .prop() instead of .attr()

Bahman Over a year ago

Thanks for your very fast answer. I tried this before and it was not working on some of the pages. I was not able to find the reason but it caused very strange issues in some pages which use AJAX. I will try to use it again and get beck to you if it worked. thanks.

Bahman Over a year ago

This code doesn't work because it still overrides the submit buttons' onclick. By using this my submit buttons (asp.net server buttons) don't do anything, they will be disabled after the click.

KevinCocquyt39 · Accepted Answer · 2019-06-17 09:44:40Z

0

Or what about this?

$("body").on("click", ".js-submit-button", function() {
        var $this = $(this);
        $this.prop("disabled", true);
        $this.closest("form").submit();
    });

answered Jun 17, 2019 at 9:44

KevinCocquyt39

13 bronze badges

Collectives™ on Stack Overflow

Disable submit button after click to prevent users from sending multiple requests to server

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related