serializeArray()提供空数组

Question

我试图使用.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())
})

Answer 1

当心！

您需要将name属性添加到<input>字段的all中，如下所示：

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

另外，使用而不是，除非您有明确的理由来达到这样的目的。

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

参考：http://www.w3schools.com/jquery/ajax_serializearray.asp (阅读关于定义和用法)。

同样的概念使用https://stackoverflow.com/a/9589154/6381711来序列化一个相似项的集合。

请注意，<form>元素的使用并不是强制性的，而是建议您根据您的预期目的和在文章中共享的信息轻松和有效地序列化；我可能在这方面误解了您，但最重要的是遗漏了name属性，它解释了您的空数组[]，因为没有什么可序列化的。

请记住，根据您的项目需求，您可能必须在需要时使用<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();，其中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">&#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浏览器)中的上述示例输出；

​

​

同时，可用的https://jsfiddle.net/nyedidikeke/q2ggwszg/ (JSfiddle)。

您将意识到每个<div class="itemGroup">都有一个<input>元素，它没有、没有 value属性，而是一个placeholder来说明预期的输入格式。如果没有输入值，您可以使用value来预先定义一个固定值，以便与相应的项配对。name属性是必要的:不要省略它。

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

Answer 2

.serializeArray()方法对成功的控件使用标准的W3C规则来确定它应该包含哪些元素；特别是不能禁用元素，并且必须包含名称属性。

IMO，使用form并将name属性应用于所有输入。

var formdata = $( "#itemInformation" ).serializeArray();

FYI，使用form是一个很好的实践，但使用它并不是强制性的。

正式文档serializeArray()

​

$('#itemInformation .nextButton').bind('click', function (event) {
    event.preventDefault()

    console.log($('#itemInformation').serializeArray())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id='itemInformation'>
        <h2>Items</h2>
        <div class="itemGroup">
            <input type="text" id="item1Name" name="item1Name" value="Item 1" class="itemNames">
            <input type="number" step="0.01" name="item1Price" id="item1Price" value="0.00">
        </div>
        <div class="itemGroup">
            <input type="text" id="item2Name" name="item2Name" value="Item 2" class="itemNames">
            <input type="number" step="0.01" name="item2Price" id="item2Price" value="0.00">
        </div>
        <div class="itemGroup">
            <input type="text" name="item3Name" id="item3Name" value="Item 3" class="itemNames">
            <input type="number" step="0.01" name"item3Price" 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>

​