将location.replace与表单中的数据一起使用

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>