Validation using AJAX

Question

I have a form like this in my PHP document:

<form id="biddingform" name="biddingform" method="POST" onsubmit="return checkBidding()" action="makebid.php" enctype="multipart/form-data">
 <table class="biddingtable">
  <tbody>
   <tr>
    <td class="bidlabel"><input type="hidden" id="itemidhidden" name="itemidhidden" value=<?php echo $_GET['itemid']; ?>></td>
    <td class="bidprice">$<input class="itembidlengthfield" id="itembidprice" name="itembidprice" type="number" min="<?php echo $minprice; ?>" maxlength="10" value="<?php echo $minprice; ?>" required></td>
    <td class="bidbutton"><input class="button" name="submit" id="submit" value="Make bid" type="submit"></td>
    <td id="biderrormsg" class="biderrormsg"></td>
   </tr>
  </tbody>
 </table>
</form>

My jQuery AJAX call looks like this (note that both the variables are retrieved correctly):

function checkBidding()
{
    var itembidprice = document.getElementById("itembidprice").value;
    var itemid = document.getElementById("itemidhidden").value;

    $.post('biddingvalidation.php', { bidprice: itembidprice, id: itemid }, function(result) {
        window.alert(result);
            if (result != "")
            {
                $('#biderrormsg').html(result);
                return false;
            } else {
                return true;
            }
        }
    );
    return false;
}

And lastly my biddingvalidation.php looks like this:

<?php

    if(isset($_REQUEST['bidprice']) && isset($_REQUEST['id'])) 
    {
        require 'includes/dbfunctions.php';
        $itembidprice = $_REQUEST['bidprice'];
        $itemid = $_REQUEST['id'];

        $biddingsql = "SELECT MAX(amount) AS amount FROM `bidding` WHERE itemid='$itemid'";
        $result = db_query($biddingsql);
        while($row = mysqli_fetch_array($result)) {
            $maxbid = $row['amount'];
        }

        if ($itembidprice <= $maxbid)
        {
            echo "Bid too low";
        }  else {
            echo "";
        }


    } else {
        echo "Error, try again";
    }


    ?>

I have done excessive testing but I just can't figure out why it is not working as intended. I open two browsers and test this as seen in the picture, the left side of the picture is my chrome browser, and the right one is my firefox browser. (i am logged in as 2 different users on the website):

As can be seen from the picture, on chrome I put a new bid at 220$ and since I have not yet refreshed my firefox the (ex)current highest bid is still 200$ there. so i try to bid for example 210$ on firefox, instead of giving me any of the echoed errors as stated in the biddingvalidation.php file it just submits the form and does nothing (because of other extra checks in the background right before mysql insertion). However I need the echoed error messages to appear in this kind of situation, what am I doing wrong why they are not appearing?

EDIT: I just simply try to show every single variable with window.alert, and I noticed that it does not even get a result anymore, the itembidprice & itemid are correctly shown, and from that point on I don't even get the first window.alert(result) anymore

function checkBidding()
{
        var itembidprice = document.getElementById("itembidprice").value;
        var itemid = document.getElementById("itemidhidden").value;
        window.alert(itembidprice);
        window.alert(itemid);

        $.post('biddingvalidation.php', { bidprice: itembidprice, id: itemid }, function(result) {
            window.alert(result);
                if (result != "")
                {
                    window.alert(result);
                    window.alert("ja");
                    $('#biderrormsg').html(result);
                    return false;
                } else {
                    window.alert(result);
                    window.alert("nee");
                    return true;
                }
            }
        );
    }

Answer 1

First, i hve two possible fix:

1. There's no itemhidden element in your markup.

var itemid = document.getElementById("itemidhidden").value; // itemid = null

2. Second, bidprice and id are always present after ajax even if empty, i think you need empty() for this not isset():

 if(isset($_REQUEST['bidprice']) && isset($_REQUEST['id'])) 
    {

should be:

if(!empty($_REQUEST['bidprice']) && !empty($_REQUEST['id'])) 
    {

I believe that on your current code, it's always true for isset so it won't do anything because there's no id.

Here's a better reason on why you need !empty than isset