Disable form input after ajax submit

Question

I have a form that submits via Ajax. After the user submits the form, the text changes displaying the form were submitted successfully, and then the completed forms are displayed. I want to display the form, but I do not want them to resubmit the form, so I want to disable the inputs, as well as the submit button. I tried adding: $('#submit_btn').className +=" disabled" in ajax script, but it just refreshed the page without sending anything.

The ajax script looks like this:

  $(function() { $('.error').hide(); $('input.text-input').css({backgroundColor:"#FFFFFF"}); $('input.text-input').focus(function(){ $(this).css({backgroundColor:"#FFDDAA"}); }); $('input.text-input').blur(function(){ $(this).css({backgroundColor:"#FFFFFF"}); }); $(".button").click(function() { // validate and process form // first hide any error messages $('.error').hide(); var name = $("input#name").val(); var email = $("inputemail").val(); var phone = $("inputphone").val(); var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; //alert (dataString);return false; $.ajax({ type: "POST", url: "http://www.green-panda.com/website/panda/webParts/contact-form.php", data: dataString, success: function() { $('#myModalLabel').html("<h3 class='text-success' id='myModalLabel'>Contact Form Submitted!</h3>") $('#myModalSmall').html("<p class='muted'>Your submiessions are below. We will be contacting you soon, you may now close this window.</p>") $('#submit_btn').className +=" disabled" .hide() .fadeIn(1500, function() { $('#message').append("<i class='icon-ok icon-white'></i>"); }); } }); return false; }); }); runOnLoad(function(){ $("input#name").select().focus(); }); 

How can I disable the inputs and the button after the successful submission of the form?

http://jsfiddle.net/gY9xS/

Answer 1

Actually it is much simpler than what you are trying to do, you do not need to disable inputs, just cancel sending after ajax request:

 $('form').submit(function(){ return false; }); 

Put it inside the success handler of your ajax request.

If you want to disable the submit button, replace this error:

 $('#submit_btn').className +=" disabled" 

WITH

 $('#submit_btn').prop("disabled", true); 

Answer 2

In my application, I just turned off the submit button and show a progress message

  function submitForm(formObj) { // Validate form // if (formObj.email.value === '') { // alert('Please enter a email'); // return false; // } formObj.submit.disabled = true; formObj.submit.value = 'Log In...'; return true; } <form class="form-login" accept-charset="UTF-8" method="POST" action="/login" onsubmit="return submitForm(this);"> ...... <input type="submit" id="login-submit" name="submit" value="Log In"> </form>