javascript - 具有多种形式输入值的数学

Question

我是 jQuery 的新手。我正在构建此表单:http://vaniahardy.com/practice/testform.php

我已经将单价乘以数量来显示每行的总计，并在底部显示小计。

以下是我需要帮助显示的值:

• 小计 + 11%
• 总计(小计 + 11% - 折扣 [数值])

如果您点击“提交”，表单会通过 PHP 通过电子邮件将所有正确的值发送给我。我只是想动态地展示它们。

我的JS:

<script type="text/javascript">
$(document).ready(function () {
$(".itemline input").keyup(multInputs);
   function multInputs() {
       var mult = 0;
       // Action for each row
       $("tr.itemline").each(function () {
           // get the values from this row:
           var $qty = $('.qty', this).val();
           var $price = $('.price', this).val();
           var $total = ($qty * 1) * ($price * 1)
           $('.lineTotal',this).text($total);
           mult += $total;
       });
       $("#subTotal").text(mult);
   }
});
</script>

我的 HTML:

<table cellspacing="0" cellpadding="0">
<thead><tr>
<th>Item Number</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr></thead>
<tbody><tr class="itemline">
<td><input type="text" name="itemNum1" /></td>
<td><input type="text" name="qty1" class="qty" /></td>
<td><input type="text" name="amt1" class="price" /></td>
<td><span class="lineTotal">0.00</span></td>
</tr>
<tr class="itemline">
<td><input type="text" name="itemNum2" /></td>
<td><input type="text" name="qty2" class="qty" /></td>
<td><input type="text" name="amt2" class="price" /></td>
<td><span class="lineTotal">0.00</span></td>
</tr>
<tr class="itemline">
<td><input type="text" name="itemNum3" /></td>
<td><input type="text" name="qty3" class="qty" /></td>
<td><input type="text" name="amt3" class="price" /></td>
<td><span class="lineTotal">0.00</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td><b>Subtotal</b></td>
<td><span id="subTotal">0.00</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td><b>Subtotal +<br />Shipping (5%) & Sales Tax (6%)</b></td>
<td><span id="addShipTax">0.00</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td><b>Discount</b></td>
<td>$ <input type="text" name="discount" value="0" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><b>Total</b></td>
<td><span id="finalTotal">0.00</span></td>
</tr>
</tbody>
</table>

Answer 1

你尝试过吗:

var subtotal = $('#subTotal').text();
$('#addShipTax').text(subtotal * 11 / 100);

var discount = $('[name=discount]').val();
$('#finalTotal').text($('#addShipTax').text() - discount);

？