How to set simultanious onkeyup function in jquery-CodePudding

Onkeyup function in jquery continuously

I can do onkeyup function first inputfield in jquery but i have no idea to get final answer using onkeyup function. please help to fix this problem. Here my coading anybody know solution please help: my html code:

$("#quantity-1,#price-1").keyup(function () { $('#total-1').val($('#price-1').val() * $('#quantity-1').val()); });
$("#quantity-2,#price-2").keyup(function () { $('#total-2').val($('#price-2').val() * $('#quantity-2').val()); });
$("#quantity-3,#price-3").keyup(function () { $('#total-3').val($('#price-3').val() * $('#quantity-3').val()); });
$("#quantity-4,#price-4").keyup(function () { $('#total-4').val($('#price-4').val() * $('#quantity-4').val()); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td>amount 1:<input type="text" id="price-1" value="15" readonly=""></td><td>qunatity 1:<input type="text" id="quantity-1"></td><td> total 1:<input type="text" name"amt" class="total" id="total-1" readonly=""></td></tr>
<tr><td>amount 2:<input type="text" id="price-2" value="14" readonly=""></td><td>qunatity 2:<input type="text" id="quantity-2"></td><td> total 2:<input type="text" name"amt" id="total-2" class="total" readonly=""></td></tr>
<tr><td>amount 3:<input type="text" id="price-3" value="13" readonly=""></td><td>qunatity 3:<input type="text" id="quantity-3"></td><td> total 3:<input type="text" name"amt" id="total-3" class="total" readonly=""></td></tr>
<tr><td>amount 4:<input type="text" id="price-4" value="12" readonly=""></td><td>qunatity 4:<input type="text" id="quantity-4"></td><td> total 4:<input type="text" name"amt" id="total-4" class="total" readonly=""></td></tr>
<tr><td></td>                                               <td></td>                                             <td>All total:<input type="text" name"amt" id="totalvalue"></td></tr>
</table>

https://codepen.io/selvaa369/pen/MWoNwVB

CodePudding user response：

I assume that you're attempting to fill out the 'All total' field? If so you can achieve it by simplifying your code.

Firstly, remove all the incremental id attributes you've put on the row elements, such as #price-1 and #quantity-1. Replace them with common classes instead.

From there you can use the input event, as this also fires when content is pasted in or added using the mouse, to retrieve all fields in the row using DOM traversal and calculate the total. The benefit of this approach is that the same HTML block will work for an infinite number of rows.

Finally you can then loop through all the .total elements to get the sum total of all rows and put it in the 'All total' field.

With all that said, try this:

let calcRowTotal = $row => {
  let price = $row.find('.price').val() || 0;
  let quantity = $row.find('.quantity').val() || 0;
  $row.find('.total').val(price * quantity);
}

let calcTotal = () => {
  let total = 0;
  $('.total').each((i, el) => total  = parseFloat(el.value || 0));
  $('#totalvalue').val(total);
}

$('.quantity, .price').on('input', e => {
  let $row = $(e.target).closest('tr');
  calcRowTotal($row);
  calcTotal();
});

input { width: 30px; } /* just to make this demo fit in snippet window */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td>amount 1: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 1: <input type="text" class="quantity"></td>
    <td>total 1: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 2: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 2: <input type="text" class="quantity"></td>
    <td>total 2: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 3: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 3: <input type="text" class="quantity"></td>
    <td>total 3: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 4: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 4: <input type="text" class="quantity"></td>
    <td>total 4: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>All total: <input type="text" name "amt" id="totalvalue"></td>
  </tr>
</table>