How to sum values from form text field array using jquery onlick function

Question

I am new to jQuery and javascript, I need a help on how to do computation on form text field in an array. See below sample code;

<head lang="en">
  <meta chartaxt="UTF-8">
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <title>Sample salary computation</title>

</head>

<body>

  <form method="POST" name="regis" id="regis">
    <table align="center" border="1" width="200">
      <tr>
        <th>Staff ID</th>
        <th>Salary</th>
        <th>Total Tax</th>
        <th>Total Net Pay</th>
      </tr>

      <!--Staff 1-->
      <tr data-id="STAFF/2016/001">
        <td>
          <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
        </td>
        <td>
          <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
        </td>
        <td>
          <input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
        </td>
        <td>
          <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
        </td>
      </tr>

      <tr data-id="STAFF/2016/002">
        <td>
          <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
        </td>
        <td>
          <input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
        </td>
        <td>
          <input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
        </td>
        <td>
          <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
        </td>
      </tr>


      <tr data-id="STAFF/2016/003">
        <td>
          <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
        </td>
        <td>
          <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
        </td>
        <td>
          <input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
        </td>
        <td>
          <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
        </td>
      </tr>
    </table>
  </form>
</body>

I want a jquery script that can sum total = (salary + tax) for each staff using onclick button

larz · Accepted Answer · 2016-07-22 20:59:50Z

1

$("#submit").click(function() {
  $("tr").each(function() {
    if ($(this).find(".salary")) {
      var salary = parseInt($(this).find(".salary").val(), 10)
      var tax = parseInt($(this).find(".tax").val(), 10)
      $(this).find(".total").val(salary + tax)
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="regis" id="regis">
  <table align="center" border="1" width="200">
    <tr>
      <th>Staff ID</th>
      <th>Salary</th>
      <th>Total Tax</th>
      <th>Total Net Pay</th>


    </tr>

    <!--Staff 1-->
    <tr data-id="STAFF/2016/001">
      <td>
        <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
      </td>
      <td>
        <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
      </td>
      <td>
        <input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
      </td>
      <td>
        <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
      </td>
    </tr>


    <tr data-id="STAFF/2016/002">
      <td>
        <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
      </td>
      <td>
        <input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
      </td>
      <td>
        <input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
      </td>
      <td>
        <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
      </td>
    </tr>


    <tr data-id="STAFF/2016/003">
      <td>
        <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
      </td>
      <td>
        <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
      </td>
      <td>
        <input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
      </td>
      <td>
        <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
      </td>
    </tr>

  </table>
  <button id="submit" type="button">Submit</button>

edited Jul 22, 2016 at 20:59

answered Jul 22, 2016 at 0:39

larz

5,7662 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nelson Oko-oza Over a year ago

Hi Harz, I just run the code above, once i click on submit button alert box displays undefined and the total does not show any result

larz Over a year ago

@NelsonOko-oza Are there any errors in your console? I'm confused because it works fine for me.

Nelson Oko-oza Over a year ago

@arz 4 , The result is not showing inside the total text field. I actually wanted the sum of tax and salary to appear inside the total text field

larz Over a year ago

You mean inside the "Total Net Pay" field or the "Total Tax" field?

Nelson Oko-oza Over a year ago

Yes @arz 4, I want the result to appear inside "Total Net Pay" field

|

LF-DevJourney · Accepted Answer · 2016-07-22 00:26:19Z

0

You can use selector to get or set the val with iQuery. Something like this

$("button").click(function(){
    var total = $("input[name=salary]").val()+$("input[name=tax]").val();
    $("input[name=total]").val(tatal);
  });

answered Jul 22, 2016 at 0:26

LF-DevJourney

28.7k30 gold badges170 silver badges321 bronze badges

Comments

Red Mercury · Accepted Answer · 2016-07-22 00:40:58Z

0

Here is one solution:

http://codepen.io/tryggvigy/pen/BzAqGR

var sums = []
$('input[type=button]').click(function() {
  var salaries = $('.salary')
    .toArray()
    .map(function(salary) { return salary.value })
  var taxes = $('.tax')
    .toArray()
    .map(function(tax) { return tax.value})
  sums = salaries.map(function(salary, i) {
    return parseInt(salary) + parseInt(taxes[i])
  })
  alert(document.sums)
})

answered Jul 22, 2016 at 0:40

Red Mercury

4,3703 gold badges29 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to sum values from form text field array using jquery onlick function

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related