![](/img/trans.png)
[英]HTML & JavaScript form total price from multiple options not changing
[英]HTML form input javascript autosum total price to pay
我有以下代碼來銷售產品,如果我應用折扣,它會起作用,如果我應用稅收,則相同,每單位的所有價格(數量 1)都有效,但是如果我改變數量,則支付的總價無效
我需要的是自動填充以稍后將以下字段保存到 mysql:
default price per unit (comming from mysql) = working
apply taxes or not per unit = working
apply discount per unit = working
price per unit after discount and after taxes = working
如果我將數量從 1 更改為 2 o 3 等,要支付的總價 = 不起作用 這必須通過乘數自動填充以按數量計算每單位稅后支付 = 不起作用
這是代碼
<table width="339" border="0" cellpadding="0">
<tr>
<td width="98">Pay taxes?</td>
<td width="115">Make Discount?</td>
<td width="118">Default unit price</td>
<td>Quantity</td>
</tr>
<tr>
<td>
<select name="taxes" class="select">
<option value="0" selected>no taxes</option>
<option value="19">19% taxes</option>
</select>
</td>
<td>
<select name="discount" class="select">
<option value="0" selected>no discount</option>
<option value="5">5% discount</option>
<option value="10">10% discount</option>
<option value="20">20% discount</option>
</select>
</td>
<td>
<input type="text" name="cost" class="input140" value="1000">
</td>
<td><input type="text" name="quantity" value="1"></td>
</tr>
<tr>
<td>Unit price after discount</td>
<td>Tax per unit</td>
<td>Total Price per unit</td>
<td>Total Price to pay per quantity</td>
</tr>
<tr>
<td><input type="text" name="price" value="1000"></td>
<td><input type="text" name="ttaxes" value="0"></td>
<td><input type="text" name="total" value="1000"></td>
<td><input type="text" name="totaltopay" value="1000"></td>
</tr>
</table><script>
/**
* Elements
*/
var taxes = document.getElementsByName('taxes')[0];
var discount = document.getElementsByName('discount')[0];
var cost = document.getElementsByName('cost')[0];
var price = document.getElementsByName('price')[0];
var ttaxes = document.getElementsByName('ttaxes')[0];
var total = document.getElementsByName('total')[0];
/**
* Calculations
*/
function updateInput() {
price.value = cost.value - (cost.value * (discount.value / 100));
ttaxes.value = (price.value * (taxes.value / 100));
var sum = parseFloat(price.value) + parseFloat(ttaxes.value);
total.value = sum.toFixed(0);
}
/**
* Event Listeners
*/
taxes.addEventListener('change', updateInput);
discount.addEventListener('change', updateInput);
cost.addEventListener('change', updateInput);
cost.addEventListener('keyup', updateInput);
</script>
這是演示小提琴
https://fiddle.jshell.net/63dkvgs5/
我需要的圖像示例
你忘記加數量了!
var quantity = document.getElementsByName('quantity')[0];
quantity.addEventListener('keyup', updateInput);
並更新計算:
var sum = (parseFloat(price.value) + parseFloat(ttaxes.value)) * quantity.value;
<table width="339" border="0" cellpadding="0">
<tr>
<td width="98">Pay taxes?</td>
<td width="115">Make Discount?</td>
<td width="118">Default unit price</td>
<td>Quantity</td>
</tr>
<tr>
<td>
<select name="taxes" class="select">
<option value="0" selected>no taxes</option>
<option value="5">5% taxes</option>
<option value="10">10% taxes</option>
<option value="20">20% taxes</option>
<option value="27">27% taxes</option>
<option value="30">30% taxes</option>
<option value="40">40% taxes</option>
<option value="50">50% taxes</option>
</select>
</td>
<td>
<select name="discount" class="select">
<option value="0" selected>no discount</option>
<option value="5">5% discount</option>
<option value="10">10% discount</option>
<option value="20">20% discount</option>
</select>
</td>
<td>
<input type="text" name="cost" class="input140" value="100">
</td>
<td><input type="text" name="quantity" value="1"></td>
</tr>
<tr>
<td>Unit price after discount</td>
<td>Tax per unit</td>
<td>Total Price per unit</td>
<td>Végösszeg Total Price to pay per quantity</td>
</tr>
<tr>
<td><input type="text" name="price" value="100"></td>
<td><input type="text" name="ttaxes" value="0"></td>
<td><input type="text" name="total" value="100"></td>
<td><input type="text" name="totaltopay" value="100"></td>
</tr>
</table>
<script>
/* Elements */
var taxes = document.getElementsByName('taxes')[0];
var discount = document.getElementsByName('discount')[0];
var cost = document.getElementsByName('cost')[0];
var price = document.getElementsByName('price')[0];
var ttaxes = document.getElementsByName('ttaxes')[0];
var total = document.getElementsByName('total')[0];
var totaltopay = document.getElementsByName('totaltopay')[0];
var quantity = document.getElementsByName('quantity')[0];
quantity.addEventListener('keyup', updateInput);
/* Calculations */
function updateInput() {
price.value = cost.value - (cost.value * (discount.value / 100));
ttaxes.value = (price.value * (taxes.value / 100));
totaltopay.value = (price.value * quantity.value) + (taxes.value * quantity.value);
var sum = parseFloat(price.value) + parseFloat(ttaxes.value);
total.value = sum.toFixed(0);
var sum = (parseFloat(price.value) + parseFloat(ttaxes.value)) * quantity.value;
}
/* Event Listeners */
taxes.addEventListener('change', updateInput);
discount.addEventListener('change', updateInput);
cost.addEventListener('change', updateInput);
cost.addEventListener('keyup', updateInput);
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.