JS通过POST提交FormData为空，及FormData构造报错问题求助

我创建了表单和脚本，尝试通过POST请求提交数据，但FormData为空，不清楚原因。我在fetch回调里打印formData发现是空的，还试过用单个输入元素创建FormData，结果报错。

现有代码 #

HTML代码 #

<form id = "form" action="sample.php" method="POST">
<input name="mytext" type="text">
<input id="submit-button" type="submit" value="submit">
</form>

JavaScript代码 #

const form = document.getElementById("form")
const submitButton = document.getElementById("submit-button")

submitButton.onclick = () => {
  event.preventDefault()
  var request = document.createElement('input');
  const formData = new FormData(form)
  const action = form.getAttribute("action")
  const options = {
    method: 'POST',
    body: formData,
  }
  fetch(action, options).then((e) => {
    if (e.status === 200) {
      alert("sent")
      return
    }
    alert("fail")
  })
}

PHP代码 #

$text= $_POST['mytext'];

遇到的问题 #

1. 执行console.log(formData)发现FormData为空，无法正确获取表单输入值
2. 尝试用单个输入元素创建FormData：

const f1 = document.getElementById('mytext');
const fd = new FormData(f1);

出现错误：

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
at submitButton.onclick (test.php:213:14)

解决方法 #

问题1：FormData为空的原因及修复 #

你代码里的event未在回调函数中声明，导致event.preventDefault()可能未正确阻止表单默认提交行为，甚至在部分环境下event会未定义，影响后续逻辑。另外，直接打印FormData对象本身看不到内部数据，需要用get()方法或遍历方式查看。

修正后的JavaScript代码：

const form = document.getElementById("form")
const submitButton = document.getElementById("submit-button")

submitButton.onclick = (event) => { // 显式声明event参数
  event.preventDefault()
  // 移除无用的request创建代码
  const formData = new FormData(form)
  // 正确查看FormData内容
  console.log(formData.get('mytext')) // 打印输入框的实际值
  const action = form.getAttribute("action")
  const options = {
    method: 'POST',
    body: formData,
  }
  fetch(action, options).then((response) => {
    if (response.ok) { // 用response.ok判断请求成功更准确
      alert("发送成功")
      return
    }
    alert("发送失败")
  }).catch(error => {
    console.error('请求出错:', error)
  })
}

问题2：单个输入元素创建FormData报错的原因及修复 #

FormData构造函数的参数必须是HTMLFormElement对象，不能是单个input元素。如果要手动添加单个输入值，需通过append()方法：

const f1 = document.getElementById('mytext');
const fd = new FormData();
fd.append('mytext', f1.value); // 手动添加键值对到FormData

PHP端补充说明 #

用fetch提交FormData时，数据以multipart/form-data格式发送，$_POST可以正常获取，但建议先打印所有POST数据排查问题，同时避免未定义索引错误：

<?php
var_dump($_POST); // 打印所有POST数据，确认是否接收成功
$text= $_POST['mytext'] ?? ''; // 用空合并运算符处理未定义情况

内容的提问来源于stack exchange，提问作者shinzo_abe