Skip navigation
Currently Being Moderated

How do I use a radio button to enable a image

Aug 15, 2012 11:55 AM

I'm trying to figure out how to use a radio button to enable a banner/background image so I guess my question is two fold:


1. How do I create a background image?

2. How do I use a radio button such that when it = Yes, the background image appears.



  • Currently Being Moderated
    Aug 15, 2012 2:06 PM   in reply to saskiahope

    Hey there,


    The first methos that comes to mind for me is to use a formvariable to keep track of the background visibility, then have the image in a readOnly image field on the master page. After that, use a little javascript to wire it all up.


    How To:


    Add a form variable to the form:

    - File, Form Properties

    - Click "Variables" tab

    - Click + button

    - Enter a variable name (i.e. BackgroundVisibility)

    - Set value to "hidden" (without the quotes)


    Add background to Master Page:

    - Click "Master Page" tab above form (nevt to "Design View Tab)

         - If "Master Page" Tab isn't visible, Right click on the gray area to the right of the tabs, and make suer "Master Pages" is checked off in the contect menu that appears.

    - Insert an Image Field and resize to the area that you want the background image to fill

         - Note* Make sure you use an image field, not an image. Image fields let you use scripts, images don't.

    - Format the image field as desired (i.e. remove caption, add border, etc.)

    - Select the image to use for the background, by setting the URL field in the image object properties.

    - Check "Embed Image Data" check box below URL in image object properties.

    - Add an initize script (Javascript) to the image field:

         this.access = "readOnly";

    ** note the camel case used in "readOnly" it is case sensitive.

    - Add a layout:ready script (Javascript) to the image field:

         this.presence = BackgroundVisibility.value;

    ** Note that BackgroundVisibility should be the same as the name of the variable that you added in the last step.


    Wire it all together via script:

    - Add a check box to the actual form (not the masterpage)

    - Add a change script to the check box

         BackgroundVisibility.value = this.rawValue == 1 ? "visible" : "hidden";

    ** Again, BackgroundVisibility should be the same name used for the form variable. The above script uses a ternary operator... which is similar to a condensed if/then/else


    I know that looks like a lot of work, but that's just because I was being very specific. In actuality, it's just a form variable, an image field, a check box and three one-line scripts. Very simple.


    Let me know if you have any issues, or if I didn't explain something well enough.




    Note*** I just realized that you asked for a radio button, not a check box... the above still works, so long as "Yes" is given a value of 1 on the binding tab of the radio group.


    Note the second*** I just added a step to the first bit... Specifically, setting the form variable value to "hidden" this is the default state of the background image.


    Mark as:
  • Currently Being Moderated
    Aug 20, 2012 7:53 PM   in reply to saskiahope

    when I was first getting started, the thing that I always forgot to do was to save it as a dynamic xml pdf, instead of a static pdf. You can choose which one you're saving it as in the drop downin the "save as" wizard. If you did save it as a dynamic pdf form, andit still isn't working... let me know and i can provide further instuctuons.


    ps... this was sent via my tablet, and the space key doesn't seem to want to behave... sorry



    Mark as:
  • Currently Being Moderated
    Aug 21, 2012 7:49 AM   in reply to saskiahope

    Hello again,


    Sorry about that. I followed my own directions, and there was only one hiccup.. The form variable doesn't always like to accept the default value the first time. Double check to make sure that the variable is set to "hidden". Go File > Form Properties > Variables, click on your variable, and make sure the pane to the right has "hidden" in it. Again, it's case sensitive.


    The other spot where I can see a potential for an issue is where you mention that you're using two check boxes instead of radio buttons.


    There are two ways this can be done. The first uses one check box, the other uses one radio button list with two radio buttons.


    1) Checkbox:


         - See above. Note, there is only one checkbox used, and this script is on the change event.


    2) Radio buttons:


         - Add two radio button controls to your form, and make sure that they both are contained within the same radio button list in the heirarchy panel.

         - Set one to Yes, the other to No

         - On the binding tab of the radio button list, make sure that the value for Yes is 1, and the value for No is 2

         - On the change event, put the following script:

              BackgroundVisibility.value = this.rawValue == 1 ? "visible" : "hidden";

         *** make sure this change event script is on the radio button list itself, not on one of the child radio button controls. To do this, select the radio button list in the heirarchy panel. You'll know you did it right if you should see three change event headers in the scripting pane, the first one for the list (script goes here) and one for each child radio button.


    I have created a sample form that uses a radio button list. If you still have an issue, feel free to message me your email and I will send it your way.


    Hope the above helps!


    - Scott

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points