如何实现依赖输入字段 Jquery?

Question

我正在构建一个发票系统，其中项目名称和价格从数据库中检索。价格取决于项目名称。

现在我必须这样做.

Price: <Input type="text" id="price" name="price" />
Qty : <Input type="text" id="qty" name="qty" />
Tax : <Input type="text" id="tax" name="tax" />
Discount : <Input type="text" id="disc" name="disc" />
Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>

我想自动填充总输入字段而不使用以下公式重新加载

<?Php 
$total = $price * $qty + $tax - $disc;
?>

Answer 1

需要在 html 中分配类，以及一些 jquery 脚本，

//Assign Amount class in your 4 html fields
Price: <Input type="text" id="price" name="price" class="amount" />
Qty : <Input type="text" id="qty" name="qty" class="amount"/>
Tax : <Input type="text" id="tax" name="tax" class="amount"/>
Discount : <Input type="text" id="disc" name="disc" class="amount"/>
Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>
$( document ).ready(function() {
$('input.amount').keyup(function(){   
var price = $("#price").val();
var qty = $("#qty").val();
var tax = $("#tax").val();
var disc = $("#disc").val();
var total = $("#total").val();
total = ((parseFloat(price) * parseFloat(qty) + parseFloat(tax) - parseFloat(disc);
$("#total").val(parseFloat(total));
});
});

Answer 2

它应该是，

$( document ).ready(function() {
$('input.amount').keyup(function(){   
var price = $("#price").val();
var qty = $("#qty").val();
var tax = $("#tax").val();
var disc = $("#disc").val();
var total = $("#total").val();
var total = (parseFloat(price) * parseFloat(qty)) + (parseFloat(tax) - parseFloat(disc));
$("#total").val(parseFloat(total));
});
});

Answer 3

Price: <Input type="text" class="changing" id="price" name="price" />
Qty : <Input type="text" class="changing" id="qty" name="qty" />
Tax : <Input type="text" class="changing" id="tax" name="tax" />
Discount : <Input type="text" class="changing" id="disc" name="disc" />
$('input[class^=changing]').on('change', function() {
var total = $('#price').val() * $('#qty').val() + $('#tax').val() - $('#disc').val();
$('#total').val(total);
});

您可以使用Jquery来观察价格，数量，税金和折扣等字段中的变化，并在每次更改时更改总值

Answer 4

您可以使用jQuery进行数学运算，但是您需要Ajax从数据库中加载数据。

加载有关特定产品的所有数据后，您可以使用下面的jQuery代码

<script>
$("#qty, #disc").change(function(){
$("#total").val( $("#price").val() * $("#qty").val() + $("#tax").val() - $("#disc").val() )
});
</script>

Answer 5

或者你可以使用名为DependsOn的jQuery插件 https://dstreet.github.io/dependsOn/

它可能在发布这个问题的同时出现。但它以干净的方式完成了这项工作。而且它并不是唯一一个这样做的图书馆。