问题描述
上下文
我正在做一个临时项目，在Google网站上有一个登录页面。我正在使用forkphorus，以便可以操纵用户名块的输出。我在我的草稿项目中构建了一个脚本，该脚本将用户名字符串（由URL参数指定）分隔为变量（实际上是列表，但我不想过分复杂）。我不会详细介绍，但是说用户名字符串是这样的：username%3Ahello%20password%3Aworld
项目中的脚本会将URL编码的文本解码为：
username:hello password:world
然后将用户名设置为hello，将密码设置为world。
问题
但是，我希望它可以与嵌入Google网站的HTML表单一起使用。当我使用下面的代码时，它将带我到this URL 1 ，而我想去this URL 2 。URLs
1https://forkphorus.github.io/app.html?uname=hello&pword=world
2
https://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>