JQuery. val() function not returning the input field value

Question

The html code snipped is

<tr>
    <td>Wi-Fi Access Cards</td>
    <td><input type="text" name="adj_accname_n" id="adj_accname_Id1" value="Electronic Recharge for Nawras Ajel"></td>
    <td><input type="text" name="adj_acccode_n" id="adj_acccode_Id1" value="420650"></td>
    <td><input type="text" name="adj_prodname_n" id="adj_prodname_Id1" value="Electronic Recharge for Nawras Ajel"></td>
    <td><input type="text" name="adj_prodcode_n" id="adj_prodcode_Id1" value="240010"></td>
    <td><input type="text" name="adj_channelcode_n" id="adj_channelcode_Id1" value="710300"></td>
    <!--<td><input type="submit" name="adj_button_n" id="adj_button_Id1" value="Modify"></td>-->
    <td><button>Modify</button></td>
</tr>

The above code snippet has one modify button for each row. Likewise there are many rows each with the modify button.

When the user click on the modify button, all the values in the input field of that row should be retrieved.

The below code retrieves the html properly

$("button").click(function(){
    alert($(this).parent().siblings().eq(1).html());
});

But when I replace the html() with val() it returns blank where I as expecting the value from the input field

$(this).parent().siblings().eq(1).find('input').val()

Amit Soni
– Amit Soni

2015-09-14 11:46:49 +00:00
Commented Sep 14, 2015 at 11:46 — Amit Soni
– Amit Soni, Commented Sep 14, 2015 at 11:46

Pranav C Balan · Accepted Answer · 2015-09-14 11:47:32Z

You need to use find('input') to get input field inside first td, val() works with input not with td

$("button").click(function() {
  alert($(this).parent().siblings().eq(1).find('input').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Wi-Fi Access Cards</td>
    <td>
      <input type="text" name="adj_accname_n" id="adj_accname_Id1" value="Electronic Recharge for Nawras Ajel">
    </td>
    <td>
      <input type="text" name="adj_acccode_n" id="adj_acccode_Id1" value="420650">
    </td>
    <td>
      <input type="text" name="adj_prodname_n" id="adj_prodname_Id1" value="Electronic Recharge for Nawras Ajel">
    </td>
    <td>
      <input type="text" name="adj_prodcode_n" id="adj_prodcode_Id1" value="240010">
    </td>
    <td>
      <input type="text" name="adj_channelcode_n" id="adj_channelcode_Id1" value="710300">
    </td>
    <!--<td><input type="submit" name="adj_button_n" id="adj_button_Id1" value="Modify"></td>-->
    <td>
      <button>Modify</button>
    </td>
  </tr>
  <tr>
    <td>Wi-Fi Access Cards</td>
    <td>
      <input type="text" name="adj_accname_n" id="adj_accname_Id1" value="Electronic Recharge for Nawras Ajel">
    </td>
    <td>
      <input type="text" name="adj_acccode_n" id="adj_acccode_Id1" value="420650">
    </td>
    <td>
      <input type="text" name="adj_prodname_n" id="adj_prodname_Id1" value="Electronic Recharge for Nawras Ajel">
    </td>
    <td>
      <input type="text" name="adj_prodcode_n" id="adj_prodcode_Id1" value="240010">
    </td>
    <td>
      <input type="text" name="adj_channelcode_n" id="adj_channelcode_Id1" value="710300">
    </td>
    <!--<td><input type="submit" name="adj_button_n" id="adj_button_Id1" value="Modify"></td>-->
    <td>
      <button>Modify</button>
    </td>
  </tr>
</table>

Milind Anantwar · Accepted Answer · 2015-09-14 11:47:54Z

0

When the user click on the modify button, all the values in the input field of that row should be retrieved.

You can use:

$("button").click(function(){
   alert($(this).parent().siblings().find('input').val());
});

answered Sep 14, 2015 at 11:47

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

chimos · Accepted Answer · 2016-02-17 11:02:24Z

0

In order to access all the input values in a row, on button click, you could use,

    $($(this).closest("tr").find("input")).each(function(){
        alert($(this).val());
    });

Using the code,

$("#btn").click(function(){
    alert($(this).closest("tr").find("input").val()); //or
    alert($(this).parent().siblings().eq(1).val());
});

you could access a single input value on the click event. In the case of

$(this).closest("tr").find("input").val();

the input value from the from the first cell of row is returned.

In the case of

$(this).parent().siblings().eq(1).val()

the input value from the second cell of row is returned, as position is mentioned.

As there are more than one <td> elements consisting of input elements, you should use $.each() function, in order to loop through all elements belonging to the category specified.

$($(this).closest("tr").find("input"))

specifies to access the <tr> element closest to the button element, which is the row consisting of the button element, and then to find all the elements in the resultant row.

edited Feb 17, 2016 at 11:02

chimos

6642 gold badges15 silver badges36 bronze badges

answered Sep 14, 2015 at 12:02

saranya

12 bronze badges

1 Comment

PKirby Over a year ago

Please provide a brief explanation.

Collectives™ on Stack Overflow

JQuery. val() function not returning the input field value

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related