jQuery .val() not getting value

Question

 let data = $(".language").attr('value'); let data2 = $('.language').val(); let data3 = $('.language').value; let data4 = $(".language").attr('class'); $("button#test").click(function() { console.log(data); console.log(data2); console.log(data3) console.log(data4) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <p class="label">Language</p> <input type="text" class="language" name="language" placeholder=""> </div> <div class="button-wrapper text-center"> <button type="button" class="button next" id="test" >Go to step 2</button> </div> 

I am working on this simple project with jQuery, and when the val() function is called or attr('value') is called it gives returns undefined. But when the attr() function is called with other attributes it works fine.

Please what should I do

Answer 1

To get the value you should define those data variables inside the click event like so:

  // outside here is the <input>'s initial value (empty) console.log('I am the initial empty value: ' + $('.language').val()); $("button#test").click(function() { // inside here is the <input>'s value at the time the button is clicked (not empty) var data = $('.language').val(); console.log('I am the current value: ' + data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <p class="label">Language</p> <input type="text" class="language" name="language" placeholder=""> </div> <div class="button-wrapper text-center"> <button type="button" class="button next" id="test" >Go to step 2</button> </div> 

Answer 2

Why .attr("value") is undefined?

When you execute .attr("value") , the <input> doesn't have the value attribute in the dom yet, if its would have been present then it would have taken its value.

Why val() did not return correct value?

You did not check for the values again after you clicked on the button hence it shows the values that were set initially during the page load. To get the updated values from val() you need to select the dom again on click and extract its value. Eg.

$("button#test").click(function() {
console.log($('.language').val()); // New value from input
}

Please run the below snippet to check the difference. Hope this will makes things clearer.

Some more test scenarios

  // These are already initialized when the JS load for the first time let data = $(".language").attr('value'); let dataType2 = $(".language-no-value-attr").attr('value'); let data2 = $('.language').val(); let data3 = $('.language').value; //undefined as $('.language') returns an array of dom elements let data3_1 = $('.language')[0].value; // you need to loop and chose the values based on matched index let data4 = $(".language").attr('class'); $("button#test").click(function() { console.log("old .attr('value'):" + data); console.log("old input Type 2 .attr('value'):" + dataType2); console.log("old .val():" + data2); console.log("old .value:" + data3); console.log("old correct .value:" + data3_1); console.log("old .attr('class'):" + data4); //Updated Data console.log("new .attr('value'):" + $(".language").attr('value')); console.log("new .val():" + $('.language').val()); console.log("new .value:" + $('.language').value) console.log("new correct .value:" + $('.language')[0].value) console.log("new .attr('class'):" + $(".language").attr('class')) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <p class="label">Language</p> <input type="text" class="language" name="language" value="" placeholder=""> <input type="text" class="language-no-value-attr" name="language" placeholder=""> </div> <div class="button-wrapper text-center"> <button type="button" class="button next" id="test" >Go to step 2</button> </div> 

Answer 3

You should get the value from the input during the click handler, as shown in the snippet below.

If you don't, the value in the variable data2 doesn't change as you type in to the input box. As a result the variable data2 logs undefined even though the input has a valid value.

 $("button#test").click(function() { console.log($('.language').val()); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <p class="label">Language</p> <input type="text" class="language" name="language" placeholder=""> </div> <div class="button-wrapper text-center"> <button type="button" class="button next" id="test">Go to step 2</button> </div>