SerializeArray() 给出空数组

我正在尝试使用.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">&#43;</button>
        <button class="decrease">&#8211;</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())
})

小心！

您需要添加一个name归因于all your <input>字段如：

<input type="text" id="item1Name" value="Item 1" class="itemNames" name="itemNames">

另外，使用<form> https://developer.mozilla.org/en/docs/Web/HTML/Element/form代替<fieldset> https://developer.mozilla.org/en/docs/Web/HTML/Element/fieldset除非您确实有明确的理由用于此目的。

语法为serializeArray();如下：$(selector).serializeArray();.

参考：w3学校 http://www.w3schools.com/jquery/ajax_serializearray.asp（阅读定义和用法）.

使用相同的概念here https://stackoverflow.com/a/9589154/6381711旨在序列化相似项目的集合.

请注意: 使用<form>元素不是强制性的，只是建议您根据您的预期目的和上面在帖子中共享的信息轻松有效地进行序列化；我可能误解了你的意思，但最重要的是错过了name属性，它解释了你的空数组[]因为有nothing可以序列化。

请记住，根据您的项目要求，您可能必须使用<fieldset>当需要时。

您可以使用<fieldset>元素具有不同的ids 将您想要识别为一个单元的相关项目分组。因此，你可能会遇到这样的情况：

<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(); where 字段集_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">&#43;</button>
            <button class="decrease">&#8211;</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 浏览器）；

也提供here https://jsfiddle.net/nyedidikeke/q2ggwszg/（JS小提琴）.

你会意识到，每一个<div class="itemGroup">有一个<input>元素有no value属性但是一个placeholder来说明预期的输入格式。您可以使用value相反，如果您想预先定义一个固定值，以便在没有输入值的情况下与相应的项目配对。这name属性是必需的：不要省略它。

因此（如上所述），当您序列化时，从输入字段收集的值将与相应的输入值和/或默认值配对。