Why does JavaScript to intercept formData that works 'in the wild' (on a web page) not work in a fiddle?

Question

I use a callback function on a submit event to retrieve the formData. It works correctly on a this test page on my web site. I was attempting to build a fiddle to use for another question. I discovered that the same code does not work in a fiddle. Instead of the correct formData, it returns a formData with array.length == 0.

The code uses jQuery for the document.ready function. jQuery was correctly loaded.

The JavaScript:

01:    /*  doc.ready w/ traditional callback fn for event listener  */
02:
03:    $(document).ready( function() {
04:      init();
05:
06:    });  // end doc.ready
07:
08:    function init() {
09:      document.addEventListener("submit", processFormData);
10:    }  // end def fn init
11:
12:    functon processFormData(event) {
13:      var formData = new FormData();
14:      event.preventDefault();
15:      formData = $( 'form' ).serializeArray();
16:
17:                console.log('formData : ', formData);
18:
19.    }  //  end def fn processFormDat;

With data entered in the live form, formData returns an array that, in relevant part, is this:

3: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
4: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
5: Object {name: "select-yui_3_nnn ... nnn-field", value: "B"}
6: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
7: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
8: Object {name: "select-yui_3_nnn ... nnn-field", value: "C"}
length: 9

(The formData.name 'yui' attributes are not constant. They are generated dynamically on each page load. They cannot be used to reference the items.)

In the fiddle, the console is this:

formData : Array []

formData.length == 0.

So, the Question is why?

The HTML: My website is built on the Squarespace platform using one of its 'form blocks.' The HTML is incredibly complex. I wouldn't try to reproduce it here.

The HTML in the fiddle is simple. I reproduce it here so that you will not have to click through.

01;  <form method="POST">
02:  <div>
03:    <label>First Name
04:      <input type="text" size="25">
05:    </label>
06:  </div>
07:  <div>
08:    <label>Last Name
09:      <input type="text" size="25">
10:    </label>
11:  </div>
12:  </form>

console.config({
  maxEntries: Infinity
});

/*  doc.ready w/ traditional callback fn for event listener  */

$(document).ready(function() {
  init();
}); // end doc.ready

function init() {
  document.addEventListener("submit", processFormData);
} // end def fn init

function processFormData(event) {
  var formData = new FormData();
  event.preventDefault();
  formData = $('form').serializeArray();

  console.log('formData : ', formData);

} //  end def fn processFormData

.as-console-wrapper {
  max-height: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="testForm" method="post">
  <div>
    <label>First Name
    <input type="text" name="fname"  size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select name="select0830">
      <option value="">unsure</option>
      <option value="attend">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select name="select0900">
      <option value="">unsure</option>
      <option value="class room A">room A</option>
      <option value="class room B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select name="select1030">
      <option value="">unsure</option>
      <option value="class room A">room A</option>
      <option value="class room B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>

Answer 1

Your issue is with your usage of the method:

$('form').serializeArray();

.serializeArray() will look at the form you gave it and build an array of object's using the name field from each form control present within the form. As you said the name field is generated dynamically you'll get your result only when they are generated. If the name attributes are never generated then you'll never get your data (as they are never generated in your snippet you'll never get your data).

Thus, in order to get .serializeArray to work, you need to give your form inputs the name attribute.

See working example here

Also note, there is no need for new FormData(). You are overwriting this data with an array returned by $('form').serializeArray();