为什么 JavaScript 拦截有效 'in the wild'（在网页上）的 formData 在 fiddle 中不起作用？

Question

我在提交事件上使用回调函数来检索 formData。它在 this test page on my web site 上正常工作。我试图构建一个 fiddle 用于另一个问题。我发现相同的代码在 fiddle 中不起作用。它不是正确的 formData，而是 returns 具有 array.length == 0.

的 formData

该代码使用 jQuery 作为 document.ready 函数。 jQuery 已正确加载。

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;

在实时表单中输入数据，formData returns 一个数组，，在相关部分，是这样的：

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

（formData.name 'yui' 属性不是常量。它们是在每次页面加载时动态生成的。它们不能用于引用项目。）

在the fiddle中，控制台是这样的：

formData : Array []

formData.length == 0.

所以，问题是为什么？

HTML: 我的网站是建立在 Squarespace 平台上的，使用它的 'form blocks.' HTML 非常复杂。我不会在这里重现它。

fiddle中的HTML很简单。我在这里复制它，这样你就不必点击了。

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

您的问题与方法的使用有关：

$('form').serializeArray();

.serializeArray() 将查看您提供的表单，并使用表单中存在的每个表单控件的 name 字段构建一个对象数组。正如您所说 name 字段是动态生成的，只有在生成它们时您才会得到结果。如果永远不会生成 name 属性，那么您将永远不会获得数据（因为它们永远不会在您的代码段中生成，您永远不会获得数据）。

因此，为了使 .serializeArray 正常工作，您需要为表单输入提供 name 属性。

查看工作示例 here

另请注意，不需要 new FormData()。您正在使用 $('form').serializeArray();

返回的数组覆盖此数据

为什么 JavaScript 拦截有效 'in the wild'（在网页上）的 formData 在 fiddle 中不起作用？

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

javascript

forms

arrays

jquery

jsfiddle