title: PHP form submission and AJAX validation
body: <p><strong>EDIT:</strong> <code>document.getElementById('submit').disabled='disabled';</code> does the trick if I put it instead of <code>return false;</code> but for some reasons, it also disables the button when the username is NOT taken.</p>
  
  <hr>
  
  <p>Below is basic script to check a username availability. </p>
  
  <p>How can I <strong>prevent the form from being submitted</strong> if a username is already taken?</p>
  
  <p>Ideally i would like to have a JS alert box pop up.</p>
  
  <p>I've tried to add this to the JS but didn't work:</p>
  
  <p><code>document.getElementById('submit').disabled</code></p>
  
  <p>Also I've tried to add <code>onclick="return validate();"</code> to the form itself, but no luck either: the form still can still get submitted. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form id="edit" action="edit.php" method="post"&gt;
     &lt;fieldset&gt;       
       &lt;label&gt;Username&lt;/label&gt;&lt;input type="text" class="input" name="username"      
       id="username"/&gt;&lt;span id="status"&gt;&lt;/span&gt; 
      &lt;button type="submit" id="submit" value="add"&gt;Save&lt;/button&gt;
     &lt;/fielset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $("#username").change(function() {
          var username = $("#username").val();
          var msgbox = $("#status");
  
          if (username.length &gt;= 4) {
              $("#status").html('&lt;img src="images/gif/ajax-loading.gif"&gt;');
  
              $.ajax({
                  type: "POST",
                  url: "ajax_check.php",
                  data: "username=" + username,
                  success: function(msg) {
  
                      if (msg == 'OK') {
  
                           msgbox.html('&lt;img src="/images/yes.png"&gt;');
                           return true;
  
                      } else {
                          msgbox.html(msg);            
                          return false;
  
                      }
                  }
              });
          } else {
  
              $("#status").html('&lt;img src="/images/no.png"&gt;too long!');
              return false;
          }
          return false;
      });
  });
  </code></pre>
  
  <p><code>edit.php</code> and <code>ajax_check.php</code> only contain some SQL queries.</p>
  
  <p>Also, some users have JavaScript disabled on their browser, how could I get around this?</p>