为什么JavaScript需要截取有效的formData'；在野外'；（在网页上）不在小提琴上工作？

我对submit事件使用回调函数来检索formData。它可以在我的电脑上正常工作。我在试着编一把小提琴来回答另一个问题。我发现同样的代码在小提琴上是不起作用的。它返回的formData不是正确的formData，而是

array.length==0

代码对document.ready函数使用jQuery。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;

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 : Array []

在live表单中输入数据后，formData返回一个数组，该数组在相关部分中，是这样的：

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;

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 : Array []

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

在中，控制台是这样的：

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;

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 : Array []

formData.length==0

所以，问题是为什么？

HTML: 我的网站是在Squarespace平台上建立的，使用了它的一个“表单块”。HTML非常复杂。我不会在这里复制它

小提琴中的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>

。作为控制台包装器{
最大高度：100%！重要；
}

名字
姓
电子邮件地址
08:30主讲人
不确定
出席
不出席
09:00上课
不确定
A房间
B房间
10:30上课
不确定
A房间
B房间

您的问题在于该方法的使用：

$('form').serializeArray();

将查看您提供的表单，并使用表单中存在的每个表单控件的

name

字段构建一个对象数组。正如您所说，

name

字段是动态生成的，只有在生成它们时才能得到结果。如果从未生成

name

属性，则您将永远无法获取数据（因为它们从未在代码段中生成，所以您将永远无法获取数据）

因此，为了使

.serializeArray

工作，您需要为表单输入提供

name

属性

参见工作示例

---

另外请注意，不需要

newformdata（）

。您正在使用

$（'form'）返回的数组覆盖此数据。serializeArray（）
请参见：“.serializeArray（）方法使用标准的W3C规则成功控制，以确定它应该包含哪些元素；尤其是该元素不能被禁用，并且必须包含name属性。”此外，您需要在问题中包含。看见最好的方法是使用内置的代码段编辑器。您当前的问题包含不完整的代码和不必要的行号，并且缺少一些元素。@Herohtar:感谢您指出堆栈代码段。我在问题上加了一个。感谢您提供有关
名称
属性的信息。在代码片段中，我向表单字段添加了名称。这就解决了问题。这也解释了为什么js在我的测试页面上工作。我使用浏览器的元素检查器查看每个字段上的名称属性/我应该考虑尝试查找
serializeArray（）
上的文档。至于不完整的代码，我相信你错了。这19行js都在测试页面的js中。我看不到任何缺失的元素。再次感谢，非常感谢！对于不完整的代码，我没有弄错，但我说的是HTML，而不是JavaScript——看一下原始的HTML列表，它仍然在您的问题中：在末尾有一个
标记，没有结束标记，它不包括任何提交按钮，
也缺少结束标记。@Herohtar感谢您的坚持。我为草率的HTML表示歉意。再次感谢您之前的两条评论，当我与下面的Nick Parsons答案一起阅读它们时，它们给了我答案。我把他的答案标记为被接受的答案，但也对你的两条评论投了赞成票。非常感谢！在您的回答和@herchtar的评论之间，我理解。它解释了为什么代码在我的站点的测试页面上工作。每个表单元素都有一个name属性。它们确实是“yui”名称。但是doc.ready项目应该解决这个问题，不是吗？在显示表单时，所有标记都具有名称属性。ready使js在所有HTML元素就位之前不会执行。我不能在js中使用name属性，但至少在我的情况下，我不需要这样做。再次感谢你的解释。这很有帮助。@alxfyv是的，你说得对。名称属性应该动态添加到元素中，因此不需要为站点添加名称属性。