CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Joseph
Joseph

Reputation: 71

populating multiple fields based on value selected with ajax

I'm trying to make two fields auto-fill after an item that generated from database been "selected". I'm not sure where did I made the mistake. I also used firebug but it doesn't show any error message. It just won't populate after I selected an item from dropdown menu. Please help me out and let me know where I did wrong.

Here is the script:

<script type="text/javascript" language="javascript"> 
$(function () {
    $('#description').bind('input', function () {
        $(this).val() // get  value
        $.ajax({
            type: 'POST',
            url: 'orderAuto.php',
            data: {
                url: $('#description').val()
            },
            dataType: 'json',
            success: function (data) //on recieve of reply
            {
                var skuId = data[0]; 
                var unitPrice = data[1];
                $('#sku_1').val(skuId);
                $('#uPrice_1').val(unitPrice);
            }
        });
    });  
});  
</script>

Here is my form with fields and section from database:

<form name="form" method="get">
<table width="70%" border="5" align="center"><tr>
<th scope="row">Item Name</th>
<th scope="row">Item SKU</th>
<th scope="row">Quantity</th>
<th scope="row">Special Note</th>
<th scope="row">Unit Price</th>
<th scope="row">Total Price</th>
</tr>
<tr>
<th scope="row">
<?php
include('connect.php');

$result = mysqli_query("SELECT description FROM products") 
            or die(mysqli_error());
print '<select name="description" id="description" value="description">';
print '<option value="" disabled selected>Please Select A Product</option>';
while ($info = mysqli_fetch_array($result))
{
        $p = $info["description"];
        $p = htmlspecialchars($p);
        printf('<option value="%s">%s</option>', $p, $p);
}
print '</select>';
?>
</th>
<th scope="row"><input name="sku_1" id="sku_1" readonly /></th>    
<th scope="row"><input name="qty_1" /></th>
<th scope="row"><input name="note_1" /></th>  
<th scope="row"><input name="uPrice_1" id="uPrice_1" readonly /></th>
<th scope="row"><input name="tPrice_1" readonly /></th>
</tr>
</table>
<input type="submit"/>
</form>

And here is orderAuto.php:

<?php
    include('connect.php');
    $p = $_POST['description'];
    $result = mysqli_query("SELECT sku_id, unit_price FROM products WHERE description= '".$p."'");
    $array = mysqli_fetch_array($result);
    echo json_encode($array);
?>

Upvotes: 2

Views: 3644

Answers (1)

Prashank
Prashank

Reputation: 796

Updates

<script type="text/javascript" language="javascript"> 
$(function () {
    $('#description').change(function () {
        $.ajax({
            type: 'POST',
            url: 'orderAuto.php',
            data: {
                description: $(this).val()
            },
            dataType: 'json',
            success: function (data) //on recieve of reply
            {
                var skuId = data[0]; 
                var unitPrice = data[1];
                $('#sku_1').val(skuId);
                $('#uPrice_1').val(unitPrice);
            }
        });
    });  
});  
</script>

and

<?php
    include('connect.php');
    $p = mysqli_real_escape_string($_POST['description']); // should be doing this
    $result = mysqli_query("SELECT sku_id, unit_price FROM products WHERE description= '".$p."'");
    $array = mysqli_fetch_array($result);
    echo json_encode($array);
?>

Upvotes: 1

Related Questions