Databases
StackOverflow2013
Postsdbo
POJavascript and AJAX, only works when using alert()
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript and AJAX, only works when using alert()
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload