disable button Problem in jQuery

Question

I have a form that trigger onsubmit a java script function like the following

<form:form commandName="achievment" method="post" id="achievmentForm"  enctype="multipart/form-data" onsubmit="disableButtons(this);" cssClass="validatable">

<input id="button1" type="submit" class="button" name="add" onclick="bCancel=false" value="إضافة" />

</form:form>

and the js code is

<script type="text/javascript">
<!--

function disableButtons(form){
 if(jQuery(form).valid()){
  jQuery('input:button').removeClass('button');
  jQuery('input:button').addClass('grayButton');
  jQuery('input:submit').removeClass('button');
  jQuery('input:submit').addClass('grayButton');
  jQuery('input:reset').removeClass('button');
  jQuery('input:reset').addClass('grayButton');
  jQuery('input:submit').attr('disabled', true);

 }

}
-->
</script>

as you have seen i'm trying to disable the submit buttons in the page while waiting the response .. but what is happen is the browser gives me a 404 error but with the same url i have... it's really strange cause it happen only when i trying to disable the submit not any other type...

Answer 1

Your problem description is vague. If you do it this way, instead just nothing will happen. You shouldn't have got a 404, the page would just stick there where it is. Because if you disable the buttons immediately, the form cannot be submitted. Give the form the chance to submit. Set a timeout on the disable.

setTimeout(function() { 
    $('button').attr('disabled', true); 
}, 100); // Disable after 100 milliseconds.

That said and unrelated to your actual problem: do you know that you can just style the disabled buttons separately? You seem to add and remove classes all the time. That is unnecessary. Just give them all the same class button (or so) and use the [disabled] attribute-selector:

.button {
    /* Define here style of default button. */
}

.button[disabled] {
    /* Define here style of disabled button. */
}