How to get the value of input field when button clicked using jquery?

Question

I have the following table having dropdown section, input field and delete button in each row. I want to get the respective row of input field when I click a delete button of a row.

 $(document).on('click', '#delete-row', function() { var value = $('this').closest('td').find('input[name="price"]').val(); alert(value); // $(this).closest('tr').remove(); //return false; }); 

 <table class="table table-hover table-bordered" id="incomeId"> <thead> <tr> <th> sn </th> <th> Title of income </th> <th> Price </th> <th> Action </th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a> </td> </tr> <tr> <td>2</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a> </td> </tr> <tr> <td>3</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a> </td> </tr> <tr> <td>4</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash" id="delete-row" style="pointer:cursor;"></i></a> </td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td> Total:Rs <div class="total" id="total" style="display:inline;">45</div> </td> <td></td> </tr> </tfoot> </table> 

But it gives the undefined value. Please help me to find out the answer of this problem.

Answer 1

You should not have multiple elements with the same id, use class for this.

then use the following code and it works.

I've changed the following 4 things in your jQuery code:

'#delete-row' to '.delete-row' so the click is triggered by class.

$('this') to $(this) remove ' so the code know that this refers to the clicked object.

.closest('td') to .closest('tr') your need tr beucase your input is not inside the same td as the button

'input[name="price"]' to 'input[name="price\\[\\]"]' you use price[] in name.

$(document).on('click', '.delete-row', function() {
  var value = $(this).closest('tr').find('input[name="price\[\]"]').val();
  alert(value);
});

Working demo

 $(document).on('click', '.delete-row', function() { var value = $(this).closest('tr').find('input[name="price\\[\\]"]').val(); alert(value); $("#total").text(($("#total").text() - value)) }); $('input[name="price\\[\\]"]').change(function() { var sum = 0; $('input[name="price\\[\\]"]').each(function() { sum += Number($(this).val()); }); $("#total").text(sum) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover table-bordered" id="incomeId"> <thead> <tr> <th> sn </th> <th> Title of income </th> <th> Price </th> <th> Action </th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a> </td> </tr> <tr> <td>2</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a> </td> </tr> <tr> <td>3</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> <option value="Hotel Malin -Best Hotel In the Butwal"> Hotel Malin -Best Hotel In the Butwal</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a> </td> </tr> <tr> <td>4</td> <td> <select name="income-title[]" id="inputID" class="form-control"> <option value="select"> -- Select One --</option> <option value="hostel fee"> hostel fee</option> <option value="admission fee"> admission fee</option> </select> </td> <td class="price"> <input type="text" name="price[]" autocomplete="off" id="income_price" class="form-control income" value="" title="" required="required"> </td> <td> <a href="#"><i class="fa fa-trash delete-row" id="" style="pointer:cursor;">delete</i></a> </td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>Total:Rs <div class="total" id="total" style="display:inline;">45</div> </td> <td></td> </tr> </tfoot> </table> 

Answer 2

$('this')

Should be

$(this)

Otherwise you're looking for a tag called this, you're passing in the string not the context

Edit: also noticed you're only going to the closest td not the closet tr, as a result you won't find an input tag within the td since it's withing a sibling td

Answer 3

In addition to Shard's answer, you need to revisit your use of id="delete-row" on each row. An id should only occur once on a page, so a class should be used instead.

Answer 4

Change your script as below.

$(document).on('click', '#delete-row', function(e) {
  e.preventDefault();
  var value = $(this).parent().prev().find('input[name="price"]').val();
  alert(value);
});