html - 更改 URL 的表单输入

Question

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

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

假设我有一个 URL 为“https://example.com/api/api?item= &auth=AUTHENTICATIONtoken”的 API，我需要将 HTML 表单的输入替换为 ” <用输入填写>”。

我记得以前找到过这样做的方法 - 但我似乎找不到了。

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();
}

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

---

演示:

function changeFormAction(event) {
  var item = document.getElementById("item").value;
  var form = this;
  form.action = "https://example.com/api/api?item=" + item + "&auth=AUTHENTICATIONtoken";
  
  // for demonstration, don't actually submit the form, just print out the form action
  console.log(form.action);
  event.preventDefault();
}

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