How to pass ajax $.get value to another $.get function in jQuery?

Question

I have these function in jQuery :

The problem is I unable to pass the variable branchaddress outside of the function. Can only display inside $.get(); Is there any way I can passed the value or I need to find another way to do it ?

Here's my full code for

function.js

function approveData(name, branch,email){
    var branchaddress = "";
    $.get('php/ajax-get-branch-address.php', {branch_address: branch}).done(function(data){
            ar = JSON.parse(data);
            branchaddress = ar.BRANCH_ADDRESS;
            // alert(branchaddress);
    });
    // alert(branchaddress);
    $.get("php/ajax-mail.php", 
            {
                "type": 'APPROVE', 
                "name": name,
                "branchaddress": branchaddress,
                "email"         : email
            }
        );  
}

ajax-get-branch-address.php

<?php
$connStr = "";
$conn = oci_connect("", "", $connStr);
$branch_address = $_GET['branch_address'];
$query = "select * from table where branch_name = '".$branch_address."' "; 
$result = oci_parse($conn, $query);
oci_execute($result);
$row = oci_fetch_array($result);
echo json_encode($row);
?>

ajax-mail.php

<?php
$to = $_GET['email']; 

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: Sender <noreply@mail.com>"; 

if($_GET['type'] == "APPROVE"){
    $message =
        "<html>
            <head></head>
            <body>
                    <table style='font-family:Century Gothic'>
                    <tr>
                        <td style='padding-bottom:5%;'>Dear $_GET[name],</td>
                    </tr>
                    <tr>
                        <td style='padding-bottom:5%;'>Thank you. Detail as below :</td> 
                    </tr>
                    <tr>
                    <td style='padding-bottom:5%;'>
                        <table style='margin:0 10%;font-family:Century Gothic;'>
                            <tr>
                                <td>Officer Name</td>
                                <td style='min-width:10px'></td>
                                <td>:</td>
                                <td style='min-width:10px'></td>
                                <td>$_GET[name]</td>
                            </tr> 
                            <tr>
                                <td>Branch Address</td>
                                <td style='min-width:10px'></td>
                                <td>:</td>
                                <td style='min-width:10px'></td>
                                <td>$_GET[branchaddress]</td>
                            </tr> 
                        </table> 
                    </td> 
                    </tr> 
                    <tr>
                        <td>Thanks and regards;</td> 
                    </tr> 
                </table> 
            </body> 
        </html>";
}      
echo $message;

mail($to, "Sender", $message, $headers, "-f noreply@mail.com");
?>

Appreciate if someone can help to solve this problem.

P/S : I already search for this problem but having the difficulty to understand the suggestion answers.

Shoyeb Sheikh · Answer 1 · 2019-03-31T13:48:54.093

Try this,

function approveData(name, branch,email){
    var branchaddress = "";
    $.get('php/ajax-get-branch-address.php', {branch_address: branch}).done(function(data){
            ar = JSON.parse(data);
            branchaddress = ar.BRANCH_ADDRESS;
             $.get("php/ajax-mail.php", 
            {
                "type": 'APPROVE', 
                "name": name,
                "branchaddress": branchaddress,
                "email"         : email
            }
        ); 
    });   
}

You are not getting value in second ajax get because, first request is yet to complete, if you want to do it that way you can go with "async:false" in the first request with a proper ajax request rather than get request as follows,

function approveData(name, branch, email) {
    var branchaddress = "";
    $.ajax({
        url: 'php/ajax-get-branch-address.php'),
        type: "get",
        data: {branch_address: branch},
        async: false,
        success: function (data) {
            ar = JSON.parse(data);
            branchaddress = ar.BRANCH_ADDRESS;
            // alert(branchaddress);
        }
    });
    // alert(branchaddress);
    $.get("php/ajax-mail.php",
            {
                "type": 'APPROVE',
                "name": name,
                "branchaddress": branchaddress,
                "email": email
            }
    );
}

score 1 · Answer 2 · answered Mar 31 '19 at 13:44

Welcome to asynchronous calls (AJAX)! The problem here is that when your function executes, it runs from the top to the bottom. But you are performing two async calls to external service which, as the name suggests, are asynchronous. So in your code, it goes like this:

Declare variable branchaddress;
Make an asynchronous call at php/ajax-get-branch-address.php and when it's finished, call the .done() method
While waiting for a response, make another call at php/ajax-mail.php and when it's finished, call the .done() method.

Do you see the problem now? You want to use branchaddress before the first request is finished and that's why the value is not ready yet. You have several options here but the simplest one is to make the second call after the first call using callback, like this:

function approveData(name, branch,email){
    var branchaddress = "";
    $.get('php/ajax-get-branch-address.php', {branch_address: branch}).done(function(data){
            ar = JSON.parse(data);
            branchaddress = ar.BRANCH_ADDRESS;
            // alert(branchaddress);
            $.get("php/ajax-mail.php", 
                {
                    "type": 'APPROVE', 
                    "name": name,
                    "branchaddress": branchaddress,
                    "email"         : email
                }
            );
    });  
}

You can also use Promises to make it look a bit cleaner. But the idea is to access the value after the first call is finished and not before it happens.

Downvoter - any explanation for the downvote? @Rozaimi consider accepting the answer if you found it useful so others could benefit from it — Sebastian Kaczmarek, Mar 31 '19 at 16:53
@ShoyebSheikh I think it's a bot or some angry man. I've upvoted your answer to fix that — Sebastian Kaczmarek, Apr 03 '19 at 09:25

How to pass ajax $.get value to another $.get function in jQuery?

2 Answers2