多个输入文本超过 50 如何从一个 ajax 请求中获得结果？
multiple input text more than 50 how to get result from one ajax request?
<?php include('db.php') ?>
<!DOCTYPE html>
<html lang="en">
<?php include('header.php') ?>
<body>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table table-bordered " id="invoiceItem">
<!-- table-hover -->
<tr>
<th width="2%"><input id="checkAll" class="formcontrol" 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 class="itemRow" type="checkbox"></td>
<td><input type="text" class="form-control" name="productCode[]" id="productCode_<?php echo $i; ?>"></input></td>
<td><input readonly type="text" name="productName[]" id="productName_<?php echo $i; ?>" class="form-control" autocomplete="off"></td>
<td><input readonly type="number" name="productOnHand[]" id="productOnHand_<?php echo $i; ?>" class="form-control" autocomplete="off"></td>
<td><input type="number" min="0" name="quantity[]" id="quantity_<?php echo $i; ?>" class="form-control quantity" value="" autocomplete="off"></td>
<td><input readonly type="number" name="price[]" id="price_<?php echo $i; ?>" class="form-control price" autocomplete="off"></td>
<td><input readonly type="number" name="total[]" id="total_<?php echo $i; ?>" class="form-control total" 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>
您需要在输入中添加 class 并且需要使用 class 处理请求。只需快速检查您的代码更改，具体需要请根据您的要求进行修改，只需遵循概念 -
<?php include('db.php') ?>
<!DOCTYPE html>
<html lang="en">
<?php include('header.php') ?>
<body>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table table-bordered " id="invoiceItem">
<!-- table-hover -->
<tr>
<th width="2%"><input id="checkAll" class="formcontrol" 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 class="itemRow" type="checkbox"></td>
<td><input type="text" class="form-control product-code" 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; ?>" class="form-control product-name" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="productOnHand[]" id="productOnHand_<?php echo $i; ?>" class="form-control product-on-hand" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input type="number" min="0" name="quantity[]" id="quantity_<?php echo $i; ?>" class="form-control quantity" value="" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="price[]" id="price_<?php echo $i; ?>" class="form-control price" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="total[]" id="total_<?php echo $i; ?>" class="form-control total" 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>
<?php include('db.php') ?>
<!DOCTYPE html>
<html lang="en">
<?php include('header.php') ?>
<body>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table table-bordered " id="invoiceItem">
<!-- table-hover -->
<tr>
<th width="2%"><input id="checkAll" class="formcontrol" 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 class="itemRow" type="checkbox"></td>
<td><input type="text" class="form-control" name="productCode[]" id="productCode_<?php echo $i; ?>"></input></td>
<td><input readonly type="text" name="productName[]" id="productName_<?php echo $i; ?>" class="form-control" autocomplete="off"></td>
<td><input readonly type="number" name="productOnHand[]" id="productOnHand_<?php echo $i; ?>" class="form-control" autocomplete="off"></td>
<td><input type="number" min="0" name="quantity[]" id="quantity_<?php echo $i; ?>" class="form-control quantity" value="" autocomplete="off"></td>
<td><input readonly type="number" name="price[]" id="price_<?php echo $i; ?>" class="form-control price" autocomplete="off"></td>
<td><input readonly type="number" name="total[]" id="total_<?php echo $i; ?>" class="form-control total" 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>
您需要在输入中添加 class 并且需要使用 class 处理请求。只需快速检查您的代码更改，具体需要请根据您的要求进行修改，只需遵循概念 -
<?php include('db.php') ?>
<!DOCTYPE html>
<html lang="en">
<?php include('header.php') ?>
<body>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table table-bordered " id="invoiceItem">
<!-- table-hover -->
<tr>
<th width="2%"><input id="checkAll" class="formcontrol" 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 class="itemRow" type="checkbox"></td>
<td><input type="text" class="form-control product-code" 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; ?>" class="form-control product-name" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="productOnHand[]" id="productOnHand_<?php echo $i; ?>" class="form-control product-on-hand" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input type="number" min="0" name="quantity[]" id="quantity_<?php echo $i; ?>" class="form-control quantity" value="" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="price[]" id="price_<?php echo $i; ?>" class="form-control price" autocomplete="off" data-id="<?php echo $i; ?>"></td>
<td><input readonly type="number" name="total[]" id="total_<?php echo $i; ?>" class="form-control total" 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>