表单输入以更改 URL

Question

我需要一个 HTML 表单，其中的输入将添加到 URL 上，因为我有一个预先存在的 API。

基本上，我需要一个 HTML 表单来填充 URL 中的变量。

假设我有一个 URL 为“ https://example.com/api/api?item= <FILL THIS IN WITH THE INPUT> &auth=AUTHENTICATIONtoken”的 API，我需要将 HTML 表单的输入替换为“<FILL这与输入>”有关。

我记得以前找到过一种方法来做到这一点，但我似乎再也找不到了。

Answer 1

您可以使用 JavaScript 来完成此操作。

如果这是您的表格：

<form onsubmit="changeFormAction()">
  <input type="text" id="item">
  <button type="submit" id="submitButton">Submit</button>
</form>

如果你的 JavaScript 中有这样的内容：

function changeFormAction() {
  var item = document.getElementById("item").value;
  var form = this;
  form.action = "https://example.com/api/api?item=" + item +  "&auth=AUTHENTICATIONtoken";
  form.submit();
}

然后该函数将通过添加表单输入指定的项目来自动更改表单操作。

演示：

<form onsubmit="changeFormAction()">
  <input type="text" id="item">
  <button type="submit" id="submitButton">Submit</button>
</form>

function changeFormAction() {
  var item = document.getElementById("item").value;
  var form = this;
  form.action = "https://example.com/api/api?item=" + item +  "&auth=AUTHENTICATIONtoken";
  form.submit();
}