CODEWITHSUNDEEP
javascriptphpajax
Snoken
Snoken

Reputation: 103

How to get ID from DB if user enters INT to text input using Ajax/PHP?

I'm running a database with itemID's and a shelfnumber for every itemID..

As the user enters an itemID I want it to run through my database to get the shelfnumber using Ajax/PHP. Then post the shelfnumber back so the user can see where to find the item. (The items are in a room and are marked with unique ID's and shared shelfnumbers.) I need to use the onChange method (or anything similar) beacuse I want it to work like a tip/search engine. In other words automatic..

I'm totally new to ajax and I can't seem to get this to work at all.. No result is given and i'm at a roadblock right now.. Any form of help will be very appreciated

HTML

<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$('#target').change(function() {
    $.ajax({
        url: 'shelfid.php',
        type: 'POST',
        dataType: 'JSON',
        data:{ 
            itemID: $(this).val() 
        },
        success:function(response) {
            alert("Item: "+response.itemID+", Shelf: "+response.Hyllplacering);
        }
    });
});
</script>
</head>
    <body>
        <a>Enter Item ID 1:</a> 
        <input id="target" type="text" name="itemID" required />    
        <div id="hyllplacering">ENTER Shelfnumber here: </div>
    </body>
</html>

PHP

<?php
$con = mysql_connect("localhost", "root", "") OR die(' Could not connect');
$db = mysql_select_db('book1', $con);
$itemID = filter_input(INPUT_POST, 'itemID', FILTER_VALIDATE_INT);
$query = "SELECT Hyllplacering from booking WHERE itemID = $itemID";
$result = mysql_query($query);
if (!$result) {
    echo 'Could not run query: ' . mysql_error();
    exit;
}
$row = mysql_fetch_row($result);
echo json_encode(array('itemID' => $itemID, 'Hyllplacering' => $row['Hyllplacering']));
?>

Upvotes: 0

Views: 106

Answers (3)

Mike Miller
Mike Miller

Reputation: 3129

I think you incorrect to use the done method of the Ajax object. I am pretty sure you wont have your response available in that scope. Try to do it like..

$('#target').change(function() {
    $.ajax({
        url: 'shelfid.php',
        type: 'POST',
        dataType: 'JSON',
        data:{ 
            itemID: $(this).val() 
        },
        success:function(response) {
            alert("Item: "+response.itemID+", Shelf: "+response.Hyllplacering);
        },
        error:function(response){
            alert('error '+response);
        };
    })
});

Upvotes: 0

icechair
icechair

Reputation: 295

JavaScript is executed as soon as it is encountered. You bind the Event to an Element before it is available. You need to wrap the script in a document.ready body.

As the other answers mentioned you want to use the success callback instead of done.

<script>
$(document).ready(function(){
    $('#target').change(function() {
        $.ajax({
            url: 'shelfid.php',
            type: 'POST',
            dataType: 'JSON',
            data:{ 
                itemID: $(this).val() 
            };
        })
        .success(function(response) {
            alert("Item: "+response.itemID+", Shelf: "+response.Hyllplacering);
        });
    });
});
</script>

Upvotes: 1

Gary Liu
Gary Liu

Reputation: 13918

You may add a sentence in AJAX function 

$.ajax({
        url: 'shelfid.php',
        type: 'POST',
        dataType: 'JSON',
        data:{ 
            itemID: $(this).val() 
        };
        success:function(data){
            console.info(data);
        }
    })

to monitor what your PHP responsed, it's more easy to check what's wrong.

Upvotes: 0

Related Questions