Блог

Главная - Вопросы по программированию - Как я могу указать, куда помещать значения для запроса GET в HTML-форме?

Как я могу указать, куда помещать значения для запроса GET в HTML-форме?

#html #mit-scratch #google-sites-2016

#HTML #mit-scratch #google-сайты-2016

Вопрос:

Контекст

Я создаю проект scratch со страницей входа на сайтах Google. Я использую forkphorus, чтобы я мог манипулировать выводом блока username. Я создал скрипт в своем проекте scratch, который выделяет строку имени пользователя (которая задается параметром URL) в переменные (на самом деле списки, но я не хочу все усложнять). Я не буду вдаваться в подробности, но скажем, что строка имени пользователя была такой:
username:hello password:world

Скрипт в проекте будет декодировать текст в кодировке URL в это:
username:hello password:world

И тогда для имени пользователя будет установлено значение hello, а для пароля — world.

Проблема

Однако я хочу, чтобы это работало с HTML-формой, встроенной на моем сайте Google. Когда я использую приведенный ниже код, он приводит меня к этому URL1, где я хочу перейти к этому URL2.

URL-адреса

1 https://forkphorus.github.io/app.html?uname=helloamp;pword=world

2 https://forkphorus.github.io/app.html?id=myprojectidamp;username=uname:hello pword:world 

 <!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, введя соответствующие значения в форму?

Комментарии:

1. Чтобы прикрепить идентификатор к запросу, используйте что-то вроде <input name="id" type="hidden" value="myprojectid"> где-нибудь в форме

2. Спасибо — есть идеи, как я мог бы скомпилировать два других входных параметра в username с помощью моего пользовательского разделителя?

3. Возможно, вы захотите добавить пользовательский прослушиватель для отправки формы и обрабатывать эти данные оттуда.

4. Извините, вы меня потеряли — мои знания html и веб-разработки довольно непостоянны.

Ответ №1:

Вы можете добавить пользовательскую логику отправки формы (политика 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=myprojectidamp;username=${username}:hello pword:${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>