通过 JavaScript 中的表单输入重定向到子目录

Question

刚开始这个项目的时候，我们认为它会超级简单，但是在失败了两天之后，我们被难住了。

环境： MacBookPro - WordPress with Thrive Themes Architect

目标： 创建一个简单的表单，允许访问者将子目录的名称输入到表单中，该表单在单击提交按钮后立即将他们重定向到该子目录。

目的：当合作伙伴发布他们的网站URL，其中包含一个子目录名称时，有时该人无法输入子目录名称，他们会转到主目录站点代替。此表格可以让他们轻松到达正确的位置，以便正确的合作伙伴获得适当的信用。

理论：重定向是否被浏览器安全协议或其他东西阻止了？编码是否以某种方式关闭？方法有问题吗？

许多失败的编码尝试中的三个：

<script type="text/javascript">
  function Redirect(){
  var subDirectory= document.getElementById("sub_directory").value;
  window.location.href= "https://www.thewatercoach.com/" + subDirectory;
  }
</script>
<form>
  <label>www.theWaterCoach.com/</label>
  <input type="text" id="sub_directory">
  <button onclick="Redirect()">Submit</button>
</form>

结果：页面只是简单地刷新或重新加载先前存在的URL，但根本不起作用。

<script type="text/javascript">
  function Redirect(){
  var subDirectory= document.getElementById("sub_directory").value;
  window.location.replace(subDirectory);
  }
</script>
<form>
  <label>www.theWaterCoach.com/</label>
  <input type="text" id="sub_directory">
  <button onclick="Redirect()">Submit</button>
</form>

结果：页面只是简单地刷新或重新加载先前存在的URL，但根本不起作用。

<script type="text/javascript">
  function Redirect(){
  var subLink = document.getElementById("sub_Link");
  var subDirectory= document.getElementById("sub_directory").value;
  subLink.href = "https://www.theWaterCoach.com/" + subDirectory;
  subLink.click();
        }
</script>
<form>
   <label>www.theWaterCoach.com/</label>
   <input type="text" id="sub_directory">
   <button onclick="Redirect()">Submit</button>       
</form>
<a id="sub_Link" href="https://www.theWaterCoach.com/">.</a>

结果： 此编码示例在 FireFox 上确实可以可靠地工作，但在 Chrome 或 Safari 上却不行。它也不能通过 PC 上的 Chrome 工作。出于测试目的，您可以在文本框中输入 Becca。

任何想法或解决方案将不胜感激！

Answer 1

提交按钮位于表单标记内。因此，当您单击提交时，浏览器只是向您的主页发送一个 GET 请求。 Javascript 重定向代码已执行，但在发送 GET 请求之前终止。

解决方案：您必须阻止提交表单。了解方法：read this Whosebug question.

通过 JavaScript 中的表单输入重定向到子目录

Redirect to a SubDirectory via Form Input in JavaScript

javascript

wordpress

redirect

google-chrome

subdirectory