4 Replies Latest reply on Mar 20, 2017 9:30 AM by parki3

    Changing color of button/checkbox on click.

    AndrewDrechsel Level 1

      I've been delegated the task of putting together a PDF for a Sports and Fitness expo. I don't really have a great deal of experience with Acrobat or

      Javascript. I am open to suggestions as to the best way of doing this. So... we have a segment of the floor plan (see attached). Each of the squares represents a booth space. What I need to do is create buttons/checkboxes over each booth space so that once a sponsor has confirmed which space they want we can email them back with an official looking document with that booth space highlighted. It needs to be a semi-transparent yellow color so that you can read the numbers underneath. Each box needs to be able to be checked and unchecked upon click. Thanks in advance for any help.


        • 1. Re: Changing color of button/checkbox on click.
          gkaiseril MVP & Adobe Community Professional

          Convert your image to a PDF and you could place a check box form field within each image. But if you want to use a button, you will have to do a lot more work. Fill colors are not transparent, so you will need to label each button and you will have to add the necessary code to turn the color on and off or toggle the color as the button is clicked.


          Mouse up action:


          var f = this.getField(event.target.name);
          if (color.equal(f.fillColor, color.yellow))
          f.fillColor = color.white;
          f.fillColor = color.yellow;


          If your users have only Adobe Reader, then you will need to Extend Reader Rights to the PDF.

          1 person found this helpful
          • 2. Re: Changing color of button/checkbox on click.
            George_Johnson MVP & Adobe Community Professional

            I would suggest using a check box field for each square. Give them all the same name but different export value. This will allow at most one square to be selected. If you want to allow more than one square to be selected, give each of the check boxes a different name.


            Set up each check box with the following properties:


            Border Color: red (or your preferred color)

            Fill Color: No Color (allows underlying text to be seen)

            Line Style: Solid (or what you prefer)

            Line Thickness: Thick (or what you prefer)

            Check Box Style: Circle

            Font Size: to whatever results in the size circle (dot) you want


            If you don't want a circle (or check, or whatever) to appear when the check box is selected, set the font size to 2 and the text color to white.


            Then, use the following script in the Mouse Up event of all of the check boxes:


            // Show/hide the field border depending on the state of the check box

            event.target.strokeColor = event.target.value !== "Off" ? color.red : color.transparent;


            So, when a square (check box) is selected, it will have a red border around it, and optionally a dot in the middle, and the underlying text will be visible.

            Also, before sending the document out, you can either flatten the page or set the check boxes to read-only so that the recipient cannot change it. This is not applicable if the form will be printed on paper and sent.

            • 3. Re: Changing color of button/checkbox on click.
              AndrewDrechsel Level 1

              Hey guys,

              Thank you for your prompt responses. You are lifesavers. I think the easier option would be to create buttons and give them lables. Instead of using the default yellow color is it possible to use  this yellow (#f8b11a).


              Thanks in advance,


              • 4. Re: Changing color of button/checkbox on click.
                parki3 Level 1

                Hi gkaiseril. I am thankful for your reply on this post as I do need your help. I am trying to create an interface whereby when the user selects a button, it changes colour, if they click it again it reverts to the default colour. Would the code you supplied go into a standalone function or would it be used in a loop? Many thanks again.