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:-

I made you a snippet. Where do you want to execute the function()? — mplungjan
– mplungjan, Commented Feb 3, 2021 at 11:54
<input type="text" data-field-name="one_payment" name="one_payment[]" id="one_payment_1" class="form-control input-sm one_payment "> when mouse leave from this field — Zia Yamin
– Zia Yamin, Commented Feb 3, 2021 at 11:56

mplungjan · Accepted Answer · 2021-02-03 12:16:39Z

2

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>

edited Feb 3, 2021 at 12:16

answered Feb 3, 2021 at 12:00

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

4 Comments

Zia Yamin Over a year ago

Does it work, if there be multi total_payment and get their value and then set the result of multiplication of them to all_total_payment?

Zia Yamin Over a year ago

I added a picture to my code, as it looks id add new rows by javascript in my table, it not work for second-row fields and also for third one.

mplungjan Over a year ago

Don't add a picture, add another row so I can use that. You should not even need IDs

mplungjan Over a year ago

Anyway, I changed to $("#autocomplete_table").on("input", ":input", function() { so now it will work on all rows

Collectives™ on Stack Overflow

how to get the value of input field in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related