CODEWITHSUNDEEP
jqueryhtml
Ajitsree
Ajitsree

Reputation: 37

jquery Calculating price and manual discount in Textbox

I need to build a html page with Calculation in jquery. which should come automatically the below.

QTY x Price = Amount (Automatic) Total Amount (Automatic) Total amount - Discount (manually) = Net Amount

Pls find below html code and let me know the simplest way to do this. enter image description here

 <table width="300" border="0" cellspacing="0" cellpadding="0">
      <tbody>
           <tr>

            <td>Item Name</td>
            <td>Qty</td>
            <td>Price(Per/Kg)</td>
            <td>Amount</td>
          </tr>

          <tr>
    <td>Test Item 1</td>
            <td><input name="input" type="text" onChange="" /></td>
            <td><input name="input" type="text" /></td>
            <td><input name="input" type="text" /></td>
          </tr>
      </tbody>
    </table>
    <p>&nbsp;</p>
    <table width="300" border="0">
      <tr>
        <td width="100"><strong>Total Amount</strong></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><strong>Discount</strong></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><strong>Net Amount</strong></td>
        <td>&nbsp;</td>
      </tr>
    </table>

Upvotes: 0

Views: 2438

Answers (4)

styopdev
styopdev

Reputation: 2664

Generic solution with multiple rows.

jQuery:

var totalAmount = 0;
$('.quantity, .price').keyup(function() {
  totalAmount = 0;
  var netAmount = 0;
  var discount = 0;

  $(".amount-row").each(function(index, row) { 
    var quantity = $(row).find('.quantity').val();
    var price = $(row).find('.price').val();

    var amount = quantity * price;
    $(row).find('.amount').val(amount);
    totalAmount += amount;
  });

  netAmount = totalAmount;
  discount = $("#discount").val();
  if (discount) {
    netAmount = totalAmount - discount;
  }

  $("#total-amount").html(totalAmount)
  $("#net-amount").html(netAmount)
});


$("#discount").keyup(function() {
    var discount = $("#discount").val();
    $("#net-amount").html(totalAmount - discount);
});

Html:

<table width="300" border="0" cellspacing="0" cellpadding="0">
      <tbody>
           <tr>

            <td>Item Name</td>
            <td>Qty</td>
            <td>Price(Per/Kg)</td>
            <td>Amount</td>
          </tr>

          <tr class="amount-row">
    <td>Test Item 1</td>
            <td><input class="quantity"  name="input" type="text" /></td>
            <td><input class="price" name="input" type="text" /></td>
            <td><input class="amount" name="input" type="text" /></td>
          </tr>
                    <tr class="amount-row">
    <td>Test Item 2</td>
            <td><input class="quantity"  name="input" type="text" /></td>
            <td><input class="price" name="input" type="text" /></td>
            <td><input class="amount" name="input" type="text" /></td>
          </tr>
      </tbody>
    </table>
    <p>&nbsp;</p>
    <table width="300" border="0">
      <tr>
        <td width="100"><strong>Total Amount</strong></td>
        <td id="total-amount">&nbsp;</td>
      </tr>
      <tr>
        <td><strong>Discount</strong></td>
        <td><input type="text" id="discount"></td>
      </tr>
      <tr>
        <td><strong>Net Amount</strong></td>
        <td id="net-amount">&nbsp;</td>
      </tr>
    </table>

Please find working fiddle here: https://jsfiddle.net/9egno7ge/3/

Upvotes: 1

Saeed
Saeed

Reputation: 5488

Use this function. I don't know how you count discount. You can add that with a bit change in my codes.

function calculateTotal() {
  // --------------------
  $("#target tr").each(function() {
    if ($(this).children("td").length) {
      $($($(this).children("td")[3]).children("input")[0]).val(

        (($($($(this).children("td")[2]).children("input")[0]).val()) ? Number($($($(this).children("td")[2]).children("input")[0]).val()) : 0) *
        (($($($(this).children("td")[1]).children("input")[0]).val()) ? Number($($($(this).children("td")[1]).children("input")[0]).val()) : 0)

      )
    }
  });

  // --------------------
  var totalAm = 0;
  $("input[name='amount']").each(function() {
    totalAm += $(this).val() ? Number($(this).val()) : 0;
  });
  $("td[name='t_am']").text(totalAm);
  // --------------------
  var discount = $("input[name='discount']").val() ? Number($("input[name='discount']").val()) : 0;
  $("td[name='tn_am']").text($("td[name='t_am']").text() - discount);
}

