Javascript and AJAX, only works when using alert()

Question

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)

Answer 1

You have to pass the third parameter to xmlhttp.open() as false, then it will work fine

Answer 2

The alert() helps because that delays the processing of the remaining javascript in that function (everything from the alert() down to the bottom), leaving enough time for the AJAX request to complete. The first letter in AJAX stands for "asynchronous" which means that (by default) the response will come in at "some point in the future" but not immediately.

One fix (which you should not implement) is to make the processing synchronous (by changing the third argument of open() to be false) which will stop further processing of your script (and the entire webpage) until the request returns. This is bad because it will effectively freeze the web browser until the request completes.

The proper fix is to restructure your code so that any processing that depends on the result of the AJAX request goes in to the onreadystatechange function, and can't be in the main function that initiates the AJAX request.

The way this is usually handled is to modify your DOM (before the AJAX request is sent) to make the form readonly and display some sort of "processing" message, then in the AJAX response handler, if everything is okay (the server responded properly and validation was successful) call submit() on the form, otherwise make the form wriable again and display any validation errors.

Answer 3

These guys are right but I would also be sure to return the bool from the validation method so the submission of the form is cancelled if the form is not valid.

Something along the lines of:

<form onsubmit="return IsValid();">

...

</form>

You could also always return false from validateRegForm and have the xmlhttp.onreadystatechange = function() submit the form if it is valid, or otherwise display your error message.

Answer 4

You're sending the request asynchronously, because of this:

xmlhttp.open(..., true);

Passing true as the third argument to open() means that the code will continue to run before the result comes back.

The alert() is giving that asynchronous request time to complete before the subsequent code runs.

I'd normally recommend moving all the code that depends on the result of the AJAX call into the callback, within the:

if(xmlhttp.readyState == 4)

block, but in your case you need the result of the call to know what to return from your validation function. In that case, you're going to have to use a synchronous call, by passing false to open(). Then your subsequent code won't run until the response has come back.

Answer 5

I've had the same problem. Once I remove the alert("") it doesn't work. I figured it out and that's the deal.

In HTML, when you use <button></button> to place your button, the browser acts differently; when you click on it, after calling the event handler, it reloads the page and this is why you should place an alert("") just after your code to prevent the page from reloading.

You can simply use <input type="button" value="something"> instead of <button></button> to prevent the browser from reloading the page.

Answer 6

I was having the same problem when I was using the type="submit", for example:

<button type="submit" class="btn btn-default" name="btn-login" id="btn-login" onclick="submitForm()">
  <span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In

but I change it to type="button" and it works.