CODEWITHSUNDEEP
javascriptajax
sveti petar
sveti petar

Reputation: 3787

Get Ajax function to return true or false

I'm trying to get an Ajax function to return true or false (it's a sort of validation function which is called from another function). So the other function needs to get a true or false value from this one so it would know what to do next.

I'm sure I've done this before but I can't get it to work now. I tried synchronous and asynchronous calls, having the return inside the onreadystatechange function and underneath it, and nothing.

This is the Ajax:

function saveBooking(){
    var service_ids=document.getElementById("allservice_ids").value;
    var provider_ids=document.getElementById("allprovider_ids").value;
    var chosen_time=document.getElementById("chosen_time").value;
    var chosen_date=document.getElementById("chosen_date").value;
    var message=document.getElementById("message").value;

    var parameters="service_ids="+service_ids+"&provider_ids="+provider_ids+"&time="+chosen_time+"&date="+chosen_date+"&you=<?php echo $_SESSION['user_mail']; ?>&message="+message

     if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
     }
     else
     {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.open("POST","include/save_booking.php",true);
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
     xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var yesorno=xmlhttp.responseText;
            if(yesorno=="ok"){
                return true;
            }
            else{
                document.getElementById("booking_error").innerHTML = xmlhttp.responseText;
                return false;               
            }
         }
     }
     xmlhttp.send(parameters);

   }

Right now save_booking.php just contains the line <?php echo "ok"; ?>, I reduced it to that for testing purposes.

Can someone tell me how to get this to work? In the other function, if I do this:

if(saveBooking()){
        alert(saveBooking());
     }

It just alerts the word 'undefined'.

Please note that I am not too familiar with jQuery, so 'use jQuery' is not a helpful response for me.

Upvotes: 0

Views: 1383

Answers (1)

Armatus
Armatus

Reputation: 2191

Your current return statements only determine what the onreadystatchange method returns, which is not handled (correct me if I'm wrong - at least I wouldn't know how to access its return value). What you want is to influence the return of saveBooking, so you could do something like this:

 var responseOk = false;
 xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        responseOk = (xmlhttp.responseText=="ok");
        if(!responseOk) {
            document.getElementById("booking_error").innerHTML = xmlhttp.responseText;
        }
     }
 }
 ...
 return responseOk;

By the way, unless there's some special reason why you want to avoid jQuery (e.g. I personally like to learn to do things myself first), I strongly suggest you take a look at it. It's not going to be complicated for you and will make things a lot easier.

Apart from this I have to support MilkyWayJoe's comment - it does not make much sense to generate an asynchronous HTTP request and then require to wait for its return value. At the moment, my above example would probably return false in most cases because the request is not finished by the time the script arrives at the return statement. It makes sense not to mix up the function making the request and the callback of the request.

Upvotes: 1

Related Questions