使用Ajax提交多步骤表单第二步无响应的问题求助

用JavaScript开发多步骤表单，第二步需通过Ajax提交，单独编写了ajaxRequest.js处理请求，但提交时无任何反应。

已排查操作：

• 控制台无报错信息
• 确认Ajax请求URL正确
• 在ajaxRequest.js中添加console.log调试，仍无法定位问题

相关代码片段 #

第二步表单HTML #

<section class ="form-section">
<h4>family geographic</h4>
<div class = "familycontainer">
<div id="adultFormcontainer"></div>
<div id="children-form-container"></div>
</div>
</section>

动态生成字段的increment.js（部分代码） #

function addAdultFields() {
    var numAdults = document.getElementById("numberofAdults").value;
    var parent = document.getElementById("adultFormcontainer");

    // 移除已有字段
    while (parent.lastChild) {
        parent.removeChild(parent.lastChild);
    }

    var adultfirstnameformdata ={};

    for (var i = 1; i <= numAdults; i++) {
        var fieldset = document.createElement("fieldset");
        fieldset.style.display= "flex";
        fieldset.style.flexDirection = "row";
        fieldset.style.marginBottom = '100px';
        fieldset.style.paddingTop = '5px';
        fieldset.classList.add("float-left");

        var legend = document.createElement("legend");
        legend.textContent = "Adult" + i;

        var nameLabel = document.createElement("label");
        nameLabel.classList.add("inline-block");
        nameLabel.textContent = "First Name";

        var nameInput = document.createElement("input");
        nameInput.setAttribute("type", "type");
        nameInput.setAttribute("id", "adult" + i + "FirstName");
        nameInput.setAttribute("name", "adult" + i + "FirstName");
        nameInput.classList.add("form-control");
        nameInput.classList.add("mb-3");
        
        fieldset.appendChild(nameLabel);
        fieldset.appendChild(nameInput);
        parent.appendChild(fieldset); // 注意：原代码缺少这一行，字段未添加到容器中
    }
}

increment.js中的提交监听代码 #

document.getElementById('step2-form').addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  sendFormData(formData);
});

ajaxRequest.js代码 #

function sendFormData(formData) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/submitStep2FormData');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    console.log(xhr.responseText);
  };
  xhr.send(formData);
}

PHP后端代码 #

public function postdata(Request $req){ 
     $first_name = $req->input('adult'.$i.'FirstName');
     dd($first_name);
     }

问题分析与修复方案 #

1. 表单容器缺失 #

当前HTML中没有<form id="step2-form">标签，导致提交监听器无法绑定到有效元素，这是提交无反应的核心原因之一。需要将表单内容包裹在form标签内，并添加提交按钮：

<form id="step2-form">
<section class ="form-section">
<h4>family geographic</h4>
<div class = "familycontainer">
<div id="adultFormcontainer"></div>
<div id="children-form-container"></div>
</div>
<button type="submit">提交第二步</button>
</section>
</form>

2. 动态生成的input类型错误 #

创建input时设置了type="type"，这是无效的输入类型，浏览器无法正确识别，应改为type="text"：

nameInput.setAttribute("type", "text");

3. FormData与请求头不匹配 #

手动设置Content-Type: application/x-www-form-urlencoded，但直接发送FormData对象时，XHR会自动设置multipart/form-data头，两者冲突导致后端无法解析数据。

修复方式二选一：

• 方式一：移除手动设置的请求头

function sendFormData(formData) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/submitStep2FormData');
  // 移除下面这行
  // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    console.log(xhr.responseText);
  };
  xhr.send(formData);
}

• 方式二：将FormData转为urlencoded格式

function sendFormData(formData) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/submitStep2FormData');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    console.log(xhr.responseText);
  };
  const encodedData = new URLSearchParams(formData).toString();
  xhr.send(encodedData);
}

4. PHP后端变量未定义 #

后端代码中$i变量未定义，无法正确获取字段值，需先获取成人数量再遍历：

public function postdata(Request $req){ 
    $numAdults = $req->input('numberofAdults');
    $firstNames = [];
    for($i=1; $i<=$numAdults; $i++){
        $firstNames[] = $req->input("adult{$i}FirstName");
    }
    dd($firstNames);
}

注意：需确保numberofAdults输入框包含在step2-form表单内，FormData才能收集到该参数。

5. 动态字段未添加到容器 #

原addAdultFields函数中，创建的fieldset未添加到adultFormcontainer容器中，需补充：

parent.appendChild(fieldset);

额外调试建议 #

• 在提交监听器中添加console.log('提交触发')，确认监听器是否绑定成功；
• 在sendFormData开头添加console.log([...formData])，查看FormData是否包含预期字段；
• 打开浏览器开发者工具的Network面板，检查请求是否发送、参数是否正确、响应状态码。

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