1👍
✅
Two solutions come to mind here…
1)
Attach a jQuery change handler to the ‘Type of Event’ select element, and execute an ajax request to return the dynamic fields that will need to be displayed.
$('#TYPE_OF_EVENT_ID').change(function() {
$.get('/api/to/return/dynamic/fields/', {'type_of_event': $(this).val()}, function(data, textStatus, jqXHR) {
# Update DOM with dynamic content return by data (should probably be JSON)
});
});
2)
Hard code the logic straight into your javascript to handle the case statements to display the dynamic fields depending upon the value which is selected in the ‘Type of Event’ select element.
$('#TYPE_OF_EVENT_ID').change(function() {
switch($(this).val()) {
case 'Special Event':
# Show Special Event Fields
case 'Non Special Event':
# Show Non Special Event Fields
}
});
I’d recommend option 1 as it scales better keeping this logic on the server to be database driven.
Source:stackexchange.com