HTML表单输入javascript autosum总价支付 [英] HTML form input javascript autosum total price to pay

问题描述

我有以下代码销售产品，如果我应用折扣，它的工作方式相同，如果我使用税费，则每个单位的所有价格（数量为1）都有效，但如果我更改数量，则要支付的总价格不起作用

我需要的是自动填写以后保存到mysql的后续字段中：

 单位默认价格（来自mysql）=正在工作
每单位工作=应付工资
每单位应用折扣=工作
折扣和税后折扣每单位价格=工作
  

如果将数量从1更改为2，则支付的总价格3等等=不工作
这必须通过多重价格自动填充以支付每个单位的税后数量=不工作

这里是代码

 < table width =339border =0cellpadding =0> 
< tr> 
< td width =98>缴税？< / td> 
< td width =115>进行折扣？< / td> 
< td width =118>默认单价< / td> 
< td>数量< / td> 
< / tr> 
< tr> 
< td> 
 < option value =0selected> no taxes< / option> 
< option value =19> 19％tax< / option> 
< / select> 
< / td> 
< td> 
 < option value =0selected> no discount< / option> 
< option value =5> 5％折扣< / option> 
< option value =10> 10％折扣< / option> 
< option value =20> 20％折扣< / option> 
< / select> 
< / td> 
< td> 
< input type =textname =costclass =input140value =1000> 
< / td> 
< td>< input type =textname =quantityvalue =1>< / td> 
< / tr> 
< tr> 
< td>折扣后的单价< / td> 
< td>每单位税金< / td> 
< td>每单位总价< / td> 
< td>按数量支付的总价格< / td> 
< / tr> 
< tr> 
< td>< input type =textname =pricevalue =1000>< / td> 
< td>< input type =textname =ttaxesvalue =0>< / td> 
< td>< input type =textname =totalvalue =1000>< / td> 
< td>< input type =textname =totaltopayvalue =1000>< / td> 
< / tr> 
< / table>< script> 
 / ** 
 *元素
 * / 
 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]; 
 
 $ b / ** 
 *计算
 * / 
函数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）; 
 
 
 $ b / ** 
 *事件监听器
 * / 
 taxes.addEventListener（'change'，updateInput）; 
 discount.addEventListener（'change'，updateInput）; 
 cost.addEventListener（'change'，updateInput）; 
 cost.addEventListener（'keyup'，updateInput）; 
< / script> 
  

这里是演示小提琴

< a href =https://fiddle.jshell.net/63dkvgs5/ =nofollow noreferrer> https://fiddle.jshell.net/63dkvgs5/

image我需要的示例

解决方案

您忘记添加数量！
$ b

  var quantity = document.getElementsByName（'quantity'）[0]; 
 quantity.addEventListener（'keyup'，updateInput）; 
  

并更新计算：

  var sum =（parseFloat（price.value）+ parseFloat（ttaxes.value））* quantity.value; 
  

小提琴： https://fiddle.jshell.net/praveenscience/v6spxoqv/

I have the follow code to sell a product, if I apply discount it works, same if I apply taxes, all prices per unit (quantity 1) is working, but the total price to pay if I change quantity is not working

What I need is to autofill to later save to mysql the follow fields:

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

total price to pay if I change quantity from 1 to 2 o 3 etc = not working this must be autofilled by multiplicate price to pay after taxes per unit by quantity = not working

here is the code

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

Here is the demo Fiddle

https://fiddle.jshell.net/63dkvgs5/

image example of what I need

解决方案

You forgot to add quantity!

var quantity = document.getElementsByName('quantity')[0];
quantity.addEventListener('keyup', updateInput);

And update the calculation:

var sum = (parseFloat(price.value) + parseFloat(ttaxes.value)) * quantity.value;

Fiddle: https://fiddle.jshell.net/praveenscience/v6spxoqv/

这篇关于HTML表单输入javascript autosum总价支付的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！