title: Javascript and AJAX, only works when using alert()
body: <p>I am having trouble with my javascript. It seems to be acting oddly. This is what's going on. I have a form, after the user submits it, it calls a function(onsubmit event) to verify the submitted data, if something bad OR if the username/email is already in database(using ajax for this part) it'll return false and display errors using DOM. Here's the code below. What's weird about it, is that it only works when I use an empty alert('') message, without it, it just doesn't work. Thanks for the help.</p>
  
  <pre><code>//////////////////////////////////////
  
  function httpRequest() {
      var xmlhttp;
  
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      } else {
          alert("Your browser does not support XMLHTTP!");
      }
  
      return xmlhttp;
  }
  
  function validateRegForm(reg) {
  
      var isValidForm = true;
      var warningIcon = "";//for later in case we want to use an icon next to warning msg
  
      with(reg) {
  
  
          var regFormDiv = document.getElementById("registration_form");
  
          //Check if dynamic div exist, if so, remove it
          if(document.getElementById('disp_errors') != null) {
              var dispErrorsDiv = document.getElementById('disp_errors');
              document.getElementById('reg_form').removeChild(dispErrorsDiv);
          }           
  
          //Dynamically create new 'div'
          var errorDiv = document.createElement('div');
          errorDiv.setAttribute('id','disp_errors');
          errorDiv.setAttribute('style','background-color:pink;border:1px solid red;color:red;padding:10px;');
          document.getElementById('reg_form').insertBefore(errorDiv,regFormDiv);
  
  
  
  
          var xmlhttp = httpRequest();
          var available = new Array();
          xmlhttp.onreadystatechange = function() {
              if(xmlhttp.readyState == 4)
              {   
                  var response = xmlhttp.responseText;
                  if(response != "") {
  
                      //Return values
                      var newValue = response.split("|");
                      available[0] = newValue[0]; 
                      available[1] = newValue[1]; 
                  }
              }
          }
  
          xmlhttp.open("GET","profile_fetch_reg_info.php?do=available&amp;un="+u_username.value+"&amp;email="+u_email.value+"",true);
          xmlhttp.send(null);
  
  
          alert(' '); ////////////WITHOUT THIS, IT DOESN'T WORK. Why?
  
          if(available[1] == "taken") {
              errorDiv.innerHTML += warningIcon+'Username is already taken!&lt;br /&gt;';
              isValidForm = false;
          } else if(u_username.value.length &lt; 4){
              errorDiv.innerHTML += warningIcon+'Username must be more than 4 characters long!&lt;br /&gt;';
              isValidForm = false;
          } else if(u_username.value.length &gt; 35) {
              errorDiv.innerHTML += warningIcon+'Username must be less than 34 characters long!&lt;br /&gt;';
              isValidForm = false;
          }
  
  
          if(available[0] == "taken") {
              errorDiv.innerHTML += warningIcon+'Email address entered is already in use!&lt;br /&gt;';
              isValidForm = false;
          } else if(u_email.value == ""){
              errorDiv.innerHTML += warningIcon+'Email address is required!&lt;br /&gt;';
              isValidForm = false;
          } else {
              //Determine if email entered is valid
              var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
              if (!filter.test(u_email.value)) {
                  errorDiv.innerHTML += warningIcon+'Email entered is invalid!&lt;br /&gt;';
                  u_email.value = "";
                  isValidForm = false;
              }
          }
  
  
          if(u_fname.value == ""){
              errorDiv.innerHTML = warningIcon+'Your first name is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(u_lname.value == ""){
              errorDiv.innerHTML += warningIcon+'Your last name is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
  
  
          if(u_password.value.length &lt; 4){
              errorDiv.innerHTML += warningIcon+'Password must be more than 4 characters long!&lt;br /&gt;';
              isValidForm = false;
          } else if(u_password.value.length &gt; 35) {
              errorDiv.innerHTML += warningIcon+'Password must be less than 34 characters long!&lt;br /&gt;';
              isValidForm = false;
          } else if (u_password.value != u_password2.value) {
              errorDiv.innerHTML += warningIcon+'Password and re-typed password don\'t match!&lt;br /&gt;';
              isValidForm = false;
          }
  
  
          if(u_squestion.value == ""){
              errorDiv.innerHTML += warningIcon+'A security question is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(u_sanswer.value == ""){
              errorDiv.innerHTML += warningIcon+'A security answer is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(u_address.value == ""){
              errorDiv.innerHTML += warningIcon+'Address is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(u_city.value == ""){
              errorDiv.innerHTML += warningIcon+'City is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(u_state.value == ""){
              errorDiv.innerHTML += warningIcon+'State is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(u_zip.value == ""){
              errorDiv.innerHTML += warningIcon+'Zip code is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(u_phone.value == ""){
              errorDiv.innerHTML += warningIcon+'Phone number is required!&lt;br /&gt;';
              isValidForm = false;
          }
  
          if(isValidForm == false)
              window.scroll(0,0);
  
          return isValidForm;
      }
  
  }
  </code></pre>