0

I have the following code that when a user selects from a drop down, the selectedIndex is used to refer to the corresponding array (var varNames0, var varNames1, etc) of form field variables stored in a browser cookie. When the user clicks the edit button, the correct form values should display, along with their values set by the user.

How do I go about pulling the form values correctly, based on the following code. I am almost there, but only seeing the first letter of each array value, and the location in the array is displayed at the bottom of the form that pops up.

<a href="#" id="btn_editvars" onclick="showEditVars();">Edit Vars</a>

<select id="product" name="product" >
        <option value="prod1" selected>Prod 1</option>
        <option value="prod2" >Prod 2</option> 
        <option value="prod3" >Prod 3</option>
        <option value="prod4" >Prod 4</option>
</select>

var varNames0 = [
        "property1", 
        "property2",
        "top",
        "property3",
        "property4",
        "closeBtn",
        "loadingText",
        "property5"];

var editableVars = function(){
        var html = "";

        var varNames = "varNames" + document.getElementById("product").selectedIndex;
        for(var i in varNames){
            html += "<p><label for="+varNames[i]+">"+varNames[i]+":</label> <input type=\"text\" id=\""+varNames[i]+"\" placeholder=\"enter "+varNames[i]+"...\" value=\""+socialVars[varNames[i]]+"\" /></p>";

        }
3
  • What happens when there is no cookie associated to the dropdown? Jan 13, 2014 at 15:41
  • The form will show up with blank fields.
    – Matt
    Jan 13, 2014 at 15:45
  • Currently I am getting the form, but the variables are not showing up correctly, and the fields are showing "undefined".
    – Matt
    Jan 13, 2014 at 15:46

2 Answers 2

2

How about making it a little easier on yourself, if possible, and structuring things like this:

var varNames = [
    [
        "property1", 
        "property2",
        "top",
        "property3",
        "property4",
        "closeBtn",
        "loadingText",
        "property5"
    ]
];

var editableVars = function(){
        var html = "";

        var data = varNames[document.getElementById("product").selectedIndex];
        for(var i in data){
            html += "<p><label for="+data[i]+">"+data[i]+":</label> <input type=\"text\" id=\""+data[i]+"\" placeholder=\"enter "+data[i]+"...\" value=\""+socialVars[data[i]]+"\" /></p>";
        }
0

The key was to use switch statements:

var varNames;
        switch(document.getElementById("product").selectedIndex)
        {
        case 0:
            varNames = varNames0
            break;
        case 1:
            varNames = varNames1
            break;
        case 2:
            varNames = varNames2
            break;
        case 3:
            varNames = varNames3
            break;
        }

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.