Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the best approach for (client-side) disabling of a submit button?

Details:

  • Only disable after user clicks the submit button, but before the posting back to the server
  • ASP.NET Webforms (.NET 1.1)
  • Prefer jQuery (if any library at all)
  • Must be enabled if form reloads (i.e. credit card failed)

This isn't a necessity that I do this, but if there is a simple way to do it without having to change too much, I'll do it. (i.e. if there isn't a simple solution, I probably won't do it, so don't worry about digging too deep)

like image 661
Macho Matt Avatar asked Sep 05 '08 15:09

Macho Matt


People also ask

Which method is used to disable a button?

In UI Dialog box, button as default class called ui-button so focus on it. Create a function that should trigger dialog box in ready that is on page load. Then use jQuery method prop('disabled', true) to disable that button with class ui-button.

How do I disable the submit button?

Enable / Disable submit button 1.1 To disable a submit button, you just need to add a disabled attribute to the submit button. $("#btnSubmit"). attr("disabled", true); 1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.

How do you disable submit button until form is filled?

How do you disable button until all fields are entered? Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty.


2 Answers

I'm guessing that you don't want them to hit the submit button more than once while the submit is processing.

My approach has been to just hide the button entirely and display some sort of status indicator (animated gif, etc) instead.

Here's a very contrived example (it's technically in prototype but I think a jquery version would be very similar):

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>
like image 159
Mark Biek Avatar answered Oct 07 '22 13:10

Mark Biek


For all submit buttons, via JQuery, it'd be:

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

Or it might be more useful to do so on form submission:

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

But I think we could give a better answer to your question if we knew a bit more about the context.

If this is an ajax request, then you'll need to make sure you enable submit buttons again on either success or failure.

If this is a standard HTTP form submission (aside from disabling the button with javascript) and you're doing this to safe guard from multiple submissions of the same form, then you ought to have some sort of control in the code that deals with the submitted data, because disabling a button with javascript might not prevent multiple submissions.

like image 27
SpoonMeiser Avatar answered Oct 07 '22 14:10

SpoonMeiser