jQuery.val() doesn't work on an tag

Question

After typing something in an input, and clicking on the button, ".val()" return an empty value, any idea why?

HTML CODE:

<div class="mainClass">
    <div class="class1" >
       <div class="class2">
         <h3>Settings 1</h3>   
        <label>
           <span>Text 1:</span>
           <input type="text" name="text">
        </label>
        <label>
           <span>Text 2:</span>
           <input type="text" name="text2">
        </label>
       </div>
    </div>

    <div class="class3" >
       <div class="class4">
         <h3>Settings 2</h3>   
        <label>
           <span>Text 1:</span>
           <input type="text" name="text">
        </label>
        <label>
           <span>Text 2:</span>
           <input type="text" name="text2">
        </label>
       </div>
    </div>
</div>
 <button id="Go" class="go" >GO </button>

JAVASCRIPT CODE:

$('#Go').on('click', function() {
    alert($('.class1 input').val());    //return an empty value 
    $('.class1 input').val("test");
    alert($('.class1 input').val());    //return test
});

EDIT:

Even this doesnt work, and here i have only one input so I can't type in the wrong one:

<div class="mainClass">
    <div class="class1" >
       <div class="class2">
         <h3>Settings 1</h3>   
        <label>
           <span>Text 1:</span>
           <input type="text" name="text">
        </label>        
       </div>
    </div>
</div>
 <button id="Go" class="go" >GO </button>

EDIT 2: I found a beginning of the problem...

When I am doing that:

$('.class1 input').each(function () {
    alert($(this).attr('name') + "  value:" +$(this).val() );
});

I get two "alert" like this:

text   value:
text   value:myinputText

So two created for one in my HTML, the first one is empty and the second one work well! Looking closely to my page, i found that all element are duplicated( <select,field, input...)

Any idea how is that possible? Am i calling two time my html file? And all my code is in a popup( I don't know if it can help) (I am new in Javascript and jQuery)

Thanks

@dystroy Why shouldn't it? I'm pretty sure it's perfectly valid and accepted to do that — Ian, Jun 18 '13 at 13:44
@dystroy Here's a reference: http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag — Ian, Jun 18 '13 at 13:45
@dystroy No, it is valid to put an input within a label. [Source](http://www.w3.org/wiki/HTML/Elements/label#Example_B) But `` is a tag, can also be called element. But not label.... — Ron van der Heijden, Jun 18 '13 at 13:46
@ Johnny Ha : i saw, I have no idea why it doesn't work for me, but thanks for helping. — durje, Jun 18 '13 at 14:02
@ epascarello :( I didnt make the same mistake in my code, but thanks — durje, Jun 18 '13 at 14:07
@durje We don't have enough information to guess why your HTML is duplicated. — Denys Séguret, Jun 18 '13 at 14:58

score 11 · Answer 1 · answered Jun 18 '13 at 13:39

11

There's more than one element matching '.class1 input'. You probably didn't fill the first one of the set.

From the documentation :

Get the current value of the first element in the set of matched elements.

While val('text') fills all matching elements :

Set the value of each element in the set of matched elements

Which is why you see something in your second alert.

You'd better use a more selective selector. Usually we use an id, or a name if a form is used to send the values to a server.

answered Jun 18 '13 at 13:39

Denys Séguret

372,613
87
782
758

Can you reproduce your problem with a syntactically correct code in a fiddle ? – Denys Séguret Jun 18 '13 at 14:00
Well... so you must locate your problem. – Denys Séguret Jun 18 '13 at 14:18
Can you please look at my EDIT 2? Thanks in advance! – durje Jun 18 '13 at 14:42

score 3 · Answer 2 · answered Jun 18 '13 at 13:39

3

$('.class1 input').val()

refers to two elements

<input type="text" name="text">

and

<input type="text" name="text2">

answered Jun 18 '13 at 13:39

Thomas Junk

5,588
2
30
43

score 1 · Answer 3 · answered Jun 18 '13 at 13:39

1

You have more than one element that matches.

From the jQuery docs

.val()

Get the current value of the first element in the set of matched elements or set the value of every matched element.

You are only getting the first element of the matched set as the docs state. If you want all the values, you need to loop over the set.

answered Jun 18 '13 at 13:39

epascarello

204,599
20
195
236

2

Works fine for me when I comment your buggy line under the alert: http://jsfiddle.net/XqHzT/ – epascarello Jun 18 '13 at 13:57
ya i saw, I have no idea why it doesnt work for me, but thanks for helping. – durje Jun 18 '13 at 13:59
Can you please look at my EDIT 2? Thanks in advance! – durje Jun 18 '13 at 14:44

score 0 · Answer 4 · answered Jul 22 '17 at 06:57

Wrap your Jquery code around a Document-ready block:

$('document').ready(function(){});

like so:

$('document').ready(function(){
    $('#Go').on('click', function() {
        alert($('.class1 input').val());    //return an empty value 
        $('.class1 input').val("test");
        alert($('.class1 input').val());    //return test
    });
});

Even with so much help from google search and Stackoverflow, it took us 1 hour to identify this issue.

score 0 · Answer 5 · answered Jul 09 '19 at 22:32

0

I had a similar problem Chrome repeatedly told me .val() is not a function, instead of using .val() I had to use .value That got the job done for me hope it works for you.

answered Jul 09 '19 at 22:32

Max Feldman

1

jQuery.val() doesn't work on an tag

5 Answers5