Show PHP result in Jscript Pop-up

Question

i want a user to be able to check a number in the database by putting in some details. This number would then be shown in a javascript alert.

I have the index page with the user input as seen below:

<script type="text/javascript">
    function check()
    {
        $.ajax({
            url: "checkpna.php",
            type: "POST"})
    }

    function show_alert()
    {
        alert(check())
    }


</script>


<form action="#" method="get" class="formubuntu" onSubmit="return submitForm()">
    <p>Check Pallet PNA Number &nbsp;<input name="lpn" id="lpn_0" type="text" style="border-top-left-radius: 4px 4px; border-top-right-radius: 4px 4px; border-bottom-right-radius: 4px 4px; border-bottom-left-radius: 4px 4px; margin-right: auto; margin-left: auto;" value="Pallet LPN">
    &nbsp;<input name="submit" type="submit" value="Submit" class="art-button" onclick="show_alert()"></p>
</form>

and the checkpna.php which checks the specific details in the DB:

$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

if($_GET['submit'] == "Submit")
{
    $lpn = $_GET["lpn"];

}

$values = array();

$query = "select serial_number from t_container where container_number = '".$lpn."';";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

if($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo stripslashes($row['serial_number']);
    }
}

else {
    echo "NO RESULTS";
}

?>

however i am getting a popup that says undefined. what am i doing wrong??

Answer 1

The function check does not return anything (hence undefined ).

If you do return $.ajax() it does return something, but what? It returns a Promise . A promise is a container for a future value, a value we don't have yet. The reason we don't have the value yet is because the request hasn't completed yet, it only just started.

You can change your code to:

function check() {
    return $.ajax(/* .. */);
}
function show_alert() {
    check().done(function (result) {
        alert(result);
    });
}

---

There are some serious problems with your PHP code. It works , but it's not secure. Read up on SQL Injection and look at validating your input (you check submit , but not lpn ).

Answer 2

You want something like this:

    $.ajax({
        url: "checkpna.php",
        type: "POST"})
     .done(function( data ) {
        alert(data);
     }

Answer 3

You cannot alert immediately, you have to wait until you receive the answer to your Ajax request from the server. Just add a callback function to do this, when the result arrives.

https://api.jquery.com/jQuery.ajax/

function check()
    {
        $.ajax({
            url: "checkpna.php",
            type: "POST",
            complete: function(return) {
                alert(return);
            }
        })
    }

    function show_alert()
    {
        check();
    }

Answer 4

I believe for ajax request you need a callback when success and alert from that callback

From jQuery doc

success Type: Function( PlainObject data, String textStatus, jqXHR jqXHR ) A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

<script type="text/javascript">
    function show_alert()
    {
        $.ajax({
            url: "checkpna.php",
            type: "POST",
            success: function (data) {
                alert(data);
            }
        });
    }
</script>