Dynamic CCE forms for better UX: www.tamberra.com/blog

submitEvent_ovr.pbs

<form class="form-horizontal" name="eventSubmit" id="eventSubmit" method="POST" enctype="multipart/form-data" action="">
 <fieldset class="event_info">
	<legend>Event Information</legend>
    
    <label>Event name:</label> 
    <div class="input-prepend">
            <input class="required" type="text" name="title" placeholder="Event name">
    </div><br>
    <label>Category:</label> 
    <div class="input-prepend">
            <select name="Type" class="required" id="event_cat">
                <option value="">---Select---</option>
                <pbs:ccefields module=1 class=11 field="Type" all=1 optionlist=0>
            </select>
    </div>
    
    <label class="disabledlabel" for="event_subcat">Sub-Category:</label> 
    <div class="input-prepend">
            <select name="SubType" class="required" id="event_subcat" disabled>
                <option value="">---Select---</option>
            </select>
    </div>
    </fieldset>
</form>

<script>
$(function() {
    // Updates the category (subtype) drop downs upon selecting a type
    $("select#event_cat").change(function(){
      $.getJSON("/section/eventTypeJSON",{typefield: 'subtype', parenttype: $(this).val()}, function(j){
        var options = '';
        for (var i = 0; i < j.length-1; i++) {
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';    
        }
        if (j.length>2){
            $("select#event_subcat").html(options).removeAttr('disabled');
            $("label[for=event_subcat]").removeClass("disabledlabel");
        }
        else{
            $("select#event_subcat").attr('disabled', 'disabled').addClass("disabledlabel");
            $("label[for=event_subcat]").addClass("disabledlabel");
        }
      })
    });
});
</script>