来自javascript的json记录，espace为空记录

Question

我希望在 JSON 数组中将输入记录到我的表单中，但我不知道为什么它用“{}”记录空项目，当我想在之后使用它时，这是我的视图表单的错误。

我的 javascript 代码：

function update_CF_Data(CF_SortablesForm){
    var mySelector = $("#cf-sortables-form");
    var data_array = new Array();
    $("#cf-sortables-form :input").not("#cf-sortables-form :input[class=optionprix]").each(function(){

        var optionPrix = $(this).siblings("input.optionprix").val();
        var item = {};
        item['name'] = $(this).attr('name');
        item['value'] = $(this).attr('value');

        if ($(this).hasClass('optionname')){
        item['optionprix'] = optionPrix;
        }

        data_array.push(item);

    });
    var sortableContent = JSON.stringify(data_array);
    $('#custom_fields').val(sortableContent);

};

html 表单：

<form id="cf-sortables-form">
<ul>
    <li class="ui-state-default">
    <small>Radio Buttons</small>
    <p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---4969523" id="required---4969523"> <label for="required---4969523">Champs Obligatoire</label></p>
    <input type="text" name="radio-buttons-label---4969523___required" value="Utilisateurs :">
        <ul id="cf-radio-buttons" class="ui-sortable">
        <li class="ui-state-default">
            <input type="text" class="optionname" name="single-radio-button---4969523" value="1 ou 2">
            <img src="images/icon-euro.png" alt="Prix" width="16" height="16">
            <input type="text" class="optionprix" name="single-radio-button---4969523" value="0">
            </li>
        </ul>
    <button class="cfButton button" data-type="single-radio-button"><i class="booked-icon booked-icon-plus"></i>&nbsp;&nbsp;Radio Button</button>
    </li>
    <li class="ui-state-default">
    <small>Checkboxes</small>
    <p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---8940009" id="required---8940009"> <label for="required---8940009">Champs Obligatoire</label></p>
    <input type="text" name="checkboxes-label---8940009___required" value="Options Payantes :">
        <ul id="cf-checkboxes" class="ui-sortable">                         
            <li class="ui-state-default">
            <input type="text" class="optionname" name="single-checkbox---8940009" value="Option 1" optionprix="5">
            <img src="images/icon-euro.png" alt="Prix" width="16" height="16">
            <input type="text" class="optionprix" name="single-checkbox---8940009" value="5">
            </li>                         
        </ul>
    <button class="cfButton button" data-type="single-checkbox"><i class="booked-icon booked-icon-plus"></i>&nbsp;&nbsp;Checkbox</button>
    </li>
    <li class="ui-state-default">
    <small>Paragraphe de texte</small>
    <p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---6402519" id="required---6402519"> <label for="required---6402519">Champs Obligatoire</label></p>
    <input type="text" name="paragraph-text-label---6402519___required" value="Remarque éventuelle :">
    </li>
</ul>
</form>

JSON 记录数组：

[{\"name\":\"required---4969523\",\"value\":\"on\"},{\"name\":\"radio-buttons-label---4969523___required\",\"value\":\"Utilisateurs :\"},{\"name\":\"single-radio-button---4969523\",\"value\":\"1 ou 2\",\"optionprix\":\"0\"},{},{\"name\":\"required---8940009\",\"value\":\"on\"},{\"name\":\"checkboxes-label---8940009___required\",\"value\":\"Options Payantes :\"},{\"name\":\"single-checkbox---8940009\",\"value\":\"Option 1\",\"optionprix\":\"5\"},{},{\"name\":\"required---6402519\",\"value\":\"on\"},{\"name\":\"paragraph-text-label---6402519___required\",\"value\":\"Remarque éventuelle :\"}]

我通过分析表单中的每个输入进行搜索，但我仍然不知道为什么它记录了空数组。

如果项目等于 {}，也许我可以找到一种方法来分隔/避免记录？

Answer 1

在发现我的问题来自“按钮”后解决了问题。

我不知道为什么，但是 javascript 将每个“按钮”记录为一个空对象，所以我只是在 jquery 上添加了一个新的 .not 条件来过滤“按钮”，这没关系。

$("#cf-sortables-form :input").not("#cf-sortables-form :input[class=optionprix]").not("#cf-sortables-form :button").each(function(){

你可以检查这个 jsfiddle => http://jsfiddle.net/q8gwcor0/