$("input").on('change', function() {
  calculateTotal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="asdf" width="40%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>Client Code:</td>
    <td><input name="" type="text" /></td>
    <td align="right">Client Name:</td>
    <td><input type="text" name="fname"></td>
  </tr>
  <tr>
    <td>Address:</td>
    <td><input name="" type="text" /></td>
    <td align="right">LPO No:</td>
    <td><input name="" type="text" /></td>
  </tr>
</table>


<table id="target" width="300" border="0">
  <tbody>
    <tr>

      <td>Item Name</td>
      <td>Qty</td>
      <td>Price(Per/Kg)</td>
      <td>Amount</td>
    </tr>

    <tr>
      <td>Test Item 1</td>
      <td><input name="qty" type="text" /></td>
      <td><input name="price" type="text" /></td>
      <td><input name="amount" disabled type="text" /></td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<table width="300" border="0">
  <tr>
    <td width="100"><strong>Total Amount</strong></td>
    <td name="t_am">&nbsp;</td>
  </tr>
  <tr>
    <td><strong>Discount</strong></td>
    <td><input type="number" name="discount" id="discount"></input>
    </td>
  </tr>
  <tr>
    <td><strong>Net Amount</strong></td>
    <td name="tn_am">&nbsp;</td>
  </tr>
</table>

Upvotes: 1

Shridhar Sharma
Shridhar Sharma

Reputation: 2387

$('#items-table').on('input', '.qty input, .price input', function() {

  var row = $(this).parents('tr');

  var qty = row.find('.qty input').val();
  var price = row.find('.price input').val();
  row.find('.amt').text(qty * price);

  var rows = $(this).parents('table').find('tr:not(:first-child)');

  var total_amt = 0;
  rows.each(function() {
    var amt = $(this).find('.amt').text() || 0;
    total_amt += parseFloat(amt)
  })

  var calc_table = $('#total-calc');

  var discount = calc_table.find('.discount input').val() || 0;

  var net_amt = total_amt - discount;
  
  calc_table.find('.total-amt').text(total_amt);
  calc_table.find('.net-amt').text(net_amt);


})

$('#total-calc .discount input').on('input', function(){
  var calc_table = $('#total-calc');
  var total_amt = calc_table.find('.total-amt').text() || 0;
  var discount = $(this).val() || 0;
  var net_amt = total_amt - discount;
  calc_table.find('.net-amt').text(net_amt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="items-table" width="300" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>

      <td>Item Name</td>
      <td>Qty</td>
      <td>Price(Per/Kg)</td>
      <td>Amount</td>
    </tr>

    <tr>
      <td>Test Item 1</td>
      <td class="qty"><input name="input" type="text" onChange="" /></td>
      <td class="price"><input name="input" type="text" /></td>
      <td class="amt"><input name="input" type="text" /></td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<table id="total-calc" width="300" border="0">
  <tr>
    <td width="100"><strong>Total Amount</strong></td>
    <td class="total-amt">&nbsp;</td>
  </tr>
  <tr>
    <td><strong>Discount</strong></td>
    <td class="discount"><input name="input" type="text" /></td>
  </tr>
  <tr>
    <td><strong>Net Amount</strong></td>
    <td class="net-amt">&nbsp;</td>
  </tr>
</table>

Upvotes: 1

Tom
Tom

Reputation: 1030

You need to give your fields id's. Let's use the following id's for demo purposes.

<input type="text" name="demoOne" id="demoOne">
<input type="text" name="demoTwo" id="demoTwo">
<input type="text" name="demoResult" id="demoResult">

For the jQuery we could use something pretty basic as following We create 2 variables that get the value of the fields and simply give the result field the result of those 2 fiels calculated.

<script>
$('#demoTwo #demoOne').keyup(function(){
var demoOne;
var demoTwo;
demoOne = parseFloat($('#demoOne').val());
demoTwo = parseFloat($('#demoTwo').val());

var demoResult = demoOne + demoTwo;
$('#demoResult').val(demoResult.toFixed(2));


});
</script>

Upvotes: 1

Related Questions