如何指定将GET请求的值放在HTML表单中的位置



上下文

我正在做一个临时项目,在谷歌网站上有一个登录页面。我使用forkphorus,这样我就可以操作username块的输出。我在我的scratch项目中构建了一个脚本,将用户名字符串(由URL参数指定(分离为变量(实际上是列表,但我不想使事情过于复杂(。我不会详细介绍,但用户名字符串是这样的:
username%3Ahello%20password%3Aworld
项目中的脚本会将URL编码的文本解码为:
username:hello password:world
然后将用户名设置为hello,并将密码设置为world。

问题

然而,我希望这与嵌入在我的谷歌网站上的HTML表单一起工作。当我使用下面的代码时,它会把我带到这个URL1,我想去的地方是这个URL2

URL

1https://forkphorus.github.io/app.html?uname=hello&pword=world
2https://forkphorus.github.io/app.html?id=myprojectid&username=uname%3Ahello%20pword%3Aworld

<!DOCTYPE html>
<html>
<body>
<form action="https://forkphorus.github.io/app.html?id=myprojectid">
<label for="uname">Username:</label><br>
<input type="text" id="uname" name="uname" value="hello"><br>
<label for="pword">Password:</label><br>
<input type="password" id="pword" name="pword" value="world"><br><br>
<input type="submit" value="Log in">
</form> 
</body>
</html>


我的问题

如何通过在表单中输入适当的值来更改/添加代码以获得所需的URL

您可以添加自定义表单提交逻辑(Stackoverflow CORS策略将阻止提交操作执行任何操作,但它应该在其他任何地方工作(:

document.querySelector(".info-form").addEventListener("submit", (event) => {
event.stopPropagation();
const username = encodeURIComponent(document.querySelector("#uname").value);
const password = encodeURIComponent(document.querySelector("#pword").value);
location.href = `https://forkphorus.github.io/app.html?id=myprojectid&username=${username}%3Ahello%20pword%3A${password}`;
});
<form class="info-form" action="#">
<label for="uname">Username:</label><br>
<input type="text" id="uname" value="hello" required><br>
<label for="pword">Password:</label><br>
<input type="password" id="pword" value="world" required><br><br>
<input type="submit" value="Log in">
</form>

相关内容

  • 没有找到相关文章

最新更新