serializeArray()给出空数组 [英] serializeArray() gives empty array
问题描述
我正在尝试使用 .seralizeArray() 来收集表单输入值.
输入字段由具有相应价格的物料清单组成；我想将每个值保存在其对应的键对中，但会不断收到错误:... empty array with 0 length.
我尝试了几种选择器组合，但仍然得到[].
如何成功序列化?
下面是我的代码:
HTML
<fieldset id='itemInformation'>
<h2>Items</h2>
<div class="itemGroup">
<input type="text" id="item1Name" value="Item 1" class="itemNames">
<input type="number" step="0.01" id="item1Price" value="0.00">
</div>
<div class="itemGroup">
<input type="text" id="item2Name" value="Item 2" class="itemNames">
<input type="number" step="0.01" id="item2Price" value="0.00">
</div>
<div class="itemGroup">
<input type="text" id="item3Name" value="Item 3" class="itemNames">
<input type="number" step="0.01" id="item3Price" value="0.00">
</div>
<div class="changeNumber">
<button class="increase">+</button>
<button class="decrease">–</button>
</div>
<div class="buttons">
<button class="previousButton btn">Previous</button>
<button class="nextButton btn">Next</button>
</div>
</fieldset>
JS
$('#itemInformation .nextButton').bind('click', function (event) {
event.preventDefault()
console.log($('.itemGroup').serializeArray())
})
抬起头来！
您需要在 all 的 <input> 字段中添加 name 属性，如下所示:
<input type="text" id="item1Name" value="Item 1" class="itemNames" name="itemNames">
此外，请使用 <form> 代替 <fieldset> 除非您确实有明确的理由这样做.
serializeArray(); 的语法如下:$(selector).serializeArray();.
参考资料: w3schools (有关定义和用法，请阅读).
此处使用了相同的概念，目的是序列化相似项的集合./p>
请注意:使用 <form> 元素不是强制性的，只是建议您根据预期目的和上面共享的信息轻松有效地进行序列化您的帖子；我可能对此有误解，但最重要的遗漏之处是 name 属性，该属性用于解释您的空数组 [] ，因为其中有没有可用于序列化.
请记住，根据您的项目要求，您可能需要在需要时使用 <fieldset> .
您可以将 <fieldset> 元素与不同的 id 一起使用，以对要标识为一个单元的相关项目进行分组.因此，您可能会遇到类似这样的情况:
<form id="itemDetails">
<fieldset id="itemInformation">
<!-- itemInformation label and input fields -->
</fieldset>
<fieldset id="itemOrigin">
<!-- itemOrigin label and input fields -->
</fieldset>
<fieldset id="itemDestination">
<!-- itemDestination label and input fields -->
</fieldset>
</form>
然后您可以使用 $('#itemDetails').serializeArray(); 序列化您的整个表单，或者使用 $('#FIELDSET_ID').serializeArray(); 序列化其中 FIELDSET_ID 是相应的 id 您要基于事件从表单中序列化的选定字段集，以实现您的预期目的.
添加了以下代码段，以说明如何有效地将项目与其对应的值配对；
$('#itemInformation .nextButton').bind('click', function (event) {
event.preventDefault();
console.table($('#itemInformation').serializeArray());
console.log($('#itemInformation').serializeArray());
});
<form id="itemDetails">
<!-- grouping all fieldset under a form element with an assigned id where
they can all be hierarchically referenced for precision where needed -->
<fieldset id="itemInformation">
<h2>Items</h2>
<div class="itemGroup">
<input type="number" id="item1Name" placeholder="0.00" class="itemNames" name="item1Name">
</div>
<div class="itemGroup">
<input type="number" id="item2Name" placeholder="0.00" class="itemNames" name="item2Name">
</div>
<div class="itemGroup">
<input type="number" id="item3Name" placeholder="0.00" class="itemNames" name="item3Name">
</div>
<div class="changeNumber">
<button class="increase">+</button>
<button class="decrease">–</button>
</div>
<div class="buttons">
<button class="previousButton btn">Previous</button>
<button class="nextButton btn">Next</button>
</div>
</fieldset>
<!-- other fieldset as necessary and harvest their input separately in
a similar fashion as done with the first one itemInformation -->
<fieldset id="itemOrigin">
<!-- itemOrigin label and input fields -->
</fieldset>
<fieldset id="itemDestination">
<!-- itemDestination label and input fields -->
</fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
下面是在浏览器开发者控制台(此处为Google Chrome浏览器)中上述内容的示例输出；
此外，也可以在此处(JSfiddle)中获得.
您将意识到，每个 <div class="itemGroup"> 都有一个 <input> 元素，该元素具有 no value 属性，但使用 placeholder 来说明预期的输入格式.如果您想预定义一个固定值，以便与一个对应的项目配对，而无需输入任何值，则可以使用 value . name 属性是必需的:请不要忽略它.
这样(如上所述)，当您进行序列化时，将从输入字段中收集的值与相应的输入值和(或)默认值配对.
I'm trying to use .seralizeArray() to harvest form inputs values.
The input fields consist of a list of item with respective corresponding prices; I would like to save each value against its corresponding key pair but keep getting an error: ... empty array with 0 length.
I've tried a few combinations of selectors but still get [].
How can I serialize successfully?
Below is my code:
HTML
<fieldset id='itemInformation'>
<h2>Items</h2>
<div class="itemGroup">
<input type="text" id="item1Name" value="Item 1" class="itemNames">
<input type="number" step="0.01" id="item1Price" value="0.00">
</div>
<div class="itemGroup">
<input type="text" id="item2Name" value="Item 2" class="itemNames">
<input type="number" step="0.01" id="item2Price" value="0.00">
</div>
<div class="itemGroup">
<input type="text" id="item3Name" value="Item 3" class="itemNames">
<input type="number" step="0.01" id="item3Price" value="0.00">
</div>
<div class="changeNumber">
<button class="increase">+</button>
<button class="decrease">–</button>
</div>
<div class="buttons">
<button class="previousButton btn">Previous</button>
<button class="nextButton btn">Next</button>
</div>
</fieldset>
JS
$('#itemInformation .nextButton').bind('click', function (event) {
event.preventDefault()
console.log($('.itemGroup').serializeArray())
})
Heads up!
You need to add a name attribute to all your <input> fields as in:
<input type="text" id="item1Name" value="Item 1" class="itemNames" name="itemNames">
Also, use <form> instead of <fieldset> unless you do have explicit reason for such a purpose.
The syntax for serializeArray(); is as follow: $(selector).serializeArray();.
Reference: w3schools (read on Definition and Usage ).
Same concept used here with the intention to serialize a collection of alike item.
Please note: using of the <form> element is not compulsory but simply recommended to get you easily and effectively serialize based on your intended purpose and information shared above in your post; I might have misread you on that, but the most important thing missing out was the name attribute, which accounts for your empty array [] as there's nothing available to be serialized.
Remember that based on your project requirements, you may have to make use of <fieldset> as and when required.
You may use the <fieldset> element with different ids to group related items you want to identify as a unit. As such, you may have something like this:
<form id="itemDetails">
<fieldset id="itemInformation">
<!-- itemInformation label and input fields -->
</fieldset>
<fieldset id="itemOrigin">
<!-- itemOrigin label and input fields -->
</fieldset>
<fieldset id="itemDestination">
<!-- itemDestination label and input fields -->
</fieldset>
</form>
You can then use $('#itemDetails').serializeArray(); to serialize your entire form or $('#FIELDSET_ID').serializeArray(); where FIELDSET_ID is the corresponding id of a selected fieldset you want to serialize out of your form based on events so as to achieve your intended purpose.
Added the snippet below to illustrate how you can effectively pair up an item with it's corresponding value;
$('#itemInformation .nextButton').bind('click', function (event) {
event.preventDefault();
console.table($('#itemInformation').serializeArray());
console.log($('#itemInformation').serializeArray());
});
<form id="itemDetails">
<!-- grouping all fieldset under a form element with an assigned id where
they can all be hierarchically referenced for precision where needed -->
<fieldset id="itemInformation">
<h2>Items</h2>
<div class="itemGroup">
<input type="number" id="item1Name" placeholder="0.00" class="itemNames" name="item1Name">
</div>
<div class="itemGroup">
<input type="number" id="item2Name" placeholder="0.00" class="itemNames" name="item2Name">
</div>
<div class="itemGroup">
<input type="number" id="item3Name" placeholder="0.00" class="itemNames" name="item3Name">
</div>
<div class="changeNumber">
<button class="increase">+</button>
<button class="decrease">–</button>
</div>
<div class="buttons">
<button class="previousButton btn">Previous</button>
<button class="nextButton btn">Next</button>
</div>
</fieldset>
<!-- other fieldset as necessary and harvest their input separately in
a similar fashion as done with the first one itemInformation -->
<fieldset id="itemOrigin">
<!-- itemOrigin label and input fields -->
</fieldset>
<fieldset id="itemDestination">
<!-- itemDestination label and input fields -->
</fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Below, a sample output of the above in a browser developer console (here: Google Chrome Browser);
Also, available here (JSfiddle).
You will realise that each <div class="itemGroup"> has a single <input> element which has no value attribute but a placeholder to illustrate the expected input format. You may use value instead in case you want to pre-define a fixed value to be paired up against a corresponding item should there be no value entered. The name attribute is necessary: do not omit it.
As such (as above), when you serialize, the values collected from your input field will be paired up with the corresponding entered value and or default one(s).
这篇关于serializeArray()给出空数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
