如何创建一个提交按钮，在 URL 上附加一个值并在提交后转到该 URL？

Question

因此，基本上，要求是用户在文本字段中输入一个值，然后单击“提交”后，他将被重定向到具有基于其输入值的 URL 的页面，例如：

• 用户输入：测试

• 点击提交后就变成了一个URL： http: //test.example.com

• 然后重定向到该 URL

我一直在尝试使用以下代码：

<script>

    function resetId(){

  var idInput = document.getElementById("id");

  var suffix=".example.com";            

alert("Value before submit:" + idInput.value);

}

</script>

<form action="#" method="post" onsubmit="resetId();return false" >

    <input type="text" name="id" value="domain" id="id"><br>

    <input type="submit">

</form>

我能够将其附加为后缀，但随后我也感到困惑，因为这是 URL，我需要整个内容，所以我认为有更好的方法来实现这一点，而不是做我已经做的事情。

抱歉，我是编码新手，并且仍在学习新概念。

Answer 1

有很多方法可以实现它。利用模板字符串和提示的单行方法（创建一个弹出窗口，提示用户输入某些内容）。window.location.replace(`http://${prompt('Input:')}.example.com`)使用形式及其onsubmit属性（您的方法）。请注意，对于 ES6，请使用let或const而不是var。function resetId(){    const idInput = document.getElementById("id");    const url = `http://${idInput.value}.example.com`;    alert("Value before submit: " + url);    window.location.replace(url);}<form action="#" method="post" onsubmit="resetId();" >    <input type="text" name="id" value="domain" id="id">    <input type="submit"></form>一种不使用表单而是使用按钮的方法。// Same as abovefunction resetId(){    const idInput = document.getElementById("id");    const url = `http://${idInput.value}.example.com`;    alert("Value before submit: " + url);    window.location.replace(url);}<div>    <label for="id">Input:</label>    <input type="text" name="id" value="domain" id="id"></div><button onclick="resetId()">submit</button>注意：不要<br />在表单中使用新行，而是考虑对每行使用<label>并<input>包裹在<div>如下所示的内容中：<div>    <label for="something">Something:</label>    <input type="text" name="something" id="something" /></div>

Answer 2

只需替换这行代码<form&nbsp;action="#"&nbsp;method="GET"&nbsp;onsubmit="resetId();return&nbsp;false"&nbsp;>