javascript - getElementById() 和输入表单

Question

我有一个

function calcRoute() {
  var start = document.getElementById('start').value;
}

然后是

<select id="start" onchange="calcRoute();">
  <option value="somevalue">Dropdown 1</option>
  <option value="somevalue">Dropdown 2</option>
  <option value="somevalue">Dropdown 3</option>
</select>

一切正常。现在，我需要一个输入框，而不是下拉列表。问题是我尝试过

<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>

但是它不起作用(它正在将表单提交到服务器)..你可以看到一个演示 here 。请记住，我不需要下拉列表(它的存在只是为了证明一切正常)，因此它可以继续(不存在双重调用函数的问题)。预先感谢:-)

Answer 1

您应该更改:

<input type="text" id="startText" name="start">

致:

<input type="text" id="start" name="start">

由于 Javascript 正在搜索 ID，而不是名称。 (并且在您的代码中，ID 与 Javascript 正在搜索的 ID 不同)

如果您想在同一页面中使用输入和下拉列表，只需将变量定义更改为:

var start = document.getElementById('startText').value || document.getElementById('start').value;

就像输入为空一样，Javascript 使用下拉列表中的值。

更新

除了更改 ID 之外，还将您的表单更改为:

<form>
    <input type="text" id="start" name="start">
    <input type="button" onclick="calcRoute();" value="Go">
</form>

不允许表单提交。