Question

我有以下代码来销售产品，如果我申请折扣有效，同样如果我申请税，所有单位价格（数量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/

我需要的图像示例

enter image description here

Answer 1

您忘记添加数量！

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/

Answer 2

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

HTML表单输入javascript autosum总价格支付

2 个答案: