How to Hide/Show Form Fields on Add and Edit Item Pages via Jquery

Question

I am creating an inventory application for an intranet. I used a Property Agent module & DotNetNuke application to prepare my form.

Because of many form fields; I want to hide most of the form fields by default and display them when corresponding select value is selected from related dropdowns.

I have succeed to hide/display form fields when adding a new item to Inventory; however I couldn't unhide filled form fields on product edit form. I am not skilled at Jquery so, I tried to use topics here to get desired results with no luck.

My page url for adding an item is: intranetApp/tabid/121/personel/EditProperty/language/tr-TR/Default.aspx

[Show hide works at the page above]

My page url for editing an item is: intranetApp/tabid/121/personel/EditProperty/kayitNo/{propertyid}/language/tr-TR/Default.aspx

[Although I want rows of filled boxes + selected items displayed; they are hidden by default and I need to switch between values of Cihaz Tipi in order to display hidden rows.

I think with your help I can adjust the script and get correct results.

      $(document).ready(function() {
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_5').hide(); //Varsayılan                olarak Cihaz Markası alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_6').hide(); //Varsayılan olarak Diğer Marka alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_7').hide(); //Varsayılan olarak Model alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10').hide(); //Varsayılan olarak Anakart Markası alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11').hide(); //Varsayılan olarak Anakart Modeli alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12').hide(); //Varsayılan olarak Anakart Seri No alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_13').hide(); //Varsayılan olarak İşlemci markası alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_14').hide(); //Varsayılan olarak İşlemci modeli ve frekansı alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_15').hide(); //Varsayılan olarak sistemdeki ram miktarı alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_16').hide(); //Varsayılan olarak Ana Bellek Türü alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_17').hide(); //Varsayılan olarak Ana Bellek Modül Sayısı alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_18').hide(); //Varsayılan olarak Hard Disk türü alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_19').hide(); //Varsayılan olarak Hard Disk Kapasitesi alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_20').hide(); //Varsayılan olarak Hard Disk Seri No alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_21').hide(); //Varsayılan olarak Cihaza Takılı Kartlar alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_22').hide(); //Varsayılan olarak Cihaza Takılı Sürücüler alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_23').hide(); //Varsayılan olarak Monitör markası alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_24').hide(); //Varsayılan olarak Monitör tipi alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_25').hide(); //Varsayılan olarak Monitör boyutu alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_26').hide(); //Varsayılan olarak Monitör seri no alanını sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_27').hide(); //Varsayılan olarak Yazici Renk Secimi alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_28').hide(); //Varsayılan olarak Yazicida Kulllanilan Kagit Tipi alanini sakla
      $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_29').hide(); //Varsayılan olarak Veri Iletisim Agina Baglanti Sekli alanini sakla

      $('#dnn_ctr499_Default_EditProperty_rptDetails_21_3').bind('change', function() { //Cihaz tipi alanindan yapilacak secime gore
var optionValue = $("#dnn_ctr499_Default_EditProperty_rptDetails_21_3").val();

switch (optionValue)
{
  case 'Masaüstü Bilgisayar': // Cihaz tipi listeden masaüstü bilgisayar olarak secildiginde

    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_5").show(); //Cihaz Markası secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_6").hide(); //Diğer Marka seçimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_7").show(); //Cihaz Modeli seçimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10").show(); //Anakart Markası secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11").show(); //Anakart Modeli secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12").show(); //Anakart Seri No secimini goster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_13').show(); //İşlemci Markası seçimini göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_14').show(); //İşlemci modeli ve frekansı seçimini göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_15').show(); //Sistemdeki ram miktarı alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_16').show(); //Ana Bellek Türü alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_17').show(); //Ana Bellek modül sayısı alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_18').show(); //Hard Disk Türü alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_19').show(); //Hard Disk Kapasitesi alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_20').show(); //Hard Disk seri no alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_21').show(); //Cihaza Takılı Kartlar alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_22').show(); //Cihaza Takılı Sürücüler alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_23').show(); //Monitör markası alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_24').show(); //Monitör tipi alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_25').show(); //Monitör boyutu alanını göster
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_26').show(); //Monitör seri no alanını göster

    break;
    case 'Dizüstü Bilgisayar': // Cihaz tipi listeden dizüstü bilgisayar olarak secildiginde
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_5").show(); //Cihaz Markası seçimini göster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_6").show(); //Diğer Marka seçimini göster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_7").show(); //Cihaz Modeli seçimini göster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10").hide(); //Anakart Markası secimini sakla
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11").hide(); //Anakart Modeli secimini sakla
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12").hide(); //Anakart Seri No secimini sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_13').hide(); //İşlemci Markası seçimini sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_14').hide(); //İşlemci modeli ve frekansı seçimini sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_15').hide(); //Sistemdeki ram miktarı alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_16').hide(); //Ana Bellek Türü alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_17').hide(); //Ana Bellek modül sayısı alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_20').hide(); //Hard Disk seri no alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_23').hide(); //Monitör markası alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_24').hide(); //Monitör tipi alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_25').hide(); //Monitör boyutu alanını sakla
    $('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_26').hide(); //Monitör seri no alanını sakla

    break;
  case 'Laser Yazıcı':
  case 'Inkjet Yazıcı':
  case 'Dot Matrix Yazıcı':  
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_27").show(); //Yazici Renk Secimi secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_28").show(); //Yazicida Kulllanilan Kagit Tipi secimini goster
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_29").show(); //Veri Iletisim Agina Baglanti Sekli  secimini goster

  default:
    $("#dnn_ctr499_Default_EditProperty_rptDetails_trItem_10").hide();
    //$('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_11').hide();
    //$('#dnn_ctr499_Default_EditProperty_rptDetails_trItem_12').hide();
    break;
    }
    });
    });

MY HTML is located at:

https://gist.github.com/anonymous/5362300

Answer 1

One option, may not be the most robust, but will work adequately with not too many fields. You can also loop the if statement if other fields are put into an array.

Theory: Use onblur handle with if statement, then run function and pass arguments based on answer.

If cannot add html code, use .bind() from jquery

IE

function checkValues (elementId) {
var checkThis = $(elementId).val();

if (checkThis==/*Enter what you are looking for*/) {
    $("/*SHOW THIS ID*/").show();
    //hide original form element if needed
    $(elementId).hide();
    return;
}
//repeat if statements as necessary

    alert("entry not found");
};

}