4 Replies Latest reply on Nov 13, 2013 6:49 AM by John Frederick Chionglo

    How do I fill and show/hide a series of text boxes based on checkboxes?

    Andi Hagen

      I have a series of checkboxes on a form (each of which requires some additional information to be entered) and a series of text boxes further down the page to house any necessary detailed information. 

      I have hidden the detail fields and coded the form so that for each of these checkboxes that is checked a row of detail text boxes appears with the checkbox title in the activiy type field, and if a checkbox is subsequently un-checked the last row of detail text boxes is hidden. 

      The problem with this is that if the user unchecks any box other than the most recently checked one the data for the option they just unchecked still shows, but the data for the last option they selected does not. 

       

      Does anyone have a solution that would make sure the detail fields for the boxes that are checked is displayed in the detail text boxes that are showing when a checkbox is unchecked, regardless of the order in which the boxes are checked/unchecked?

       

      This is what my form looks like, with the example where Cash Withdrawals is unchecked but appears in the detail and Remote Deposit Capture is checked but was hidden with the last line:

      FormSample.jpg

      The detail groups are named Act1.child, Act2.child, etc. where the description field (filled in the example above) is Act1.type, Act2.type, etc.

       

      Here is the script I'm using on the checkboxes to achieve what I'm getting now:

               

      var useSet = this.getField("Set").value;
      var clrSet = this.getField("Clr").value;
      var useType = useSet + ".type";
      var clrType = clrSet + ".type";

      if (this.getField("CheckboxName").value != "Off") {
          this.getField(useType).value = "Check Box Desription";
          this.getField(useSet).display = display.visible;
      }
      else if (this.getField("CheckboxName").value == "Off") {
          this.getField(clrType).value = "";
          this.getField(clrSet).display = display.hidden;
      }

       

       

      and here is the script for the hidden boxes that determine what sets are filled and what sets are cleared and hidden:

      Custom Calculation Script for "Set":

       

      var sOne = this.getField("Act1.type").value.length;
      var sTwo = this.getField("Act2.type").value.length;
      var sThr = this.getField("Act3.type").value.length;
      var sFour = this.getField("Act4.type").value.length;
      var sFive = this.getField("Act5.type").value.length;
      var sSix = this.getField("Act6.type").value.length;
      var sSev = this.getField("Act7.type").value.length;

      if (sOne == 0) {event.value = "Act1"}
      else if (sTwo == 0) {event.value = "Act2"}
      else if (sThr == 0) {event.value = "Act3"}
      else if (sFour == 0) {event.value = "Act4"}
      else if (sFive == 0) {event.value = "Act5"}
      else if (sSix == 0) {event.value = "Act6"}
      else {event.value = "Act7"}

       

       

      Custom Calculation Value for "Clr":

       

      var cOne = this.getField("Act1.type").value.length;
      var cTwo = this.getField("Act2.type").value.length;
      var cThr = this.getField("Act3.type").value.length;
      var cFour = this.getField("Act4.type").value.length;
      var cFive = this.getField("Act5.type").value.length;
      var cSix = this.getField("Act6.type").value.length;
      var cSev = this.getField("Act7.type").value.length;

      if (cSev != 0) {event.value = "Act7"}
      else if (cSix != 0) {event.value = "Act6"}
      else if (cFive != 0) {event.value = "Act5"}
      else if (cFour != 0) {event.value = "Act4"}
      else if (cThr != 0) {event.value = "Act3"}
      else if (cTwo != 0) {event.value = "Act2"}
      else {event.value = "Act1"}

        • 1. Re: How do I fill and show/hide a series of text boxes based on checkboxes?
          John Frederick Chionglo Level 1

          Hi Andi,

           

          I want to make sure I understand your problem and requirements. So I am going to repeat what you said in my own words. Please let me know if I understand your problem and requirements.

           

          Given several checkboxes in a form. Every checkbox has a related set of text fields. When a checkbox is selected, the related set of text fields should appear. When the checkbox is not selected, the related set of text fields should disappear.

           

          The sets of text fields are organized in a sequence. When a set of text fields appear, it is appended to the sequence. When a set of text fields disappear, the sets of text fields after the set of text fields that disappeared “shifts to fill the gap" left by the set of text fields that disappeared.

           

          Problem: When a user unchecks a checkbox other than the most recently checked checkbox, the most recent set of related text fields (the checked checkbox) disappear.

           

          Comments?

           

          Regards,

           

          John

          • 2. Re: How do I fill and show/hide a series of text boxes based on checkboxes?
            Andi Hagen Level 1

            Actually, what I wanted was that "shift to fill the gap" but what I was getting was the most recently added set of text fields was being removed, regardless of whether the data in that set matched the checkbox that was being unchecked.  I actually got around this (mostly) with a couple of document-level functions, and by removing the calculation script from MainClr:

             

             

            This one adds a "label" in a hidden field to the text box set when it is displayed for use:

             

                 function boxCheck()
                 {
                 var useSet = this.getField("Set").value;
                 var useType = useSet + ".type";
                 var clrFld = "Clr." + useSet;

             

                 this.getField(useType).value = t;
                     this.getField(clrFld).value = t;
                     this.getField(useSet).display = display.visible;
                 }

             

             

            This one determines which text box set matches the box that is being unchecked and puts the parent-level name of that set in a hidden field, then hides the textboxes and resets the values in the description field and the hidden label field:

               

            function unCheck()
                      {var oParent = this.getField("Clr");
                      var aChildren = oParent.getArray();
                      var cFieldName;
                      var cFieldValue;

             

                 for (i = 0; i < aChildren.length; i++) {
                     cFieldName = aChildren[i].name;
                     cFieldValue = aChildren[i].value;
                         if(cFieldValue == t) {this.getField("MainClr").value = cFieldName}
                      }   

             

                 var fullName = this.getField("MainClr").value;
                      var elements = fullName.split(".");
                      var clrParent = elements[0];
                      var clrChild = elements[1];
                      var clrArray = [clrChild];
                      var clrClr = "Clr." + clrChild;

             

                      this.resetForm(clrArray);
                      this.getField(clrChild).display = display.hidden;
                      this.getField(clrClr).value = "";
                 }

             

             

            These functions are called from my checkboxes using this simple script:

             

                 var t = event.targetName;
                 var xFld = this.getField(t).isBoxChecked(0);

             

                 if (xFld) {
                     boxCheck()
                 }
                 else if (!xFld) {

                      unCheck()
                 }

             

             

            It doesn't shift the remaining fields up if a box corresponding to a "middle" set of text fields is unchecked, but it does hide the set that corresponds with the unchecked box and leave the ones for the boxes that are still checked.  Also, because of the original code, if another checkbox is checked it will activate the textboxes in the gap rather than adding to the bottom. 

             

            The only piece I have yet to figure out is how to clear the data for a couple of sub-checkboxes I have if the parent-level checkbox is cleared - this code relies on the Mouse Up event being triggered on the checkbox that was checked.  I tried modifying the above script so that t=subcheckbox but then I can only get it to run on the first one, not both. 

            Any input on this piece would be greatly appreciated, and if I find or come up with a solution someplace else I'll be sure to add it here.

            • 3. Re: How do I fill and show/hide a series of text boxes based on checkboxes?
              Andi Hagen Level 1

              I have found the last piece!  In order to make unchecking the parent checkbox function as though the sub-checkboxes have also been unchecked, I used the following script on the parent checkbox:

               

                   var xFld = this.getField("3DWireOn").isBoxChecked(0);
                   var oPar = this.getField("3DWire");
                   var aChild = oPar.getArray();
                   var fName;

               

                   if (xFld) {
                       this.getField("Mask3DWire").display = display.hidden;
                       oPar.required = true;
                   }
                   if (!xFld) {
                       this.getField("Mask3DWire").display = display.visible;
                       oPar.required = false;
                       for (var i in aChild) {
                            var fName = aChild[i].name;
                             if(aChild[i].value != "Off") {
                                   this.getField(fName).checkThisBox(0,false);   
                                   unCheck(t = fName)}
                         }
                   }

               

               

              The individual sub-checkboxes still get the regular script as noted above - this one is only for the parent checkbox, and it included a line to control a solid white textbox that I use to hide checkboxes and their descriptions (which are hard-coded on the document).  If I knew how to attach a PDF to this I'd attach a sample, but I have no idea how to do that and I don't have a web server I can link it from.  So, if there's any interest in seeing the document I'm using this on, someone please let me know how to put it out here and I'll gladly do so.

              • 4. Re: How do I fill and show/hide a series of text boxes based on checkboxes?
                John Frederick Chionglo Level 1

                Hi Andi,

                 

                Please consider the following “solution” too.

                Preliminaries

                1. An indicator can be considered a variable in JavaScript.
                2. If P is an indicator, m(P) refers to the value of the indicator.

                 

                Data for Control

                 

                1. There are four checkboxes: C0, C1, C2 and C3.
                2. There is an indicator for each checkbox: CP0, CP1, CP2 and CP3.
                3. If checkbox Ci is checked then checkbox indicator CPi has the value i+1; in other words, m(CPn) = i+1. If checkbox Ci is not checked then checkbox indicator CPi has the value 0; in other words, m(CPn) = 0.
                4. There are four sets of detail fields: A0, A1, A2 and A3.
                5. There is a detail fields indicator for each detail fields: AP0, AP1, AP2 and AP3. If detail fields Ak have the details for the checked checkbox Ci then APk has the value i+1; in other words, m(APk) = i+1. If detail fields Ak do not have any details for any of the checked or unchecked checkbox then APk has the value 0; in other words, m(APk) = 0.
                6. The sets of detail fields are organized in sequence. The “top” or “first” set is AP0. It is followed by AP1. Then followed by AP2. The “bottom” or “last” set is AP3.

                 

                Consider an example with one checkbox selected. In this case m(CP2) = 3; m(AP0) = 3; m(CPi) = 0 for i=0, 1, 3; and m(APk) = 0 for k=0, 1, 3. See the following diagram too (see Figure 1).

                Events, Processes and Additional Data for Control

                Computation begins when a user event is captured by the system (such as a mouse up event in an AcroForm field like a button or a checkbox).

                Checking Process

                1. If a checkbox is checked (TNj), it is noted with an indicator (P0).
                2. Shift Process
                  1. Given a noted checkbox, the search for a candidate set of detail fields to use for the noted checkbox begins.
                  2. The first candidate is the bottom of the sequence. This is also the current candidate, k. Thus k=3.
                  3. The current candidate is remembered by marking (TSk,j) the detail fields indicator (APk).
                  4. If k=0 then the shift process ends and the current candidate is the candidate.
                  5. If k > 0 and m(APk-1) = 0, the current candidate becomes APk-1 and step 8c is repeated.
                  6. If k > 0 and m(APk-1) != 0, then the shift process ends and the current candidate is the candidate.

                 

                Unchecking Process

                1. If m(CPi) != 0 and m(CPi) = m(APk), then the checkbox can be unchecked (TRk,i).
                2. Shift Process
                  1. If m(APk)=0 and m(APk+1) > 0 then shift (TSk,m(APk+1)). At the end of this shift, m(APk) > 0 and m(APk+1) = 0. Let k = k + 1.
                  2. If m(APk+1)>0 then repeat 9a. If m(APk+1)=0 then the shifting process ends.

                Last Events and Proceses

                 

                1. Details fields can be initialized (TIk,j) and displayed (TDk,j) or cleared (TCk,j) and hidden (THk,j). These actions depend only on m(APk). However it would be a good idea to trigger these functions right after a shift process ends and on affected details fields.

                Process Diagram of One Checked Checkbox

                Figure 1 is a process model of the checkbox process with one checked checkbox.

                 

                Presentation1_Page_2.jpg

                 

                Figure 1 Checkbox Process Model

                Regards,

                John