Select <input> in a specific <td> element using jQuery

Question

How can I select an input within a td? Here is my tr:

<tr>
    <td>
        <input type="text" class="form-control" name="first_name" placeholder="First Name">
    </td>
    <td>
        <input type="text" class="form-control" name="last_name" placeholder="Last Name">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_email" placeholder="Email">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_phone_num" placeholder="Phone #">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_notes" placeholder="Notes">
    </td>
    <td>
        <button type="" class="btn btn-success add_contact">Add Contact</button>
    </td>
</tr>

My JavaScript:

var context = {
    first_name: $(this).closest('tr').find('input').eq(0).html(),
    last_name: $(this).closest('tr').find('input').eq(1).html(),
    contact_email: $(this).closest('tr').find('input').eq(2).html(),
    contact_phone_num: $(this).closest('tr').find('input').eq(3).html(),
    contact_notes: $(this).closest('tr').find('input').eq(4).html()
};

This returns empty when I log context.

this refers to ??????????

Pranav C Balan
– Pranav C Balan

2016-02-17 04:50:11 +00:00
Commented Feb 17, 2016 at 4:50 — Pranav C Balan
– Pranav C Balan, Commented Feb 17, 2016 at 4:50
Just closest('tr input').eq(INDEX)

Rayon
– Rayon

2016-02-17 04:54:36 +00:00
Commented Feb 17, 2016 at 4:54 — Rayon
– Rayon, Commented Feb 17, 2016 at 4:54
You need to use val() not html()

Pranav C Balan
– Pranav C Balan

2016-02-17 04:54:40 +00:00
Commented Feb 17, 2016 at 4:54 — Pranav C Balan
– Pranav C Balan, Commented Feb 17, 2016 at 4:54

Tushar · Accepted Answer · 2016-02-17 04:55:32Z

8

There are two problems in your code.

<input> elements don't have innerHTML, you can use val() to get the value of an input.
To select the nth <td> element, you need to use eq(index) on the td element and not on the <input>.

Assuming this refers to the any element inside <tr>.

$(this).closest('tr').find('input').eq(0).html()

should be

$(this).closest('tr').find('td').eq(0).find('input').val()
                     ^^^^^^^^^^^^^^^^^                    : Get the 0 index `td`
                                       ^^^^^^^^^^^^^      : select input inside it
                                                     ^^^^ : Get the value of input

edited Feb 17, 2016 at 4:55

answered Feb 17, 2016 at 4:50

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

Comments

Bhojendra Rauniyar · Accepted Answer · 2016-02-17 04:51:13Z

0

The inputs are not equivalent to use eq(0), eq(1), etc. because all inputs are the first-child elements inside the td elements.

You should be doing like this:

$(this).closest('td').eq(0).find('input').val();
$(this).closest('td').eq(1).find('input').val();
$(this).closest('td').eq(2) //first find nth element from td
  .find('input').val()//then find its input & get the value.

I am unsure if the closeset('td') would work or not because you didn't specified the the context of this. You may still use $(this).closest('tr').find('td').eq(...).

answered Feb 17, 2016 at 4:51

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Jobelle · Accepted Answer · 2016-02-17 05:32:33Z

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        $('.add_contact').click(function () {

            var context = {
                first_name: $(this).closest('tr').find('td:eq(0)').find('input').val(),
                last_name: $(this).closest('tr').find('td:eq(1)').find('input').val(),
                contact_email: $(this).closest('tr').find('td:eq(2)').find('input').val(),
                contact_phone_num: $(this).closest('tr').find('td:eq(3)').find('input').val(),
                contact_notes: $(this).closest('tr').find('td:eq(4)').find('input').val()
            };


        });
    });
</script>
</head>

<body>
   <table>
       <tbody>

           <tr>
    <td>
        <input type="text" class="form-control" name="first_name" placeholder="First Name" value="Chikku">
    </td>
    <td>
        <input type="text" class="form-control" name="last_name" placeholder="Last Name" value="Ferna">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_email" placeholder="Email" value="[email protected]">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_phone_num" placeholder="Phone #" value="2423424">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_notes" placeholder="Notes" value="sample">
    </td>
    <td>
        <button type="" class="btn btn-success add_contact">Add Contact</button>
    </td>
</tr>



       </tbody>
   </table>

</html>

Collectives™ on Stack Overflow

Select <input> in a specific <td> element using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related