Dynamically populate the drop down for dynamically created elements in the form

Question

function flavorDefn(e) {
            var locationid = $(e).attr('id');

            var idArray = locationid.split('-');
            var id = idArray[1];
            var flavorDef="flavorDefs"+id;
             $("#"+flavorDef).prop("disabled", true);
            $.getJSON('flavorDefinitions.wss', {
                location : $(this).val(),
                ajax : 'true'
            }, function(data) {
                $("#"+flavorDef).prop("disabled", false);
                var html = '';
                var len = data.length;
                for ( var i = 0; i < len; i++) {
                html += '<option value="' + data[i].id+ '" id="'+data[i].id+'">'
                            + data[i].cpus+' CPU '+data[i].ram+' MB RAM '+data[i].disk+' GB DISK '+ '</option>';
                }
                html += '</option>';
                $("#"+flavorDef).html(html);
            });
        }

<select name="locationName" id="location-<%=patternBO.getId()%>" onchange="flavorDefn(this)">
<select name="flavorDefs" id="flavorDefs<%=patternBO.getId()%>">

In the form there are 2 drop down which are created dynamically after the page loads. I have written a jquery function which will be called when 1st drop down value changes. But when I try to access the dynamically created form field value it says TypeError: e.nodeName is undefined.

Did u try to figure out the line flavorDefn function beyond which control does not propagate. As a JAVA developer not well acquainted with front end development i suggest printing all values in console.log or for quick debug put an alert after every line(not a good way of debugging though) — Wasim Wani, Mar 18 '15 at 16:14

score 0 · Accepted Answer · edited May 23 '17 at 12:28

0

$(document).ready(){
    $('select[name="locationName"]').change(function(){
        var theValue = this.value;
        $('select[name="flavorDefs"]').val(theValue);
    });
});

jsFiddle

If the select is populated after the DOM is initially rendered, you can use event delegation to catch the event:

<script>
$(document).ready(){
    $(document).on('change', 'select[name="locationName"]', function(){
        var theValue = this.value;
        $('select[name="flavorDefs"]').val(theValue);
    });
});
</script>

Reference:

http://davidwalsh.name/event-delegate

How can I select an element by name with jQuery?

edited May 23 '17 at 12:28

Community

1
1

answered Mar 18 '15 at 16:38

cssyphus

37,875
18
96
111

hi Gibberish , Did you notice that I am looking for calling a function on the elements which are created when the form is loaded . Please look at the code id="location-<%=patternBO.getId()%>" this id value will be populated after the form is loaded – Anupam K Mar 18 '15 at 17:11
Please see revised answer. *I recommend against inline js code - poor design, difficult to troubleshoot later on down the road.* – cssyphus Mar 18 '15 at 18:40
Thanks a lot @gibberish. The suggestion worked. If not through the js code then How can it be achieved ? – Anupam K Mar 19 '15 at 04:48
`Inline` code (bad) is where you embed javascript into the HTML tags, such as: ``, whereas external code (good) is contained within `` tags. [Reference1](http://stackoverflow.com/questions/138884/when-should-i-use-inline-vs-external-javascript), [Reference 2](http://programmers.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting) – cssyphus Mar 19 '15 at 10:56
You might find Alex Garrett's (free) video courses to be helpful: http://phpacademy.org -and- [theNewBoston.com](https://www.thenewboston.com/videos.php?cat=32) – cssyphus Mar 19 '15 at 10:58

Dynamically populate the drop down for dynamically created elements in the form

1 Answers1