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

【问题标题】：Why is my form.action different than what gets submitted by the form?为什么我的 form.action 与表单提交的内容不同？
【发布时间】：2019-04-30 03:58:13
【问题描述】：

我正在尝试设置一个表单，通过用户填写的表单将数据传输到我的 php 文件。我想创建自己的 GET 请求以简化它，但是当我提交表单时，它与我创建的 URL 不同。

我在控制台记录了我的 form.action 并得到了（都是捏造的数据）：

.../index.php?search1=987654321&search2=987654321

但我得到的网址是（我输入了 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();
}

【问题讨论】：

表单提交发生了两次？

标签： javascript php html get forms

【解决方案1】：

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

【讨论】：

我添加了 event.preventDefault();到我的功能代码的顶部，我还尝试将我的搜索按钮设置为按钮类型而不是提交类型，但我仍然遇到相同的错误
哦，GET 方法也将请求查询替换为表单输入值。您可以添加另一个输入而不是更改 form.action。 ``` var input = document.createElement("input"); input.type = "文本"; input.name = search2"; form.appendChild(input); ```
感谢您的提示！我这样做了，它奏效了。如果您找到一种无需额外输入类型的方法，请告诉我！

【解决方案2】：

以及对您的代码的一些建议：

1.将提交元素更改为按钮类型以防止触发submit()。

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

2.从输入元素加入的值应该排除我们不需要的元素。

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

【讨论】：