1

I'm currently working on a JS-based form processor that takes form fields and defines them as multiple-level objects based on the name= attribute:

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

Using the form2js plugin, it creates an object. In this instance, console.log displays the ui object as follows: http://i58.tinypic.com/2gy9duu.jpg

However, whenever I try to access this property in my JS code with anything such as alert(ui.house.occupant.adult.count), it throws the error that house is undefined. You can see: http://i59.tinypic.com/2guz7s7.jpg

I'm racking my brain trying to figure out what the problem is. When I use alert(ui.house), it returns a blank alert. This leads me to think that the form2js has not actually properly processed the form data before I try to access it, however I've tried to use things such as setTimeout to no avail.

For context, I am loading an external CSV file which pre-populates the form fields with data that users can choose from, hence why the second screenshot is shown inside of an $.ajax function.

Thanks!

Edit: More complete example of code:

<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>

And the complete Ajax function - this pulls in an external CSV and populates the form fields with <option> elements as well as limiting attributes.

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);
    }
});

I hope that makes sense - I tried to simplify it to save people having to go through my entire code - my bad!

6
  • Please give a more complete example of your code: see stackoverflow.com/help/mcve; One way is to put your code in jsfiddle. Also please use code blocks instead of screenshots. Guessing it's a scope problem, but can't tell until the big picture is shown. (Especially where the ui object is declared) Commented Sep 3, 2014 at 2:05
  • what is the scope of ui variable? Commented Sep 3, 2014 at 2:23
  • The ui variable is a global object set that will be used in other functions within the current page - hope that answered what you meant by your question. Commented Sep 3, 2014 at 2:29
  • put another console.log(ui); before the alert Commented Sep 3, 2014 at 2:29
  • It appears exactly as before: i58.tinypic.com/2gy9duu.jpg. Whenever I use the 'copy path' feature in Firebug on the ui>house>occupant>adult>count child object, it gives me ui.house.occupant.adult.count, which leads me to believe the ui object is being formatted and populated correctly. Commented Sep 3, 2014 at 2:32

2 Answers 2

1

When you did ui = $("#user_input").toObject(); ui became a field in your ui object.

to access house you need to do ui.ui.house.

look carefully at what form2js returns

Sign up to request clarification or add additional context in comments.

1 Comment

You are a god. Thank you very much - I've spent the last two days racking my brain - I guess to get around this all I would need to do is remove the 'ui.' at the start of each input field. However, I already have functions and selectors based off of the existing 'name's, so I've just redefined the ui object as ui = ui.ui;. Thank you, sincerely.
0

In the HTML you provided, there is no input element with an ID of 'user_input' as referenced in your code:

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

Maybe you haven't included all your HTML, but from what you've provided, it appears that you're trying to access an element that doesn't exist.

1 Comment

The entire form is wrapped in a <fieldset id="user_input">, I forgot to include that in my HTML snippet. Sorry!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.