trying to save the form input into a variable

Question

I googled, and looked at stackoverflow and tried out the examples and i'm still having difficulties.

GOAL: Create a form box where a user can enter a city name so i can capture it in a variable and use it to look up the city lattitue and longitute from goodle geocode api.

Here is the HTML:

<div>
  <form id="nameForm">
    <input id="cityForm" type="text" >
    <button id="subButton" type="button">Submit</button>
  </form>
</div>

and here is my code i tried:

var theTerm = document.getElementById('cityForm').value; console.log(theTerm);

console output gives me nothing.

I stripped the code down and removed the weather api stuff from it but basically i'm concerned about how i can capture a city name that was entered and 'submit' by a user. Here is the jsfiddle: https://jsfiddle.net/zt28sbo3/1/

shouldn't you wait for user to enter something? Think it through a bit... page loads....you try to get a value immediately, before user can even see the form. What's the button for then? — charlietfl
– charlietfl, Commented Feb 11, 2017 at 21:56

Cjmarkham · Accepted Answer · 2017-02-11 22:10:34Z

1

You need to wait for an event (when the user has typed something). Something like so should work:

var element = document.getElementById('foo');
element.addEventListener('blur', function () {
  var value = this.value;
  // API request here
});

<input id="foo" />

You could also listen to the parent forms submit event:

var form = document.getElementById('nameForm');
form.addEventListener('submit', function (e) {
  e.preventDefault(); // Prevent normal form submission
  var value = document.getElementById('foo').value;
  console.log(value);
  // API request here
});

<form id="nameForm">
  <input id="foo" />
  <button type="submit">Submit</button>
</form>

edited Feb 11, 2017 at 22:10

answered Feb 11, 2017 at 21:59

Cjmarkham

9,7336 gold badges52 silver badges85 bronze badges

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

2 Comments

charlietfl Over a year ago

not so sure that is the most appropriate event for allowing user to enter a city name in order to make an api request

Agus Sapurta Sijabat Over a year ago

Wow, nice answer!

Collectives™ on Stack Overflow

trying to save the form input into a variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related