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 .

Answer 1

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

Answer 2

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(...) .

Answer 3

<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="chikku@gmail.com">
    </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>

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

Question

3 answers

solution1
7 ACCPTED 2016-02-17 04:50:25

solution2
0 2016-02-17 04:51:13

solution3
0 2016-02-17 05:32:33

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

Question

3 answers

solution1 7 ACCPTED 2016-02-17 04:50:25

solution2 0 2016-02-17 04:51:13

solution3 0 2016-02-17 05:32:33

solution1
7 ACCPTED 2016-02-17 04:50:25

solution2
0 2016-02-17 04:51:13

solution3
0 2016-02-17 05:32:33