javascript - jQuery .val() not getting value - Stack Overflow

admin管理员组

文章数量:1287524

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=".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>

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

• javascript
• jquery

Share Improve this question Follow edited Oct 26, 2017 at 5:34 Shiladitya 12.2k1717 gold badges2828 silver badges4242 bronze badges asked Oct 26, 2017 at 3:26 MaxwellMaxwell 15122 gold badges33 silver badges1616 bronze badges 2

• 1 let me explain: - The block of codes let.... was triggered when you load the web page: in that time the value is empty "". - The button click doesn't do get values of input, it just does console.log to print the data out. - So in this case, you must put the block of codes let... into callback of click() action to trigger getting variables, then print it out. – Kai Commented Oct 26, 2017 at 3:40
• 1 moreover, maybe the js run before the html was rendered, so it cannot find the class .language, you should put the jquery script in $(document).ready() 's callback. – Kai Commented Oct 26, 2017 at 3:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

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

本文标签： javascriptjQuery val() not getting valueStack Overflow