Can't get value of input field using JQuery
Question
I want to take the value on an input field and display what the user has entered using JQuery on clicking a submit button. The problem is that when I click the button the console.log is blank without the user text and this is driving me crazy because I can't figure out why, here is my html:
const userLocation = $('#location').val(); $('#submit').on('click', getInfo); function getInfo() { console.log(userLocation) }
#content { width: 400px; } #request { text-align: center; } .bl { width: 300px; } #current { text-align: center; font-size: 2em; } #upcoming { text-align: center; } .condition { text-align: left; display: inline-block; } .symbol { font-size: 4em; display: inline-block; } .forecast-data { display: block; } .upcoming { display: inline-block; margin: 1.5em; } .label { margin-top: 1em; font-size: 1.5em; background-color: aquamarine; font-weight: 400; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Forecatser</title> </head> <body> <div id="content"> <div id="request"> <input id="location" class='bl' type="text"> <input id="submit" class="bl" type="button" value="Get Weather"> </div> <div id="forecast" style="display:none"> <div id="current"> <div class="label">Current conditions</div> </div> <div id="upcoming"> <div class="label">Three-day forecast</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="./weather.js"></script> </body> </html>
Why does the console print blank lines with no value, what am I doing wrong?
3 answers
solution1
1 2018-10-07 09:26:01
You're reading only the initial value of the input, not after it has been clicked. You should read the value inside of your callback, to get it's value at the time of clicking:
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
console.log(userLocation)
}
solution2
0 2018-10-07 09:28:06
Here is working sample with small change of your code
$('#submit').on('click', function(){ getInfo(); }); function getInfo() { const userLocation = $('#location').val(); console.log(userLocation) }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Forecatser</title> <style> #content { width: 400px; } #request { text-align: center; } .bl { width: 300px; } #current { text-align: center; font-size: 2em; } #upcoming { text-align: center; } .condition { text-align: left; display: inline-block; } .symbol { font-size: 4em; display: inline-block; } .forecast-data { display: block; } .upcoming { display: inline-block; margin: 1.5em; } .label { margin-top: 1em; font-size: 1.5em; background-color: aquamarine; font-weight: 400; } </style> </head> <body> <div id="content"> <div id="request"> <input id="location" class='bl' type="text"> <input id="submit" class="bl" type="button" value="Get Weather"> </div> <div id="forecast" style="display:none"> <div id="current"> <div class="label">Current conditions</div> </div> <div id="upcoming"> <div class="label">Three-day forecast</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="./weather.js"></script> </body> </html>
solution3
0 2018-10-07 09:31:01
Please check the working demo
https://jsfiddle.net/o2gxgz9r/73662/
$(document).ready(function() {
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
alert(userLocation);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.