javascript - 为什么我的form.action与表单提交的内容不同？

我正在尝试建立一个表单，以通过用户填写的表单将数据传输到我的php文件中。我想创建自己的GET请求，因此简化它，但是当我提交表单时，它是与创建的URL不同的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();
}

最佳答案

当您单击表单中的“提交”按钮时，其始终由浏览器调用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);