Nelson Oko-oza Nelson Oko-oza - 4 months ago 23
jQuery Question

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

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

Answer

$("#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>

Comments