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> 字段如：

<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 是相应的<您希望根据事件从表单序列化所选字段集的em> id ，以实现您的预期目的。

添加了下面的代码段，说明如何有效地将项目与其对应的值配对;

＆＃13;

$('#itemInformation .nextButton').bind('click', function (event) {
    event.preventDefault();
    console.table($('#itemInformation').serializeArray());
    console.log($('#itemInformation').serializeArray());
});

＆＃13;

<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>

＆＃13;

下面是浏览器开发者控制台（此处为：Google Chrome浏览器）中的上述示例输出;

另外，可用here（JSfiddle）。

您会发现每个 <div class="itemGroup"> 都有一个 <input> 元素，其否 < / strong> value 属性，但 placeholder 用于说明预期的输入格式。如果您没有输入任何值，则可以使用 value 来预先定义要与相应项目配对的固定值。 name 属性是必需的：不要忽略它。

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

Answer 2

.serializeArray()方法使用标准W3C规则来成功控制，以确定它应包含哪些元素;特别是该元素不能被禁用，并且必须包含name属性。

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

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

仅供参考，使用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>

serializeArray（）给出空数组

2 个答案: