how to return variable from the function called by onreadystatechange=function() [duplicate]

Answer 1

jQuery won't automagically fix the fact that he's trying to base his submission on the results of an asynchronous request.

What you can do is the following:

1) Set the form onsubmit to simply call snappyajaxfunction();

2) In stateChanged, if the readystate is 4, obtain a reference to the form and do the following:

form.onsubmit = function() { return true; };
form.submit();

Basically - Set the onsubmit to always return true and then force it to submit again. For added usability you may want to disable the button causing the submission while waiting for statechanged to happen. And then re-enable it.

Answer 2

feel free to check out this tutorial on ajax.

It will show you how to properly use ajax step-by-step

as inkedmn has suggested, I would recommend using jquery or any of the other js frameworks

Answer 3

The problem is that ajax calls are asynchronous. That means the response is separate from the request. You have to modify your code to handle that. You cannot (should not) make http calls synchronous.

Look at this code. It works, and you'll be able to read the response:

var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function (ev) {
    if (req.readyState == 4) {
        alert(req.responseText);
    }
};
req.send(null);

Answer 4

You could do:

function stateChanged() 
{ 
    if (request.readyState==4)
    {   
       OnStateChanged(request.responseText);
    }           
}

Where OnStateChanged is a function that act as an event handler...

EDIT: in OnStateChanged you can then submit or not your form based on response

EDIT2: On the server when you check the u/p, if they're right log the user right on and return the status to JavaScript.. then in the JavaScript instead of resubmitting a form, just reload/redirect the page if it is successful or display an alert otherwise...

It is just not possible to return something from a function by an asynchronous operation in it... the original thread of execution is long gone. The asynchronous operation is executed by another thread (If I remember correctly, don't flame).

Thanks

Answer 5

To make your code work you can use closures and pass functions as parameters.
2 properties javascript is very good at.

snappyajaxfunction(url, fn)
{
   var request...

   request.onreadystatechange=function() 
    { 
        if (request.readyState==4)
        {   
           fn(request.responseText);     
        }           
    };             
   request.open("GET",url,true); 
   request.send(null);
}

to use it you can build a function like

var doSomething = function(response){
  alert(response);
};
snappyajaxfunction('/country/code/32', doSomething);

The closure allows 'request' to be available within the function that handles the onreadystatechange. The function 'fn' is passed as a parameter of snappyajaxfunction.