项目中的脚本会将URL编码的文本解码为:
然后将用户名设置为hello,并将密码设置为world。
2
上下文
我正在做一个临时项目,在谷歌网站上有一个登录页面。我使用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
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>