Skip to main content
M
michellem38434587
Known Participant
July 25, 2020
Answered

Hide text field if checkbox is checked

  • July 25, 2020
  • 3 replies
  • 21132 views

 

Please help! Here's my scenario.........

CHECKBOX1:  User is instructed that if Account signers are exactly the same as on a prior page, then check the box.  If an signers are different, then user is to complete textbox1 thru textbox8, as needed.  I want to prevent user from checking box AND then filling text boxes (and yes, some would try that!)

 

So......If checkbox1 is checked, then text1 thru text8 are "hidden", if checkbox1 is subsequently unchecked, then text1 thru text8 are returned to "visible".  Checkbox will be unchecked in published form.

 

TIA - Michelle

 

    This topic has been closed for replies.
    Correct answer try67

    That works, but you can cut the length of the code by half by doing it like this:

     

    var nDisplay = event.target.isBoxChecked(0) ? display.visible : display.hidden;
    this.getField("Text1").display = nDisplay;
    this.getField("Text2").display = nDisplay;
    this.getField("Text3").display = nDisplay;

     

    And if the field names are indeed those then it can be cut even further by using a loop.

    3 replies

    H
    help0101
    New Participant
    September 21, 2020

    Hello,

     

    So I have an interesting issue and I have yet to be able to find a solution using this code. I have a form with the same field name repeated in order to allow for only one check box to be ticked at a time in a grouping.

     

    so think of:

    Reason For This#0

    Reason For This#1

    Reason For This#2

     

    Each of these fields exports a different value which allows for only one of the tickboxes to be ticked at once. 

     

    So export values are:

    Reason For This#0- Yes

    Reason For This#1- No

    Reason For This#2- MaybeSo

     

    When I apply the code to Reason For This#0 (Checkbox) I can make the coresponding text field appear and hide. Then when I move down and try to make the same code work for Reason For This#1 it does not work. I thought at first that the variable might be the issuse so I altered it and made #1 m instead of n but that idnd't fix the issue. Any ideas?

    Nesa Nurani
    Nesa Nurani
    Community Expert
    September 21, 2020

    If you want checkboxes to act as radio buttons you should name all 3 of them same,like this "Reason For This#0" and leave them export values as is.
    You can use this code in each text field as "Custom Calculation Script":
    event.target.display = this.getField("Reason For This#0").value == "Yes" ? display.visible : display.hidden;
    just change Yes, No, MaybeSo to corresponding field.

    N
    Nancy258026799ief
    New Participant
    November 21, 2024

    Please help, i have 3 check box with field, which ever check box i click on it show the selected only.

    Thom Parker
    Thom Parker
    Community Expert
    July 26, 2020

    Read the article, see the example 🙂  

    https://www.pdfscripting.com/public/Hiding-and-Showing-Form-Fields.cfm?sd=40

     

     

    Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often
      M
      michellem38434587Author
      Known Participant
      July 27, 2020

      Thank you Thom.........your article was very helpful and I can see incorporating these scripts into some docs in the near future!

      BarlaeDC
      BarlaeDC
      Community Expert
      July 25, 2020

      Hi,

       

      You should be able to use a script similar to below on the up action of the checkbox, and select run a JavaScript.

       

      if ( event.target.isBoxChecked(0)) {
    this.getField("Text1").display = display.visible;
    this.getField("Text2").display = display.visible;
    this.getField("Text3").display = display.visible;
} else {
    this.getField("Text1").display = display.hidden;
    this.getField("Text2").display = display.hidden;
    this.getField("Text3").display = display.hidden;
}

       

      You will need to add a line for each text field you want to show or hide.

       

      Regards

       

      Malcolm

        try67
        try67Correct answer
        Community Expert
        July 25, 2020

        That works, but you can cut the length of the code by half by doing it like this:

         

        var nDisplay = event.target.isBoxChecked(0) ? display.visible : display.hidden;
        this.getField("Text1").display = nDisplay;
        this.getField("Text2").display = nDisplay;
        this.getField("Text3").display = nDisplay;

         

        And if the field names are indeed those then it can be cut even further by using a loop.

          M
          michellem38434587Author
          Known Participant
          July 27, 2020

          Thank you............however I had to switch the var to display.hidden:display.visible to make it work.  Or was there another way?

           

          When box is unchecked, then text field needs to be visible to allow entry.  If box is checked, then the text field is hidden.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices