Dynamically Display Form Fields.md

Dynamically Display Form Fields.md

Using jQuery to hide and show fields. Making sure to clear fields if they are not longer appropriate. Using Select2 with json and ajax is better than hard coding options.

Dynamically Display with Picklist

$(document).ready(function(){    

    // Hide SNMP fields if not already selected,  also Hides/Shows closest div with no Id or Class
    if($('#id_check_cmd').val() != 3) {
        $("#id_snmp_type").closest(".mws-form-col-5-8").hide()
        $("#id_snmp_oid").closest(".mws-form-col-5-8").hide()
    }

    // Show and Hide/Clear SNMP fields, also Hides closest div with no Id or Class
    $("#id_check_cmd").change(function(){
        if(this.value == 3){
            $("#id_snmp_type").closest(".mws-form-col-5-8").show()
            $("#id_snmp_oid").closest(".mws-form-col-5-8").show()
        }
        else{
            $("#id_snmp_type").closest(".mws-form-col-5-8").hide()
            $("#id_snmp_oid").closest(".mws-form-col-5-8").hide()
            $("#id_snmp_type").val("")
            $("#id_snmp_oid").val("")
        }
    });

    // Populate OID based on Type ### SELECT2 IS BETTER OPTION ###
    $("#id_snmp_type").change(function(){
        if(this.value == "HyperV & NAS - Smart Disk Status"){
            $("#id_snmp_oid").val(".1.3.6.1.4.1.6574.5.1.1.9");
        }
        if(this.value == "NAS - Available Disk Space"){
            $("#id_snmp_oid").val(".1.3.6.1.4.1.6574.3.1.1.5.0");
        }
        if(this.value == "NAS - Raid Status"){
            $("#id_snmp_oid").val(".1.3.6.1.4.1.6574.3.1.1.3.0");
        }
        if(this.value == "UPS - Output Status"){
            $("#id_snmp_oid").val(".1.3.6.1.4.1.318.1.1.1.4.1.1.0");
        }
        if(this.value == "VM - Available Disk Space"){
            $("#id_snmp_oid").val(".1.3.6.1.4.1.2021.9.1.7.1");
        }
        if(this.value == "VM - CPU Usage"){
            $("#id_snmp_oid").val(".1.3.6.1.4.1.2021.10.1.3.1");
        }
        if(this.value == "VM - Memory Usage"){
            $("#id_snmp_oid").val(".1.3.6.1.4.1.2021.4.11.0");
        }
    });
});

Dynamically Display with Checkbox and Looping over Array.

$(document).ready(function(){

  var looper = [
    '#id_service_company', 
    '#id_service_company',
    '#id_service_technician',
    '#id_service_date', 
    '#id_service_hours', 
    '#id_service_rate',
    '#id_travel_hours', 
    '#id_travel_rate', 
    ]

  $('#id_urgency').closest('.form-group ').append('<h3>Closing Details</h>');

  if($('#id_serviced').prop('checked')){
    $('#id_tech_notes').closest('.form-group ').append('<h3 id="sd">Service Details</h>');
    for(i=0; i<=looper.length; i++){
      $(looper[i]).closest('.form-group').show();  
    }
  }else{
    for(i=0; i<=looper.length; i++){
      $(looper[i]).closest('.form-group').hide();  
    }
  }

  $('#id_serviced').on('click', function(){
    if($(this).prop('checked')){
      $('#id_tech_notes').closest('.form-group ').append('<h3 id="sd">Service Details</h>');
      for(i=0; i<=looper.length; i++){
        $(looper[i]).closest('.form-group').show();  
      }
    }else{
      $('#sd').remove();
      for(i=0; i<=looper.length; i++){
        $(looper[i]).closest('.form-group').hide(); 
        $(looper[i]).val('');  
      }
    }
  });
});