Почему мое form.action отличается от того, что отправляется в форме?

Question

Я пытаюсь настроить форму для передачи данных в мой файл php через формы, заполненные пользователем. Я хочу создать свой собственный запрос GET, поэтому упростите его, но когда я отправляю свою форму, она отличается от URL, который я создал.

Я консоль зарегистрировал свое form.action и получил (оба сфабрикованных данных):

... / index.php? Search1 = 987654321 & Search2 = 987654321

но полученный URL (я ввел 987654321):

/ index.php? Search1 = 987654321

Файл: index.html

<form id="searchForm" action="/index.php" method="GET">
    <input type="submit" value="Search" onclick="createActionGetRequest()">
    <br><br>
    <text id="search1Text">Social Security Number</text><input id="searchField1" type="text" name="search1"><br>
    <text id="search2Text"></text>
</form>

Файл: helper-functions.js

function createActionGetRequest()
{
  var form = document.getElementById("searchForm");
  var elements = form.elements;
  var values = [];

  for (var i = 0; i < elements.length; i++)
  {
    values.push(encodeURIComponent(elements[i].name) + '=' + encodeURIComponent(elements[i].value));
  }

  var userForm = document.getElementById("userType");
  values.push(encodeURIComponent("userType") + '=' + encodeURIComponent(userForm.value));

  var searchForm = document.getElementById("searchType");
  values.push(encodeURIComponent("searchType") + '=' + encodeURIComponent(searchForm.value));

  // dummy test for GET request
  form.action += '?' + "search1=987654321" + '&' + "search2=987654321";
  console.log(form.action);
  alert('pause');
  form.submit();
}

Answer 1

И несколько советов для вашего кода:

1. Измените элемент submit для типа кнопки, чтобы предотвратить отправку огня ().

<input type="button" value="Search" onclick="createActionGetRequest()">

2. Значения, объединенные из элемента input, должны исключатьэлементы нам не нужны.

for (var i = 0; i < elements.length; i++)
{
    if( elements[i].name.startsWith('search')) {
        values.push(encodeURIComponent(elements[i].name) + '=' + encodeURIComponent(elements[i].value));
    }
}

Answer 2

Когда вы нажимаете кнопку «Отправить» в форме, она всегда вызывает браузер form.submit(). Это означает, что было сделано 2 звонка, /index.php?search1=987654321 сделано браузером и /index.php?search1=987654321&search2=987654321 вашим кодом js

Вы можете добавить event.preventDefault() к createActionGetRequest(), чтобы предотвратить вызов браузера.

function createActionGetRequest(event)
{
   event.preventDefault()
   ...
}

Метод GET также заменяет запросы запросов входными значениями формы. Вы можете добавить другой ввод вместо изменения form.action.

var input = document.createElement("input"); 
input.type = "text"; 
input.name = "search2"; 
form.appendChild(input);