Question

I cannot figure out for the life of me why this will not work. I am trying to pull the value of a textfield that was created with a loop from a json file.

In this code, at the very bottom I just do a simple click(function() {alert()} just to see if I can pull a value and its returning undefined. But if I remove ‘#name’ and put in ‘input’ it captures it, but only for the first of several input fields.

Any help is really appreciated

JSON

{
"Controls": [{
    "Button":[{ "Name":"Button", "x": "1","y": "2","width": "3","height": "4","Transition":"" }],

    "Image":[{"x": "5","y": "6","width": "7","height": "8"}],

    "TextField":[{"x": "9","y": "10","width": "11","height": "12","Rows":""}]
}]

}

The Code(there is soome getJSON stuff above this)

//Slide In Attributes Panel Based on Selected Object
$(document).on('click', '#code li', function () {
    var index = $('#code li').index(this);
    var selected = $(this).text();
    switch (selected) {
        case selected:
            $('#options').hide();
            hidePanels();
            $('#temp').remove();
            $('#objectAttributes').show("slide", 200);
            break;

        //If it does work show what variable is being used
        default:
            alert(selected);
            break;
    }

    //Shows Selected LI Index
    $('#codeIndex').text("That was div index #" + index);

    //Pull list of Attributes for selected Object
    $.getJSON('controls.json', function (data) {
        //Build Attributes List
        var attributeList = '<div id="temp">';
        //Target based on selected object
        var target = selected;
        attributeList += '<div>' + target + '<div>';
        $.each(data.Controls[0][target][0], function (kk, vv) {
            attributeList += '<div style="float:right">' + kk + ':' + '<input type="text" id='+ kk + '>' + '</input>' + '</div>';
        });
        attributeList += '</div></div>';
        attributeList += '</div>';
        $('#objectAttributes').append(attributeList);
        $('#temp').append('<div id="editIndex">'+"Modifying index" + " " +index+'</div>');

        $(document).on('click', '#saveAttributes', function () {
            var $x = $('#name').val();
            alert($x);
        })
    });


});

Answer 1

Ok, so after a little hacking around with a jsfiddle the answer turned out to be a lot simpler than I first thought. Ever since HTML 4.01 class names and IDs have been case sensitive (reference), which means that your selector $('#name') wasn’t matching the JSON Name.

So a simple change, such as in this simplified jsfiddle seems to work as desired. Hopefully this helps!