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?

xsh.7 · Accepted Answer · 2018-10-07 09:26:01Z

1

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)
}

answered Oct 7, 2018 at 9:26

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nezir · Accepted Answer · 2018-10-07 09:28:06Z

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>

Zakaria Acharki · Accepted Answer · 2018-10-07 09:31:37Z

0

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);
}
});

edited Oct 7, 2018 at 9:31

Zakaria Acharki

67.5k15 gold badges78 silver badges106 bronze badges

answered Oct 7, 2018 at 9:31

acmsohail

1,02313 silver badges35 bronze badges

Collectives™ on Stack Overflow

Can't get value of input field using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related