title: Change ajax form submit value and state onClick
body: <p>I have an ajax form which am using to process data without refreshing the page. Everything works, except the submit button isn't animated which is a problem if you are using ajax.</p>
  
  <p>I have tried several suggestions from here methods to get it animated but no luck.</p>
  
  <p>My script for the ajax is;</p>
  
  <pre><code>$(document).ready(function() {
          $('#submitform').ajaxForm({
              target: '#error',
              success: function() {
              $('#error').fadeIn('slow');
              }
          });
      });
  </code></pre>
  
  <p>process.php looks like this;</p>
  
  <pre><code>&lt;?php
  
  if((strlen($_POST['fname']) &lt; 1 )){
  
      if(strlen($_POST['amount']) &lt; 1 ){
          $emailerror .= '&lt;span&gt;Kindly enter full name&lt;/span&gt;';
      }
  
  } else { ?&gt;
  &lt;span&gt;Thank You&lt;/span&gt;
  &lt;?php } ?&gt;
  
  &lt;?php echo $emailerror; ?&gt;
  </code></pre>
  
  <p>And the form is a simple form; </p>
  
  <pre><code>&lt;form id="submitform" action="process.php" method="post"&gt;
  &lt;input type="text" name="fname" placeholder="Full Name" /&gt;
  &lt;select name="values"&gt;&lt;option value="1"&gt;Value 1&lt;/option&gt;&lt;/select&gt;
  &lt;input type="submit" value="Send" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I click on submit, the form is sent to process.php and after a successful validation, the form is processed and a thank you page is displayed else an error is displayed. What I want to do is, when the user clicks submit, the submit button value should change to 'processing...' and become disabled. If the validation returns an error, the submit button should return to normal state.</p>
  
  <p><strong>Update:</strong>
  When I add a select input to the form, the script below stops working.</p>