Automatic background scan if user edit column?

Question

Quite new to all this stuff so my apologies if this question is obvious.

So my problem is: If the user enter a valid item ID, the script will scan the item ID and return the Shelf ID of that item ID. I want this to be automatic so my user can scan multiple item ID's at the same time. The Shelf ID should be displayed at the red line in the picture below.

Note: I don't want to use the Check Status/Shelf button that I have right now, I want it to be automatic like onEdit or something similar.

Is this possible to accomplish with JavaScript?

Answer 1

This is easily accomplished with jQuery and Ajax. Firstly create a PHP file to do the lookup and return the shelf ID for you.

<?php
$itemId = filter_input(INPUT_POST, 'itemId', FILTER_VALIDATE_INT); // Make sure than an integer has been passed.
$query = "SELECT shelfId from myTable WHERE itemId = $itemId";
//... run query
// store shelfId in $shelfId
echo json_encode(array('itemId' => $itemId, 'shelfId' => $shelfId));

Next we need to set up the jQuery Ajax call. Give all your inputs a class that you can attach an event to. I'll use a class of myClass for now.

$('.myClass').change(function() {
    $.ajax({
        url: 'path/to/file/above.php',
        type: 'POST',
        dataType: 'JSON',
        data: { itemId: $(this).val() };
    }).done(function(response) {
        alert("Item: "+response.itemId+", Shelf: "+response.shelfId);
    });
});