Update the field by form id in jquery

Question

I have multiple forms with same name but unique form id for each form. Each form has same elements with same name and id. Now how can I tell jquery to update the field on when there is some action on the same form ?

       $('select[name="locationName"]').change(
            function() {
                $('select[name="flavorDefs"]').prop("disabled", true); 
                $.getJSON('flavorDefinitions.wss', {
                    location : $(this).val(),
                    ajax : 'true'
                }, function(data) {
                    $('select[name="flavorDefs"]').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>';
                    }

                    $('select[name="flavorDefs"]').html(html);
                });
            });
});
</script>

And the form will be like

    <form action="provisionserver.wss" name="submitForm" method="POST" id= "formid193.0">
        <select name="locationName" id="locationId"/>
    <select name="flavorDefs" id="flavorDefs"/>
</form>

        <form action="provisionserver.wss" name="submitForm" method="POST" id= "formid194.0">
        <select name="locationName" id="locationId"/>
    <select name="flavorDefs" id="flavorDefs"/>
</form>

Answer 1

Try this code:

   $('select[name="locationName"]').change(
        function() {
            var flavorDefs = $(this).parents('form:first').find('select[name="flavorDefs"]');
            flavorDefs.prop("disabled", true); 
            $.getJSON('flavorDefinitions.wss', {
                location : $(this).val(),
                ajax : 'true'
            }, function(data) {
                flavorDefs.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>';
                }

                flavorDefs.html(html);
            });
        });
    });

You need to get the form parent, and then, find the select with the name you want.