javascript - 为什么我的 JS 不能正确从表单中提取值？

Question

所讨论的 HTML 非常简单:

<form>
<input type="text" name="locSearch" id="locSearch" />
<button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button>
</form>

js:

$(document).ready(function() {
getsWeather('seattle, wa', 'f');
$("#locSearchBtn").click(function() {
    getsWeather(document.getElementById('locSearch').value, 'f');
});

当我提交表单时(通过按 Enter 键或单击提交图标，页面会重新加载，但使用默认设置(即使用“Seattle, wa 作为 getsWeather 函数的默认参数)。我需要它来拉取输入框中的任何内容并将其用作 getsWeather 函数中的参数，但目前不起作用。

有什么想法吗？如果您需要更多代码来理解它，请告诉我

Answer 1

如果要修改页面，则需要阻止单击按钮时提交表单。有两种方法可以做到这一点:

1. 将 return false 添加到按钮的 click 处理程序的末尾。这将阻止表单提交(如果客户端启用了 JavaScript)。

2. 将 type="button" 添加到按钮，使其不再是提交按钮。

理想情况下，如果客户端没有启用 JavaScript，您可以将 #1 与处理表单提交结合起来，以处理少数通过表单提交禁用 JavaScript 的情况下冲浪的人，同时处理启用 JavaScript 的客户端页内更新。