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.

Carsten Løvbo Andersen · Accepted Answer · 2017-10-12 05:58:11Z

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>

Sir can you say me about how to get the value of total when i click this delete row id ?
I have the total price value in total cell. When i clicked in delete button , i want to delete the respective value form the total value. Can you give me the best idea about this . Your help is mostly appreciated.
@DeepakGautam look at the snippet now and tell me if this is what you want
Thank you so much @carsten .This is what i really want. Can we connect to each other in social site like linkedln or other. I want to connect with you. I want more help form u in near future.

Shardj · Accepted Answer · 2017-10-11 11:06:45Z

1

$('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

answered Oct 11, 2017 at 11:06

Shardj

1,9733 gold badges19 silver badges47 bronze badges

Comments

athms · Accepted Answer · 2017-10-11 11:07:52Z

1

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.

answered Oct 11, 2017 at 11:07

athms

9585 silver badges8 bronze badges

2 Comments

Milan Chheda Over a year ago

That should be added as a comment and not an answer.

athms Over a year ago

I see Carsten has combined our answers into 1.

PraveenKumar · Accepted Answer · 2017-10-11 11:16:56Z

0

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);
});

answered Oct 11, 2017 at 11:16

PraveenKumar

1,86113 silver badges19 bronze badges

1 Comment

Carsten Løvbo Andersen Over a year ago

You still have the problem with multiple id's

Collectives™ on Stack Overflow

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

4 Answers 4

6 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related