表单输入以更改URL [英] Form Input to Change URL

问题描述

我需要一个HTML表单，该表单中的输入将添加到URL中，因为我已有一个API.

I am in need of an HTML form in which the input would add onto a URL as I have a preexisting API.

基本上，我需要一个HTML表单，该表单将在URL中填写一个变量.

Basically, I need an HTML form which would fill in a variable within a URL.

说我有一个API，其URL为" https://example.com/api/api?item = <使用输入来填写此内容> & auth = AUTHENTICATIONtoken，我需要将HTML表单的输入内容替换为"< FILL THIS IN使用INPUT>".

Say I had an API with the URL "https://example.com/api/api?item=<FILL THIS IN WITH THE INPUT>&auth=AUTHENTICATIONtoken", I need to have the input of the HTML form replace "<FILL THIS IN WITH THE INPUT>".

我记得以前找到了一种方法来做，但是我似乎再也找不到了.

I recall finding a way to do this before-but I can't seem to find it anymore.

推荐答案

您可以使用JavaScript进行此操作.

You can do this with JavaScript.

如果这是您的表格:

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

，并且如果您的JavaScript中包含此代码:

and if you have this in your 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();
}

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

Then the function will automatically change the form action by adding the item specified by the form input.

演示:

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>

这篇关于表单输入以更改URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！