微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在HTML表单中指定将GET请求的值放在何处? URLs

如何解决如何在HTML表单中指定将GET请求的值放在何处? URLs

上下文

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

问题

但是,我希望它可以与嵌入Google网站的HTML表单一起使用。当我使用下面的代码时,它将带我到this URL 1 ,而我想去this URL 2

URLs

1 https://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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?