jquery - SerializeArray() 给出空数组

Question

我正在尝试使用 .seralizeArray() 来获取表单输入值。

输入字段由具有相应价格的商品列表组成；我想根据相应的 key 对保存每个值，但不断收到错误:...长度为 0 的空数组。

我尝试了几种选择器组合，但仍然得到[]。

如何才能成功序列化？

下面是我的代码:

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> 字段如下:

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

此外，请使用 <form> 而不是 <fieldset> 除非您确实有明确的理由用于此目的。

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

引用:w3schools (阅读定义和用法)。

使用相同的概念 here目的是序列化相似项目的集合。

请注意:使用 <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">&#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 (JSfiddle)。

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

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