我正在使用JavaScript处理一个多步骤表单，需要通过Ajax提交表单的第二步。我创建了一个单独的JavaScript文件ajaxRequest.js来处理Ajax请求，该请求是从表单的第二步调用的。但是，当我提交表单时，什么也没发生。
以下是我目前所做的尝试：
我已经检查了控制台是否有任何错误，但是没有发现任何错误。我已经确保Ajax请求被发送到正确的URL。我已经尝试通过放置console.log语句来调试ajaxRequest.js文件，但是我仍然无法找出问题所在。下面是我的项目的相关部分的代码：
表单第二步的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的javascript文件，它可以根据用户需要动态创建字段数量
这是我的increment.js代码

function addAdultFields() {
   // Get the number of adults specified in the input element
    var numAdults = document.getElementById("numberofAdults").value;

    // Get the parent element to which we'll add the new form fields
    var parent = document.getElementById("adultFormcontainer");

     // Remove any existing form fields (in case the number of adults was changed)
      while (parent.lastChild) {
      parent.removeChild(parent.lastChild);
      }

     // testing this object will hold the value of the input field
       var adultfirstnameformdata ={};

     // Generate a new set of form fields for each adult
     for (var i = 1; i <= numAdults; i++) {

     // create a fieldset to hold the adult info
       var fieldset = document.createElement("fieldset");

    //styling the field set 

    //fieldset.style.border = "1px outset gray";

     fieldset.style.display= "flex";
     fieldset.style.flexDirection = "row";

     fieldset.style.marginBottom = '100px'; // add margin to the bottom
      fieldset.style.paddingTop = '5px'; // add padding to the bottom

    /*fieldset.style.backgroundColor ="blue";*/
  
   // we want the adult information to be on the left of the container while the child info is 
     on the right 
    fieldset.classList.add("float-left");

    // a legend should be create for the adult info
    var legend = document.createElement("legend");
   legend.textContent = "Adult" + i;

    // Create a new label element for the adult's name
     var nameLabel = document.createElement("label");
     nameLabel.classList.add("inline-block");
    //nameLabel.setAttribute("for", "adult" + i + "First Name");
      nameLabel.textContent = "First Name" ;  // "Adult " + i + " First Name:"

    // Create a new input element for the adult's 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);

在increment.js中调用Ajax请求的JavaScript代码如下所示：

document.getElementById('step2-form').addEventListener('submit', function(event) {
  event.preventDefault();

  // collect form data using FormData
  const formData = new FormData(event.target);

  // call the AJAX request function from ajaxRequest.js
  sendFormData(formData);
});

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);
}

第一步确实有效，因为表单不是动态创建的，我有一个处理它的途径。
任何帮助或建议如何解决这个问题将不胜感激。谢谢你提前!