CODEWITHSUNDEEP
javascriptjqueryhtml
Jay Arya
Jay Arya

Reputation: 51

How to add table field values and show it in an input when we tick on the checkbox?

The question is when I tick on the checkbox I want the value of the second span in an input like subtotal, for example, there are two values like 500 in the first row and 200 in the second row , When I tick on first row table checkbox the value should of 500 should be shown in an input with id subtotal but when I also tic on the second checkbox the value should be added in 500 and the total value should be shown in subtotal id like 700, also the tick untick problem is occurring.

I have a table in which some fields are given like service, amount, tax and action are given, The code is below: 

<!DOCTYPE html>
<html>
<head>
  <title>table</title>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
    <tbody>
      <tr>
        <th scope="col">Service </th>
        <th scope="col">Amount</th>
        <th scope="col">tax</th>
        <th scope="col">Action</th>
      </tr>
      <tr>
        <td>
          <span>Subscription Charges</span>
        </td>
        <td>
          <span>500.00</span>
        </td>
        <td>
          <span>90.00</span>
        </td>
        <td>
          <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
        </td>
      </tr>
      <tr>
        <td>
          <span>registration fees</span>
        </td>
        <td>
          <span>200.00</span>
        </td>
        <td>
          <span>80.00</span>
        </td>
        <td>
          <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="text" name="subtotal" id="subtotal">
  <input type="text" name="grandtotal" id="grandtotal">
  <script>
    $(document).ready(function() {
      $(document).on("change", ".tot_amount", function() {
        var total = 0.00;
        if (this.checked) {
          var subtotal = $(this).closest("tr").find('td').eq(1).find('span').text();
          total += parseFloat($(subtotal).val());
          $('#subtotal').val(total);
        }
      });
    });
  </script>
</body>
</html>

Upvotes: 2

Views: 148

Answers (2)

Dimple
Dimple

Reputation: 178

I hope this is working as you expected.

var total =0.00;
$(document).ready(function(){
    $(document).on("change",".tot_amount",function(){
        var subtotal = $(this).closest("tr").find('td').eq(1).find('span').text();
        if (this.checked){ 
            total +=parseFloat(subtotal);
        } else {
            total -=parseFloat(subtotal);
        }
        $('#subtotal').val(total);
    });
});

Happy Coding :)

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337626

Your main issue is because subtotal is a string containing the price selected, therefore converting that to a jQuery selector in $(subtotal) is not going to do anything useful.

You also only update the subtotal when a checkbox is checked. Your logic does not subtract the value when an item is unchecked.

To fix both of these issues you can calculate the value of all rows when any checkbox is changed, like this:

$(document).ready(function() {
  $(document).on("change", ".tot_amount", function() {
    var total = 0;
    $('.tot_amount:checked').each(function() {
      total += parseFloat($(this).closest('tr').find('td:eq(1) span').text());
    });
    $('#subtotal').val(total);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <th scope="col">Service </th>
      <th scope="col">Amount</th>
      <th scope="col">tax</th>
      <th scope="col">Action</th>
    </tr>
    <tr>
      <td>
        <span>Subscription Charges</span>
      </td>
      <td>
        <span>500.00</span>
      </td>
      <td>
        <span>90.00</span>
      </td>
      <td>
        <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
      </td>
    </tr>
    <tr>
      <td>
        <span>registration fees</span>
      </td>
      <td>
        <span>200.00</span>
      </td>
      <td>
        <span>80.00</span>
      </td>
      <td>
        <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
      </td>
    </tr>
  </tbody>
</table>

<input type="text" name="subtotal" id="subtotal">
<input type="text" name="grandtotal" id="grandtotal">

Upvotes: 2

Related Questions