jQuery val returns empty string

Question

I have the following html code in my application:

<tr style="cursor:pointer;">
    <td>100101</td>
    <td>Monkey</td>
    <td>Nuts<td>
    <td>Cow</td>
    <td>Soup</td>
    <td>Chicken</td>
    <td>Leg</td>
    <td class="non-clicky">
        <p>Click</p>
    </td>
</tr>

What I need to do is get the value of the first td when I click on the class non-clicky. So I have the code:

alert($('.non-clicky:first').parent().children('td:first').val());

This code results in the value of "" -- empty string being returned and not the result 100101.

So, instead i tried the code:

alert($('.non-clicky:first').siblings(':first').val());

Again this resulted in the value being empty string, why is it .val() is returning an empty string instead of the correct result?

I tried the code below and this gives me the correct answer, but I am curious as to why val does not. What is the difference between val and text?

alert($('.non-clicky:first').siblings(':first').text());
// and 
alert($('.non-clicky:first').parent().children('td:first').text());

Note:

The code above makes use of $('.non-clicky:first') this was only for my testing purposes in the code it will be within a jquery click event.

""The .val() method is primarily used to get the values of form elements such as input"" is primarily used which implies it can be used for other things also. — Matt Seymour
– Matt Seymour, Commented Feb 14, 2012 at 17:10
And what makes you think that "the other" use is getting the text content of elements? But I see your point. — Felix Kling
– Felix Kling, Commented Feb 14, 2012 at 17:11

user400654 · Accepted Answer · 2012-02-14 17:05:58Z

4

Use .text(), .val() is for getting the value of an input element.

edited Feb 14, 2012 at 17:05

answered Feb 14, 2012 at 17:01

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

2 Comments

Matt Seymour Over a year ago

thanks @kevin-b, edited your answer a little but it hit the mark.

user400654 Over a year ago

@aspect I've always wondered if there was possibly a better way to handle .val() vs .text(), but they've both been around for so long that changing either of them would cause major backwards compatibility issues and making .val() mimic .text() on non-inputs would just bloat the code.

elclanrs · Accepted Answer · 2012-02-14 17:05:49Z

0

Use text():

$('.non-clicky').click(function(){ alert($(this).siblings().first().text()); });

answered Feb 14, 2012 at 17:05

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

1 Comment

Matt Seymour Over a year ago

Was asking why i need to use text instead of val in the question. Not a solution to the problem.

Collectives™ on Stack Overflow

jQuery val returns empty string

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related