如何实现依赖输入字段Jquery？答案

【问题标题】：How to implement dependent input fields Jquery?如何实现依赖输入字段Jquery？
【发布时间】：2018-01-24 05:51:42
【问题描述】：

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

现在我必须这样做。

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;
?>

【问题讨论】：

你能创建一个简短的 sn-p 来帮助理解流程吗？因为如果您要为 QTY、TAX、DISCOUNT 获取用户输入，您可以使用 onchange 事件并使用 javascript 使用公式计算总数。
可能会有帮助，jsfiddle.net/5gsBV/7
为什么不为此使用Javascript

标签： php jquery html ajax mysqli

【解决方案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));
       });
    });

【讨论】：

它可以工作，但有一个小问题。税不加（+）。而不是作为字符串附加在最后的附加税字段。例如：价格 = 10，数量 = 2，税金 = 12，折扣 = 0，总计 =2012。但它的总数应该是 32，谢谢你的努力
数量可以浮动吗？十进制值？
用这些更新我的 js 中的最后两行，total = ((parseFloat(price) * parseFloat(qty) + parseFloat(tax) - parseFloat(disc); $("#total"). val(parseFloat(total);
让我为你制作小提琴
感谢它经过一些小改动后的工作。非常感谢你的努力。你是个好人。再次感谢。

【解决方案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));
   });
});

【讨论】：

【解决方案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 来查看价格、数量、税收和折扣等字段的变化，并在每次变化时更改总价值

【讨论】：

它可以工作，但有一个小问题。税不加（+）。而不是作为字符串附加在最后的附加税字段。例如：价格 = 10，数量 = 2，税金 = 12，折扣 = 0，总计 =2012。但它的总数应该是 32，谢谢你的努力

【解决方案4】：

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

一旦您加载了有关特定产品的所有数据，您就可以使用下面的这个 jquery 代码

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

【讨论】：

【解决方案5】：

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

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

【讨论】：