JQuery.val () does not work with <input> tag

Question

After entering something in the input and pressing the ".val ()" button, it returns 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 does not work, and here I have only one input, so I can not enter the wrong 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> </div> </div> </div> <button id="Go" class="go" >GO </button> 

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

When I do this:

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

I get two “warnings” as follows:

 text value: text value:myinputText 

So, two created for one in my HTML, the first one is empty, and the second one works well! Looking at my page, I found that the whole element is duplicated ( <select,field, input... )

Any idea how this is possible? Do I call twice my html file? And all my code is in a popup (I don't know if this can help) (I'm new to Javascript and jQuery)

thanks

Answer 1

There is more than one '.class1 input' element '.class1 input' . You probably did not complete the first part of the set.

From the documentation :

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

So far, val('text') fills all the relevant elements:

Set the value of each item in the set of matched items

That is why you see something in the second warning.

Better use a more selective selector. Usually we use an identifier or name if the form is used to send values ​​to the server.

Answer 2

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

refers to two elements

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

and

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

Answer 3

You have several items that match.

From jQuery docs

.val()

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

You get only the first element of the consistent set as the state of the documents. If you want to get all the values, you need to loop over the set.

Answer 4

Wrap your jQuery code in a finished document block:

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

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 problem.

Answer 5

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