How can I specify where to put values for a GET request in a HTML form?

Question

Context

I'm making a scratch project, with a sign in page on google sites. I'm using forkphorus so that I can manipulate the output of the username block. I have built a script in my scratch project that seperates out the username string (which is specified by a URL parameter) into variables (lists actually, but I don't want to overcomplicate things). I won't go into much detail, but say the username string was this:
username%3Ahello%20password%3Aworld
A script in the project would decode the URL encoded text into this:
username:hello password:world
And then username would be set to hello and password to world.

The problem

However, I want this to work with an HTML form embedded on my google site. When I use the code below, it takes me to this URL¹, wheras I want to go to this URL².

URLs

¹https://forkphorus.github.io/app.html?uname=hello&pword=world
²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>

My question

How can I change/add to my code to get to my desired URL by entering the appropriate values into the form?

To attach the id with the query, use something like `` somewhere in the form — Richie Bendall, Aug 18 '20 at 10:35
Thanks - any idea how I could compile the two other inputs into the username parameter with my custom seperator? — DM01131, Aug 18 '20 at 10:47
You might want to add a custom listener for when the form is submitted and process that data from there. — Richie Bendall, Aug 18 '20 at 11:58
Sorry, you've lost me - my knowledge of html and web development is pretty intermittent. — DM01131, Aug 18 '20 at 20:39

score 0 · Answer 1 · answered Aug 19 '20 at 03:26

You can add custom form submit logic (the Stackoverflow CORS policy will prevent the submit action from doing anything however it should work anywhere else):

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>

How can I specify where to put values for a GET request in a HTML form?

Context

The problem

URLs

My question

1 Answers1