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!

1
Harley Cummins 3 sep. 2014 a las 06:01

2 respuestas

La mejor respuesta

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

1
Radiance Wei Qi Ong 4 sep. 2014 a las 03:33

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.

0
Johnny 3 sep. 2014 a las 02:24