2 Replies Latest reply on Jan 19, 2018 4:24 AM by jasonb29017614

    Show/hide multiple dropdown fields

    jasonb29017614

      Hi everyone,

       

      I’m trying to put some JavaScript together to show/hide multiple dropdown fields within a PDF when an option from the previous field is selected.

       

      I've developed some code that works and below is a sample:

       

      if (event.value == "Please Select") {
      this.getField("ccCONchim").display = display.hidden;
      this.getField("ccCONcobs").display = display.hidden;
      this.getField("ccCONchc").display = display.hidden;
      }
      
      
      else if (event.value == "Consumer - Construction & Home Improvement Markets") {
      this.getField("ccCONchim").display = display.visible;
      this.getField("ccCONcobs").display = display.hidden;
      this.getField("ccCONchc").display = display.hidden;
      }
      
      
      else if (event.value == "Consumer - Consumer & Office Business Sponsor") {
      this.getField("ccCONchim").display = display.hidden;
      this.getField("ccCONcobs").display = display.visible;
      this.getField("ccCONchc").display = display.hidden;
      }
      
      
      else if (event.value == "Consumer - Consumer Health Care") {
      this.getField("ccCONchim").display = display.hidden;
      this.getField("ccCONcobs").display = display.hidden;
      this.getField("ccCONchc").display = display.visible;
      

       

      My issue is that I need to condense the code further because when I expand on the code it is too long for the JavaScript import feature (over 1500 lines). I'm looking to develop a solution similar to this below but something that works.

       

      if (event.value == "Please Select") {
      this.getField("ccCONchim", "ccCONcobs", "ccCONchc").display = display.hidden;
      }
      
      
      else if (event.value == "Consumer - Construction & Home Improvement Markets") {
      this.getField("ccCONchim").display = display.visible;
      this.getField("ccCONcobs", "ccCONchc").display = display.hidden;
      }
      
      
      else if (event.value == "Consumer - Consumer & Office Business Sponsor") {
      this.getField("ccCONcobs").display = display.visible;
      this.getField("ccCONchim", "ccCONchc").display = display.hidden;
      }
      
      
      else if (event.value == "Consumer - Consumer Health Care") {
      this.getField("ccCONchc").display = display.visible;
      this.getField("ccCONchim", "ccCONcobs").display = display.hidden;
      }
      

       

      Thank in advance for your help.

       

      Regards

      Jason

        • 1. Re: Show/hide multiple dropdown fields
          try67 MVP & Adobe Community Professional

          I would do it with a literal object that defines which fields should be visible for each value. Something like this:

           

          var data = {
              "Consumer - Construction & Home Improvement Markets" : ["ccCONchim"],
              "Consumer - Consumer & Office Business Sponsor" : ["ccCONcobs"],
              "Consumer - Consumer Health Care": ["ccCONchc"]
          }
          
          for (var i in data) {
              for (var j in data[i]) {
                  this.getField(data[i][j]).display = (event.value==i) ? display.visible : display.hidden;
              }
          }
          

           

          This code basically replaces all of the code you currently have, and is easy to extend and maintain.

          2 people found this helpful
          • 2. Re: Show/hide multiple dropdown fields
            jasonb29017614 Level 1

            Thank you so much try67, this has worked perfectly and it's a fraction of the code I was generating.

             

            Regards

            Jason