为什么我的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的用户 - 启用了页内更新的客户端。