Obtain the Ajax function to provide a result of either true or false

Question

Obtain the Ajax function to provide a result of either true or false

I'm struggling to make an Ajax function return a true or false value for validation purposes. The other function needs to receive this value to determine the next steps.

I'm certain I've accomplished this before, but for some reason, it's not working now. I've experimented with synchronous and asynchronous calls, placing the return statement inside and outside the onreadystatechange function, but nothing seems to work.

Here is the Ajax code:

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);

   }

Currently, the save_booking.php file only contains <?php echo "ok"; ?>, simplified for testing purposes.

Can someone guide me on how to resolve this issue? When I try the following in the other function:

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

It only alerts 'undefined'.

Please keep in mind that I am not well-versed in jQuery, so suggesting 'use jQuery' would not be helpful for me.

javascript ajax

Answer 1

Answer №1

Your current code is only affecting what the onreadystatechange method returns, which may not be useful for accessing its return value. To influence the return of saveBooking instead, you could try 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;

On another note, unless you have specific reasons to avoid jQuery, I recommend looking into it as it can simplify your tasks significantly.

I also echo MilkyWayJoe's point - waiting for the return value of an asynchronous HTTP request doesn't align with the nature of asynchronous operations. In most cases, the example above would likely return false because the request hasn't finished by the time the script reaches the return statement. It's important to separate the function making the request from its callback.

Answer 2

Your current code is only affecting what the onreadystatechange method returns, which may not be useful for accessing its return value. To influence the return of saveBooking instead, you could try 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;

On another note, unless you have specific reasons to avoid jQuery, I recommend looking into it as it can simplify your tasks significantly.

I also echo MilkyWayJoe's point - waiting for the return value of an asynchronous HTTP request doesn't align with the nature of asynchronous operations. In most cases, the example above would likely return false because the request hasn't finished by the time the script reaches the return statement. It's important to separate the function making the request from its callback.

Obtain the Ajax function to provide a result of either true or false

Answer №1

Similar questions

Hi there, I am facing an issue with the modal window. Whenever I click on the image, it always displays the same image instead of the right one. Can you please suggest

CSS: Concealing a separate div

Click on the next tab within the ExtJS tab menu

When working with an array of objects in Vue.js, what is the optimal approach: replacing the entire array or modifying individual values?

What is the best way to toggle the enablement of a textbox with jQuery?

Unable to execute script tag on PHP page loading

Using TypeScript, implement a function that is called when a React checkbox's state changes to true

What is the process for sending a selected option using AJAX?

Having trouble pinpointing the source files that are loading .js in the <head> section of my Magento website

Combining multiple rows into one using either mysql or lodash was achieved by Node

Reactivate IntelliJ IDEA's notification for running npm install even if you have previously selected "do not show again" option

Organizing textual maps within a 2D array for rendering on an HTML5 Canvas

Creating Web Components using JavaScript on the fly

Need for input

Exploring Sanity npm package with Jest for mocking tests

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

The execution of Node.js callback function is not triggered

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

Showcasing the values of JavaScript

a class instance in Java Script returned as undefined