Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I have a very nice working form and almost everything is working. But I need the total taxes to be calculated and autofilled. Here is the code:

<table class="tableventa">
  <tr>
    <td style="width:200px;"></td>
    <td valign="top" style="width:900px;"><table class="table900">
      <tr>
        <td class="header150">Default unit price</td>
        <td class="header150">Type of sell</td>
        <td class="header150">Apply Taxes?</td>
        <td class="header150">Apply Discount?</td>
        <td class="header150">Quantity</td>
        </tr>
      <tr>
        <td class="header150small"><input type="text" class="input140" name="neto" id="neto" readonly value="1000"></td>
        <td class="header150small">

        <select class="select146" name="tipo" id="tipo">
  <option value="Simple" selected>Without Invoice</option>
  <option value="Boleta">Invoice 1</option>
   <option value="Factura">Invoice 2</option>
   </select>

   </td>
        <td class="header150small"><select class="select146" name="iva" id="iva">
  <option value="0" selected>Tax Free</option>
  <option value="19">YES 19%</option>

   </select></td>
        <td class="header150small">
         <select class="select146" name="descuento" id="descuento">
  <option value="0" selected>No Discount</option>
  <option value="2">2% Discount</option>
  <option value="3">3% Discount</option>
  <option value="5">5% Discount</option>
  <option value="8">8% Discount</option>
  <option value="10">10% Discount</option>
  <option value="15">15% Discount</option>
  <option value="20">20% Discount</option>
  <option value="30">30% Discount</option>
   <option value="50">50% Discount</option>

   </select>
   </td>
        <td class="header150small"><input type="text" class="input140" name="cantidad" id="cantidad" value="1"></td>
        </tr>
      <tr>
        <td class="header150">Price after discount</td>
        <td class="header150">Tax per unit</td>
        <td class="header150">Subtotal per unit</td>
        <td class="header150">Total Taxes</td>
        <td class="header150">Total to Pay</td>
        </tr>
      <tr>
        <td class="header150small"><input type="text" class="input140" name="preciodesc" id="preciodesc" readonly value="1000"></td>
   <td class="header150small"><input type="text" class="input140" name="ivaunitario" id="ivaunitario" readonly value="0"></td>
        <td class="header150small"><input type="text" class="input140" name="subtotal" id="subtotal" readonly value="1000"></td>
        <td class="header150small"><input type="text" class="input140" name="ivatotal" id="ivatotal" readonly value="0"></td>
        <td class="header150small"><input type="text" class="input140" name="total" id="total" readonly value="1000"></td>
        </tr>
      <tr>
        <td class="header150small">&nbsp;</td>
        <td class="header150small">&nbsp;</td>
        <td class="header150">Invlice Number</td>
        <td class="header150">&nbsp;</td>
        <td class="header150small">&nbsp;</td>
        </tr>
      <tr>
        <td class="header150small">&nbsp;</td>
        <td class="header150small">&nbsp;</td>
        <td class="header150small"><input type="text" class="input140" name="documento" id="documento" value=""></td>
        <td class="header150small"><input class="someter150" type="reset" value="Reset"></td>
        <td class="header150small"><input class="someter150" type="button" value="Sell now" onClick="document.productos.submit();"></td>
        </tr>
      </table></td>
  </tr>
</table>

<script>
var taxes    = document.getElementsByName('iva')[0];
var discount = document.getElementsByName('descuento')[0];
var cost     = document.getElementsByName('neto')[0];
var price    = document.getElementsByName('preciodesc')[0];
var ttaxes   = document.getElementsByName('ivaunitario')[0];
var total    = document.getElementsByName('subtotal')[0];
var quantity = document.getElementsByName('cantidad')[0];
var ttp      = document.getElementsByName('total')[0];

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);
  ttp.value = sum.toFixed(0) * quantity.value;
}

taxes.addEventListener('change', updateInput);
discount.addEventListener('change', updateInput);
cost.addEventListener('change', updateInput);
cost.addEventListener('keyup', updateInput);
quantity.addEventListener('keyup', updateInput);

</script>
</form>

here is a demo fiddle

https://fiddle.jshell.net/v6spxoqv/3/

And here is a image of what I need

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
154 views
Welcome To Ask or Share your Answers For Others

1 Answer

I think that would be required to declare the variable "Total Taxes" I think it is called "ivatotal" so (it next to the other variables):

var ivatot   = document.getElementsByName('ivatotal')[0];

After the operation is performed in the "updateInput" function (at the end of operations that already contains):

ivatot.value = parseFloat(ttaxes.value) * parseFloat(quantity.value);

Function "tipo_cambio" :

function tipo_cambio () {
var tipo = document.getElementsByName('tipo')[0];
if ( tipo.value == "Simple" )
     taxes.selectedIndex = 0;
else taxes.selectedIndex = 1;
updateInput();
}

Previous function must be called from this select:

<select class="select146" name="tipo" id="tipo" onchange="tipo_cambio()">

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...