我目前正在在基於JS-形式的處理器,需要表單字段和定義它們基於所述name=
屬性爲多個級別的對象:的Javascript:訪問多維對象屬性
<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)
時,它會返回空白警報。 這導致我認爲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);
}
});
我希望這是有道理的 - 我試圖簡化它,以節省人們不得不通過我的整個代碼 - 我的壞!
請給你的代碼的更完整的例子:看http://stackoverflow.com/help/mcve;一種方法是把你的代碼放在jsfiddle中。 也請使用代碼塊,而不是截圖。 猜測這是一個範圍問題,但直到顯示大圖時才能分辨出來。 (尤其是聲明UI對象的地方) – 2014-09-03 02:05:50
ui的變量範圍是什麼? – Igor 2014-09-03 02:23:45
'ui'變量是一個全局對象集,將在當前頁面的其他函數中使用 - 希望能回答你的問題。 – 2014-09-03 02:29:05