how to get the value of input field in javascript

Question

I have a problem with getting the value of an input feild that is inside a table , I want to get the value of the field that is class is number and one_payment and multiply them, then set it to the field that it's class is total_payment . then set the multiplication of the total_payment fields to all_total_payment field.

 function handleTotalRow() { var tr = $(this).parent().parent(); var amount = tr.find('.number').val(); var price = tr.find('.one_payment').val(); alert(amount) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered table-striped autocomplete_table" style="margin-bottom: 8px;" id="autocomplete_table"> <thead> <tr> <td>حذف</td> <th>نام کتاب</th> <th>ویرایش</th> <th>تعداد جلد</th> <th>قیمت فی</th> <th>مجموعه</th> </tr> </thead> <tbody> <tr id="row_1"> <td> <button type="button" id="delete_1" class=" btn btn-danger btn-sm remove delete_row"><i class="glyphicon glyphicon-remove-sign"></i></button> </td> <td> <input type="text" data-field-name="book_name" name="book_name[]" id="book_name_1" class="form-control input-sm autocomplete_txt " autocomplete="off"> </td> <td><input type="text" data-field-name="edition" required name="edition[]" id="edition_1" class="form-control input-sm edition "></td> <td> <input type="text" data-field-name="number" name="number[]" id="number_1" class="form-control input-sm number"> </td> <td> <input type="text" data-field-name="one_payment" name="one_payment[]" id="one_payment_1" class="form-control input-sm one_payment " onmouseleave=" handleTotalRow() "> </td> <td> <input type="text" data-field-name="total_payment" name="total_payment[]" id="total_payment_1" class="form-control input-sm total_payment"> </td> </tr> </tbody> <tfoot> <tr> <td style="border: none;"> <button type="button" class=" btn btn-primary btn-sm " title="اضافه نمودن سطر جدید" id="addNew"> <i class="glyphicon glyphicon-plus-sign"></i> </button> </td> <td style="border: none;"> <div class="form-group required" id="form-all_total_payment-error"> <label>قیمت کل</label> <input type="text" name="all_total_payment" id="all_total_payment" class="form-control required" title="قیمت پرداختی" value="0"> <span id="all_total_payment-error" class="help-block"></span> </div> </td> </tr> </tfoot> </table>

this is the picture:-

Answer 1

Delegate:

 $(function() { $("#autocomplete_table").on("input", ":input", function() { const $tr = $(this).closest("tr"); const amount = $('[name^=number]', $tr).val(); const price = $('[name^=one_payment]', $tr).val(); console.log(amount, price) $("[name^=total_payment]", $tr).val((amount * price).toFixed(2)) const grandTotal = $tr.closest("tbody").find("[id^=row]").map(function() { return +$("[name^=total_payment]", this).val() }).get().reduce((a, b) => a + b) $("#all_total_payment").val(grandTotal.toFixed(2)) }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered table-striped autocomplete_table" style="margin-bottom: 8px;" id="autocomplete_table"> <thead> <tr> <td>حذف</td> <th>نام کتاب</th> <th>ویرایش</th> <th>تعداد جلد</th> <th>قیمت فی</th> <th>مجموعه</th> </tr> </thead> <tbody> <tr id="row_1"> <td> <button type="button" id="delete_1" class=" btn btn-danger btn-sm remove delete_row"><i class="glyphicon glyphicon-remove-sign"></i></button> </td> <td> <input type="text" data-field-name="book_name" name="book_name[]" id="book_name_1" class="form-control input-sm autocomplete_txt " autocomplete="off"> </td> <td><input type="text" data-field-name="edition" required name="edition[]" id="edition_1" class="form-control input-sm edition "></td> <td> <input type="text" data-field-name="number" name="number[]" id="number_1" class="form-control input-sm number"> </td> <td> <input type="text" data-field-name="one_payment" name="one_payment[]" id="one_payment_1" class="form-control input-sm one_payment "> </td> <td> <input type="text" data-field-name="total_payment" name="total_payment[]" id="total_payment_1" class="form-control input-sm total_payment"> </td> </tr> </tbody> <tfoot> <tr> <td style="border: none;"> <button type="button" class=" btn btn-primary btn-sm " title="اضافه نمودن سطر جدید" id="addNew"> <i class="glyphicon glyphicon-plus-sign"></i> </button> </td> <td style="border: none;"> <div class="form-group required" id="form-all_total_payment-error"> <label>قیمت کل</label> <input type="text" name="all_total_payment" id="all_total_payment" class="form-control required" title="قیمت پرداختی" value="0"> <span id="all_total_payment-error" class="help-block"></span> </div> </td> </tr> </tfoot> </table>