Question

我用Google搜索，看了一下stackoverflow并尝试了一些示例，我仍然遇到了困难。

目标：创建一个表单框，用户可以在其中输入城市名称，以便我可以在变量中捕获它并使用它来查找城市格式并从goodle geocode api中获取。

这是HTML：

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

这是我试过的代码：

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

控制台输出什么也没给我。

我删除了代码，删除了天气api的东西，但基本上我担心如何捕获输入的城市名称并提交＆＃39;由用户。这是jsfiddle：https://jsfiddle.net/zt28sbo3/1/

Answer 1

您需要等待某个事件（当用户键入内容时）。这样的事情应该有效：

＆＃13;

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

＆＃13;

<input id="foo" />

＆＃13;

您还可以收听父表单submit事件：

＆＃13;

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

＆＃13;

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

＆＃13;

试图将表单输入保存到变量中

1 个答案: