Question

我目前正在开发一个基于JS的表单处理器，它接受表单字段并根据name=属性将它们定义为多级对象：

<input type="number" step="1" min="1" max="12" name="ui.house.occupant.adult.count">

使用form2js插件，它会创建一个对象。在这种情况下，console.log显示ui对象，如下所示： http://i58.tinypic.com/2gy9duu.jpg

但是，每当我尝试使用alert(ui.house.occupant.adult.count)等任何内容在我的JS代码中访问此属性时，都会抛出house未定义的错误。您可以看到：http://i59.tinypic.com/2guz7s7.jpg

我正在绞尽脑汁试图找出问题所在。当我使用alert(ui.house)时，它会返回一个空白警报。这导致我认为{I} form2js在我尝试访问之前并没有真正正确处理表单数据，但我尝试使用诸如setTimeout之类的内容无效。

对于上下文，我正在加载一个外部CSV文件，该文件使用用户可以选择的数据预填充表单字段，因此为什么第二个屏幕截图显示在$ .ajax函数内。

谢谢！

编辑：更完整的代码示例：

<fieldset id="user_input">
<div class="question_row">
    <label for="ui.house.ng.available">Is natural gas available in your street?</label>
    <div class="question">
        <input type="radio" name="ui.house.ng.available" value="True"> Yes
        <input type="radio" name="ui.house.ng.available" value="False"> No
        <input type="radio" name="ui.house.ng.available" value="False"> Don't know
    </div>
</div>
<div class="question_row">
    <label for="ui.house.occupant.adult.count">How many people live in your home?</label>
    <div class="spec_people question">
        Adults: 
        <input type="number" step="1" min="1" max="12" name="ui.house.occupant.adult.count">
        Children: 
        <input type="number" step="1" min="1" max="12" name="ui.house.occupant.child.count">
    </div>
</div>
</fieldset>

完整的Ajax函数 - 这会引入外部CSV并使用<option>元素填充表单字段以及限制属性。

var ui = new Object;

// Load our external spreadsheet containing constants, questions, and other definitions. Format it nicely.
$.ajax({
    url: "DSD_Master_Constants.csv",
    async: false,
    dataType: "text",
    success: function (csvd) {
        data = $.csv2Array(csvd);
                    // call a function on complete 
        $.each(data, function(index, rows){
            // 0  Constant Type
            // 1  Constant category 
            // 2  Constant subcategory          
            // 3
            // 4
            // 5
            // 6
            // 7  Value (min)   
            // 8  Value (max)   
            // 9  Custom option? (separate with comma)  
            // 10 Custom option value (same sequence)   
            // 11 Unit of measurement   
            // 12 Field type
            // 13 Helpful tip
            // 14 Object code
            if(rows[0] == 'User'){  // Populate User Input Fields
                var inputf = $("[name='"+rows[14]+"']");
                var htmldat = '';
                switch(rows[12]){
                    case 'number':
                        inputf.attr({
                            value: rows[7],
                            placeholder: rows[7],
                            min: rows[7],
                            max: rows[8]
                        });
                        break;
                    case '':    // must be text field
                        break;
                    case 'select':
                        if(rows[9] == ''){  // No custom option, means use min and max values
                            var minno = rows[7];
                            var maxno = rows[8];

                            while(minno <= maxno){
                                htmldat += '<option value="' + minno + '">' + minno + ' ' + rows[11] + '</option>       \
                                ';
                                minno = parseFloat(minno) + 1;
                            }
                            inputf.html(htmldat);
                        } else {    // Must be using a custom option/value set
                            var custom = rows[9].split(', ');
                            var customv = rows[10].split(', ');
                            for(var a in custom){
                                if(customv[a] == ''){ customv[a] = custom[a]; }
                                htmldat += '<option value="' + customv[a] + '">' + custom[a] + '</option>   \
                                ';
                            }
                            inputf.html(htmldat);
                            htmldat = '';
                        }
                        break;
                    case 'radio':

                        break;  
                }

            }
        });
        ui = $("#user_input").toObject();   // Splits form data into objects and sub-objects, based on delimiter (in this case, period '.')
        console.log(ui);
    },
    complete: function () {
        alert(ui.house.occupant.adult.count);
    }
});

我希望这是有道理的 - 我试图简化它以节省人们不得不通过我的整个代码 - 我的坏！

Answer 1

当你做ui = $（“＃user_input”）。toObject（）; ui成了你对象中的一个领域。

访问你需要做的房子ui.ui.house。

仔细查看form2js返回的内容

Answer 2

在您提供的HTML中，没有输入元素ID为＆＃39; user_input＆＃39;在您的代码中引用：

ui = $("#user_input").toObject();   // Splits form data into objects and sub-objects, based on delimiter (in this case, period '.')

也许您还没有包含所有HTML，但是根据您提供的内容，您似乎正在尝试访问不存在的元素。

Javascript：访问多维对象属性

2 个答案: