CODEWITHSUNDEEP
javascriptjquery
Maxwell
Maxwell

Reputation: 151

jQuery .val() not getting value

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

Upvotes: 5

Views: 10767

Answers (3)

Abhilash Nayak
Abhilash Nayak

Reputation: 704

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>

Upvotes: 3

Nisarg Shah
Nisarg Shah

Reputation: 14531

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>

Upvotes: 1

d-_-b
d-_-b

Reputation: 23141

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>

Upvotes: 4

Related Questions