Actualmente estoy trabajando en un procesador de formularios basado en JS que toma campos de formulario y los define como objetos de múltiples niveles basados en el atributo name=
:
<input type="number" step="1" min="1" max="12" name="ui.house.occupant.adult.count">
Usando el complemento form2js, crea un objeto. En este caso, console.log
muestra el objeto ui de la siguiente manera: http://i58.tinypic.com/2gy9duu.jpg
Sin embargo, cada vez que intento acceder a esta propiedad en mi código JS con algo como alert(ui.house.occupant.adult.count)
, arroja el error de que house
no está definido. Puede ver: http://i59.tinypic.com/2guz7s7.jpg
Estoy atormentando mi cerebro tratando de descubrir cuál es el problema. Cuando uso alert(ui.house)
, me devuelve una alerta en blanco. Esto me lleva a pensar que el form2js
no ha procesado correctamente los datos del formulario antes de intentar acceder a él, sin embargo, he intentado usar cosas como setTimeout
en vano.
Por contexto, estoy cargando un archivo CSV externo que rellena previamente los campos del formulario con datos que los usuarios pueden elegir, por lo tanto, la segunda captura de pantalla se muestra dentro de una función $ .ajax.
¡Gracias!
Editar: ejemplo más completo de código:
<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>
Y la función completa de Ajax: esto extrae un CSV externo y llena los campos del formulario con elementos <option>
, así como atributos limitantes.
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);
}
});
Espero que tenga sentido. Traté de simplificarlo para evitar que las personas tengan que revisar todo mi código. ¡Lo malo!
2 respuestas
Cuando hiciste ui = $ ("# user_input"). ToObject (); ui se convirtió en un campo en su objeto ui.
Para acceder a la casa necesita hacer ui.ui.house.
Mira cuidadosamente lo que devuelve form2js
En el HTML que proporcionó, no hay ningún elemento de entrada con un ID de 'user_input' como se hace referencia en su código:
ui = $("#user_input").toObject(); // Splits form data into objects and sub-objects, based on delimiter (in this case, period '.')
Tal vez no haya incluido todo su HTML, pero de lo que ha proporcionado, parece que está intentando acceder a un elemento que no existe.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.