如何使用JQuery计算动态输入的价格和数量

Question

我正在使用PHP, Js和MySQL构建订购食品web应用程序，无法计算动态输入的价格和数量。

我只能计算价格，但没有数量，我不知道如何实现与编码，所以请如果有人知道解决方案，我真的很感激。

最后这张图将解释我的理论，可以很好地表达我的观点:图下面是我的HTML代码:

<div class="form-group">
<label class="control-label col-lg-4"></label>
<div id ="diva" class="col-lg-4">
<div class="box">
<header>
<h5>تفاصيل الطلب</h5>
</header>
<div class="body getval">
<div class="form-group">
<label class="control-label col-lg-2">الصنف</label>
<div class="col-lg-10">
<select id="itemname" name="itemname[]" class="form-control">
<option disabled selected>اختر الصنف</option>
<?php echo getValues($pdo); ?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">السعر</label>
<div class="col-lg-10">
<input type="text" id="price" name="price[]" placeholder="-" readonly class="form-control price">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">الكمية</label>
<div class="col-lg-10">
<input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
</div>
</div>
</div>
</div>
</div>
<input type="text" id= "total" placeholder="-" readonly class="form-control">
</div>

和PHP代码:

<?php    
require 'DBConnection.php';
$code='';
if(isset($_POST["code"])){
$id = $_POST["code"];
$get_c = $pdo->prepare("SELECT * FROM all_menu WHERE `item_name` = '".$id."'");
$get_c->execute(); 
while ($row = $get_c->fetch()) {
$code .= $row['price'];
}
echo $code.'.00';
}
?>

最后是JQuery代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script>
$(document).ready(function(){
var nextRowID = 0;
$('#add').click(function(e){
e.preventDefault();
var id = ++nextRowID;
$('#append').append('<div class="form-group"><label class="control-label col-lg-4"></label><div id ="diva" class="col-lg-4"><div class="box"><header><h5>تفاصيل الطلب</h5></header><div class="body getval"><div class="form-group"><label class="control-label col-lg-2">الصنف</label><div class="col-lg-10"><select id="itemname'+id+'" name="itemname[]" class="form-control"><option disabled selected>اختر الصنف</option><?php echo getValues($pdo); ?></select></div></div><div class="form-group"><label class="control-label col-lg-2">السعر</label><div class="col-lg-10"><input type="text" id="price'+id+'" name="price[]" placeholder="-" readonly class="form-control price"></div></div><div class="form-group"><label class="control-label col-lg-2">الكمية</label><div class="col-lg-10"><input class="form-control quantity" type="number" name="quantity[]" value="0" min="1"></div></div></div></div></div></div>');
$('#itemname'+id+'').change(function(){
var code = $(this).val();  
$.ajax({
type: 'POST',
url: 'pages/GetPrice.php',
data:{code:code},
success: function(data){
document.getElementById('price'+id+'').value = data;
},
error: function (jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
});
});
$('#itemname').change(function(){
var code = $(this).val();  
$.ajax({
type: 'POST',
url: 'pages/GetPrice.php',
data:{code:code},
success: function(data){
document.getElementById('price').value = data;
},
error: function (jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
});
});
</script>

Answer 1

好的，那么您需要在数量发生变化时设置一个事件。它将把所有的价格*数量相加，并得出结果。

function handleQuantityChange(){
$('.quantity').unbind('change').change(function(){
let dTot = 0.0;
$('.price').each(function(){
dTot += parseFloat($(this).val()) * parseFloat($(this).parent().parent().next().find('.quantity').val())
});
$('#total').val(dTot)
})
}

这里是一个链接，看看我的例子:jsFiddle例子