jQuery Form plugin - how to prevent double submission? <p>There are several threads on this here at SO but I didn't find one that deals specifically with the awesome <a href="http://jquery.malsup.com/form/" rel="nofollow">jQuery Form plugin</a> which I use extensively in my app.</p> <p>I want the user to be able to click 'submit' only once -- and disable the 'submit' button until Ajax has returned a JSON string on success.</p> <p>My trial code goes something like this</p> <pre><code>$('#submit_button').live('click', function(e) { e.preventDefault(); var options = { type: 'post', dataType: 'json', beforeSubmit: function(){ $('#loading').show().fadeIn(); $('#submit_button').attr('disabled', 'disabled'); }, success: function(data) { if (data.success === 3) { $('#submit_button').hide(); $('#loading').hide(); $('#validation_message').html(data.message).fadeIn(); $('#submit_button').attr('enabled', 'enabled'); } } } $(this).closest('form').ajaxSubmit(options); }); </code></pre> <p>But this piles up "enabled" and "disabled" attributes in the <code>&lt;button&gt;</code>.</p> <pre><code>&lt;button class="button" id="submit_button" disabled="disabled" enabled="enabled"&gt; Post &lt;/button&gt; </code></pre> <p>Do you have any suggestions on how to get this to work?</p>