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搜索的内容不同）

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

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>

不允许提交表单。

getElementById（）和输入表单

1 个答案: