[英]Fetch values from mysql using php into dynamic add/remove input fields having some calculations
I'm trying to fetch values from mysql to a dynamically add/remove input table fields (edit.php).我正在尝试从 mysql 中获取值以动态添加/删除输入表字段(edit.php)。 I'm successfull in fetching all the values, but my calculation are not updated automatically.我已成功获取所有值,但我的计算不会自动更新。
This works like charm during the insert process to mysql(add.php)这在插入到 mysql(add.php) 的过程中就像魅力一样
So initially user enters all the values in the the table using add.php and the values are successfully inserted in to the database.因此,最初用户使用 add.php 输入表中的所有值,这些值已成功插入数据库。 Now I have an option for users to edit the entered values.现在我可以选择让用户编辑输入的值。
The user clicks on edit.php and the form opens for editing with all the dynamic inputs.用户单击 edit.php 并打开表单以使用所有动态输入进行编辑。 its basically a cost calculation table which will calculate the amount automatically.它基本上是一个成本计算表,它将自动计算金额。 My problem is when i fetch the values from mysql with php while loop I'm able to get the values but the calculation seems not working我的问题是,当我使用 php 从 mysql 中获取值时,我能够获取值,但计算似乎不起作用 Now when I edit and change the fetched above values manually, I'm able to get the calculated amount现在,当我手动编辑和更改获取的上述值时,我可以获得计算出的数量
My PHP我的 PHP
<table class="table table-hover" id="product">
<thead>
<tr>
<th>#</th>
<th class="col-sm-2">Item<span class="text-danger">*</span></th>
<th class="col-md-6">Description<span class="text-danger">*</span></th>
<th>Unit Cost<span class="text-danger">*</span></th>
<th>Qty<span class="text-danger">*</span></th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$stmt = $link->prepare("SELECT * FROM product WHERE productid=?");
$stmt -> bind_param('s', $productid);
$stmt -> execute();
$stmtresult = $stmt->get_result();
$count = 0;
$numberofrows = $stmtresult->num_rows;
while($row = $stmtresult->fetch_assoc())
{
$no = $row["no"];
$items = $row["item"];
$description = $row["description"];
$unitcost = $row["unitcost"];
$est_qty = $row["qty"];
$amount = $row["amount"];
$totalamount += $amount;
$countreg = ++$count;
$grossamount = ($totalamount-$discountamount)+$taxamount; //I have declared $discoutamount, $taxamount elsewhere. This does not matter
?>
<input type="hidden" value="<?php echo $numberofrows; ?>" id="rowcount">
<tr id="row<?php echo $countreg; ?>">
<th scope="row"><a href=""><?php echo $countreg; ?></a></th>
<td><input class="form-control item" type="text" name="item[]" value="<?php echo $items; ?>"></td>
<td><input class="form-control description" type="text" name="description[]" value="<?php echo $description;?>"></td>
<td><input class="form-control unitcost" type="text" name="unitcost[]" value="<?php echo $unitcost; ?>"></td>
<td><input class="form-control qty" type="text" name="qty[]" value="<?php echo $qty; ?>"></td>
<td><input class="form-control amount" readonly name="amount[]" value="<?php echo $amount; ?>"></td>
<td><?php if($countreg==1){ ?><a class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a><?php }else{ ?><a class="text-danger font-18 btn_remove" title="Remove" name="remove" id="<?php echo $countreg; ?>"><i class="fas fa-trash-alt"></i></a> <?php } ?></td>
</tr>
<?php } ?>
</tbody>
My Jquery我的 Jquery
<script>
$(document).ready(function(){
var i=$('#rowcount').val();
$('#add').click(function(){
i++;
$('#product').append('<tr id="row'+i+'"><th scope="row"><a href="">'+i+'</a></th><td><input class="form-control item" type="text" name="item[]"></td><td><input class="form-control description" type="text" name="description[]"></td><td><input class="form-control unitcost" type="text" name="unitcost[]"></td><td><input class="form-control qty" type="text" name="qty[]"></td><td><input class="form-control amount" readonly type="text" name="amount[]"></td><td><a class="text-danger font-18 btn_remove" title="Remove" name="remove" id="'+i+'"><i class="fas fa-trash-alt"></i></a></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
$("table").on("change", "input", function () { //use event delegation
var tableRow = $(this).closest("tr"); //from input find row
var one = Number(tableRow.find(".unitcost").val()); //get first textbox
var two = Number(tableRow.find(".qty").val()); //get second textbox
var total = one * two; //calculate total
tableRow.find(".amount").val(total); //set value
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".amount").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
}
$("table").change(".amount", function () {
calculateSum();
});
});
</script>
I hope I'm clear with my question.我希望我的问题很清楚。 Appreciate your help and response感谢您的帮助和回应
I found it myself.我自己找到了。 I have updated my Jquery for the line below我已经为下面的行更新了我的 Jquery
$("table").on("change", "input", function () {
to至
$("table").on("change paste keyup", "input", function () {
furthur, my total value was not updating once i delete a dynamic row.此外,一旦我删除动态行,我的总值就不会更新。 So i updated the Script in the remove button function.所以我更新了删除按钮 function 中的脚本。
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
$(".Total").trigger("change");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.