Javascript / HTML 问题：从表单中获取输入值，并使用它来将用户发送到 URL

Question

感谢阅读。我是 Javscript 的新手，并且已经做了很多搜索来尝试解决这个问题......（无济于事）

我正在尝试创建一种用户在表单上输入单个单词的情况。然后，当他们单击提交按钮时，网站会从输入中获取单词，将其附加到不完整 URL 的末尾，然后将它们发送到完整的 URL。

很容易理解为什么这对你们中的一些人不起作用。而且，令人尴尬的是，我认为最好采用完全不同的方法。

感谢您的建议。

<form action="https://vrnaut.neocities.org/"  method="get">
  <label for="MyForm">Enter One Word:</label>
  <input type="text" id= "OneWord" name="OneWord" required>
</form>

<button onclick="myFunction()">Submit</button>

<script>
function myFunction(form) {
  var GoHere = form.OneWord.value;
  location.replace("https://vrnaut.neocities.org/" + GoHere);
}
</script>

Answer 1

您的方法非常好。所需要的只是一点点调整。

<form action="https://vrnaut.neocities.org/"  method="get">
  <label for="MyForm">Enter One Word:</label>
  <input type="text" id= "OneWord" name="OneWord" required>
  <button onclick="myFunction(this.parentElement)">Submit</button>
</form>

<script>
function myFunction(form) {
  var GoHere = form.getElementsByTagName("input")[0];
  location.replace("https://vrnaut.neocities.org/" + GoHere.value);
}
</script>

Answer 2

• 将按钮放入你形成的
• 永远不要监听按钮点击 - 而是使用 FORM 的 "submit" 事件：

const EL_form = document.querySelector("#myForm");
const EL_word = document.querySelector("#OneWord");

EL_form.addEventListener("submit", (ev) => {
  ev.preventDefault();
  location.replace(EL_form.action + EL_word.value);
});

<form id="myForm" action="https://vrnaut.neocities.org/" method="get">
  <label for="MyForm">Enter One Word:</label>
  <input type="text" id="OneWord" name="OneWord" required>
  <button type="submit">Submit</button>
</form>