Question

我有一个HTML文件，如下所示：

<form onSubmit="getSearchResults()">
  <input id="search-query" type="text" placeholder="Search">
  <button onclick="getSearchResults()"></button>
</form>

<script type=text/javascript>
  var searchURL = "{% url 'search' %}" // I'm using Django, and this gets me the correct URL

  function getSearchResults(){
    var searchQuery = document.getElementById('search-query').value;
    if (searchQuery.length > 0)
        self.location.href = searchURL + '?' + searchQuery;
    else
        self.location.href = searchURL;
    return false;
  }

</script>

我的想法是每次提交表单或点击按钮，我都希望将页面重定向到不同的URL。

现在，无论是表单提交还是按钮点击，页面都会重新加载。我在Firefox中查看了我的控制台，它说：

Navigated to http://localhost:8000/search
Navigated to http://localhost:8000/

所以我知道我的网址是正确的，我的代码有点工作，因为我被导航到了正确的位置，但随后我被导航到我所在的原始页面。

我也尝试过：

window.location.href
location.href

Answer 1

<form onsubmit="return getSearchResults()">

注意return。这告诉onsubmit函数返回getSearchResults()返回的内容。否则return false;不会做任何事情。

e.preventDefault()等其他方法也适用。

Answer 2

由于按钮位于表单中，因此它会提交表单。尝试在处理程序中添加e.preventDefault()：

function getSearchResults(e) {
  e.preventDefault();
  var searchQuery = document.getElementById('search-query').value;
  if (searchQuery.length > 0)
    self.location.href = searchURL + '?' + searchQuery;
  else
    self.location.href = searchURL;
  return false;
}

Answer 3

由于按钮的默认类型，页面提交。

<button type="button" ...

或

<button onclick="return getSearchResults()"></button>

页面将刷新而不是重定向

3 个答案: