我正在尝试设置一个表单,通过用户填写的表单将数据传输到我的 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();
}
最佳答案
当您点击表单中的提交按钮时,浏览器总是调用 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);
关于javascript - 为什么我的 form.action 与表单提交的不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55913771/