StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODisabled jQuery UI Button Remains Disabled on Returning to Page
text
Body
copied!<p>I have a <a href="http://jqueryui.com/demos/button/" rel="nofollow">JQuery UI</a> submit button on a form when it's clicked to both prevent double-clicking and to also make it visibly clear that it was in fact clicked properly.</p> <p>So I use jQuery to do this:</p> <pre><code>$('input:submit').click(function() { $(this).button('disable'); }); </code></pre> <p>It works, but the problem is when the user hits their back button it <strong><em>remains disabled</em></strong>. What's the proper way to disable a submit button when clicked? I obviously use jQuery, so preference is to use jQuery.</p> <p><em><strong>UPDATE</strong></em>: many people suggested I use <code>$(document).ready(function() {$('input:submit').button('enable');});</code> to overcome this persistent disabling of the button. It turns out that won't work if it comes before my button initialization call in <code>$(function() {}</code>. But if I put that button('enable') after my button initialization code, even in the <code>$(function() {})</code> section, then it works as expected.</p> <p>But now I realize this whole button disabling only works in Firefox! <strong><em>If I disable the button, the form won't submit</em></strong> in IE and Chrome (haven't tested others)!</p> <p><em><strong>UPDATE 2</strong></em>: I finally got this to work, though a bit concerned some browsers are not going to be able to submit things with these workarounds... Here's my final code, would love to hear opinions of potential issues:</p> <pre><code>$(function() { $('input:submit').button().click(function() { $(this).button('disable'); $(this).closest('form').submit(); return false; }); $('input:submit').button('enable'); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload