Question

我有一个HTML表单，我试图使用它来导航到另一个页面。我试图使用window.location.replace将输入的值附加到表单的末尾，如下所示：

之前：https://example.com/search

之后：https://example.com/search/formvalue

我几乎尝试了所有可以找到的技巧，但没有运气。我可以通过将window.location.replace替换为window.open来使其正常工作，但是我不想在新选项卡中将其打开。我也尝试过window.location.assign，但是再也没有运气了。我尝试在Chrome控制台中运行这两个功能，并且从那里可以正常运行。我的代码在下面。

function onenter() {
  var term = document.getElementById("searchbox").value;
  window.location.replace("/search/" + term);
}

<form method="GET" onsubmit="onenter();">
  <input id="searchbox" name="term" type="text" autofocus>
  <button id="searchenter" type="submit">Enter</button>
</form>

我在做什么错/想念？

Answer 1

您的问题是表单提交会重新加载页面。使用eventObject.preventDefault：

function onenter(event) {
  event.preventDefault();
  var term = document.getElementById("searchbox").value;
  window.location.replace("/search/" + term);
  console.log(window.location);
}

<form method="GET" onsubmit="onenter(e);">
  <input id="searchbox" name="term" type="text" autofocus>
  <button id="searchenter" type="submit">Enter</button>
</form>

对来自表单的数据使用location.replace

1 个答案: