CODEWITHSUNDEEP
jquery
xrcwrn
xrcwrn

Reputation: 5327

Adding tax total based on tax name for each type of tax

I have created a invoice page like below format

Item name desc discount unitprice tax1 tax2 price

At below there is 

 subTotal   540
   Vat @5%  550
   Tax2@12% 430
   Tax3@13% 543
    ....
    total

Here each item have maximum two taxes I want to display tax based on tax name and for each item then finally sum of all taxes total

For tax 1 I'm using:

<span id="item_tax1">
   <input type="text" name="tax1name" value="VAT" class="tax1name tax input-mini"/> 
   <input type="hidden" name="tax1value" value="5" class="tax1value input-mini"/>
   <input type="hidden" name="tax1"  value="44" class="tax1 input-mini"/> 
</span>

For tax 2 I'm using:

<span id="item_tax2">
   <input type="text" name="tax1name" value="Service" class="tax2name tax input-mini"/> 
   <input type="hidden" name="tax2value" value="4" cssClass="tax2value input-mini"/>
   <input type="hidden" name="tax2"  value="45" class="tax2 input-mini"/> 
</span>

I am calculating tax for tax 1 and tax 2 and storing it to <input type="hidden" name="tax1" class="tax1 input-mini"/> and for tax 2 at class="tax2"

Now I want to add all taxes price according to tax name as shown above. How to achieve this?

Upvotes: 0

Views: 142

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29317

var taxes = {},
    total = 0;

$('.tax').each(function(){
  var elm = $(this),
      name = elm.val(),
      amount = elm.next().val();

  if (!taxes[name]) {
    taxes[name] = 0;
  }
  taxes[name] += parseFloat(amount);
  total += parseFloat(amount)
});

for (var tax in taxes) {
  $('<div />').html(tax + ': ' + taxes[tax]).appendTo('#result');
}

$('#result').append('total: ' + total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      VAT1
    </td>
    <td>
      VAT2
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="tax1name" value="VAT" class="tax1name tax input-mini"/> 
      <input type="text" name="VAT1" value="10" cssClass="tax1value input-mini"/> 
    </td>
    <td>
      <input type="text" name="tax2name" value="serviceTax" class="tax1name tax input-mini"/> 
      <input type="text" name="VAT2" value="23" cssClass="tax2value input-mini"/> 
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="tax1name" value="education" class="tax1name tax input-mini"/> 
      <input type="text" name="VAT1" value="42" cssClass="tax1value input-mini"/> 
    </td>
    <td>
      <input type="text" name="tax2name" value="VAT" class="tax1name tax input-mini"/> 
      <input type="text" name="VAT2" value="55" cssClass="tax2value input-mini"/> 
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="tax1name" value="serviceTax" class="tax1name tax input-mini"/> 
      <input type="text" name="VAT1" value="68" cssClass="tax1value input-mini"/> 
    </td>
    <td>
      <input type="text" name="tax2name" value="education" class="tax1name tax input-mini"/> 
      <input type="text" name="VAT2" value="66" cssClass="tax2value input-mini"/> 
    </td>
  </tr>
</table>

<div id="result"></div>

Upvotes: 1

Related Questions