<?php include('db.php') ?>
<!DOCTYPE html>
<html lang="en">
<?php include('header.php') ?>
<body>
<div >
<div >
<table id="invoiceItem">
<!-- table-hover -->
<tr>
<th width="2%"><input id="checkAll" type="checkbox"></th>
<th width="20%">ItemNo </th>
<th width="38%">ItemName</th>
<th width="10%">OnHand </th>
<th width="10%">Quantity</th>
<th width="10%">Price </th>
<th width="10%">Total </th>
</tr>
<?php
$i = 1;
while ($i < 51) {
?>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="productCode[]" id="productCode_<?php echo $i; ?>"></input></td>
<td><input readonly type="text" name="productName[]" id="productName_<?php echo $i; ?>" autocomplete="off"></td>
<td><input readonly type="number" name="productOnHand[]" id="productOnHand_<?php echo $i; ?>" autocomplete="off"></td>
<td><input type="number" min="0" name="quantity[]" id="quantity_<?php echo $i; ?>" value="" autocomplete="off"></td>
<td><input readonly type="number" name="price[]" id="price_<?php echo $i; ?>" autocomplete="off"></td>
<td><input readonly type="number" name="total[]" id="total_<?php echo $i; ?>" readonly autocomplete="off"></td>
</tr>
<?php
$i ;
}
?>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$("#productCode_1").focus();
document.getElementById("productCode_1").addEventListener('change', () => {
var PID = $("#productCode_1").val();
getDataFromServer(PID);
$("#productCode_2").focus();
});
document.getElementById("productCode_2").addEventListener('change', () => {
var PID = $("#productCode_2").val();
getDataFromServer2(PID);
$("#productCode_3").focus();
});
document.getElementById("productCode_3").addEventListener('change', () => {
var PID = $("#productCode_3").val();
getDataFromServer3(PID);
// $("#productCode_2").focus();
});
function getDataFromServer(PID) {
$.ajax({
type: "POST",
url: "response.php",
data: {
pro_id: PID
},
success: function(response) {
const JSON_Obj = JSON.parse(response);
$('#productName_1').val(JSON_Obj.pro_name);
$('#productOnHand_1').val(JSON_Obj.pro_quantity);
$('#price_1').val(JSON_Obj.pro_price);
$("#quantity_1").val(1);
// calculateTotal();
}
});
}
function getDataFromServer2(PID) {
$.ajax({
type: "POST",
url: "response.php",
data: {
pro_id: PID
},
success: function(response) {
const JSON_Obj = JSON.parse(response);
$('#productName_2').val(JSON_Obj.pro_name);
$('#productOnHand_2').val(JSON_Obj.pro_quantity);
$('#price_2').val(JSON_Obj.pro_price);
$("#quantity_2").val(1);
// calculateTotal();
}
});
}
function getDataFromServer3(PID) {
$.ajax({
type: "POST",
url: "response.php",
data: {
pro_id: PID
},
success: function(response) {
const JSON_Obj = JSON.parse(response);
$('#productName_3').val(JSON_Obj.pro_name);
$('#productOnHand_3').val(JSON_Obj.pro_quantity);
$('#price_3').val(JSON_Obj.pro_price);
$("#quantity_3").val(1);
// calculateTotal();
}
});
}
}); // document.ready
</script>
</body>
</html>
CodePudding user response：
You need to add class inside the inputs and need to handle the request with the class . Just a quick check changes on your code, for exact need please modify as per your requirement just follow concept -
<?php include('db.php') ?>
<!DOCTYPE html>
<html lang="en">
<?php include('header.php') ?>
<body>
<div >
<div >
<table id="invoiceItem">
<!-- table-hover -->
<tr>
<th width="2%"><input id="checkAll" type="checkbox"></th>
<th width="20%">ItemNo </th>
<th width="38%">ItemName</th>
<th width="10%">OnHand </th>
<th width="10%">Quantity</th>
<th width="10%">Price </th>
<th width="10%">Total </th>
</tr>
<?php
$i = 1;
while ($i < 51) {
?>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" name="productCode[]" id="productCode_<?php echo $i; ?>" data-id="<?php echo $i; ?>"></input></td>
<td><input readonly type="text" name="productName[]" id="productName_<?php echo $i; ?>" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="productOnHand[]" id="productOnHand_<?php echo $i; ?>" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input type="number" min="0" name="quantity[]" id="quantity_<?php echo $i; ?>" value="" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="price[]" id="price_<?php echo $i; ?>" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="total[]" id="total_<?php echo $i; ?>" readonly autocomplete="off" data-id="<?php echo $i; ?>"></td>
</tr>
<?php
$i ;
}
?>
</table>
</div>
</div>
<script>
jQuery(document).on('click','.product-code', function(){
var PID = jQuery(this).val();
var itemId = jQuery(this).attr('data-id');
var nextItemId = parseInt(itemId) 1;
getDataFromServer(PID,itemId);
jQuery("#productCode_" nextItemId).focus();
})
function getDataFromServer(PID,itemId) {
$.ajax({
type: "POST",
url: "response.php",
data: {
pro_id: PID
},
success: function(response) {
const JSON_Obj = JSON.parse(response);
$('#productName_' itemId).val(JSON_Obj.pro_name);
$('#productOnHand_' itemId).val(JSON_Obj.pro_quantity);
$('#price_' itemId).val(JSON_Obj.pro_price);
$("#quantity_" itemId).val(1);
// calculateTotal();
}
});
}
</script>
</body>
</html>