Changing the text in a form field based on choosing a radio button

Explorer ,
Nov 12, 2019

Copy link to clipboard

Copied

Hello Adobe Geniuses!

 

I have a group of radio buttons:

  • Button 1
  • Button 2
  • Button 3

The group's name is radioButtons

 

I have a form field:

myFormField

 

If a user chooses Button 1, I would like the text in myFormField to change to "Button 1"

If a user chooses Button 2, I would like the text in myFormField to change to "Button 2"

If a user chooses Button 3, I would like the text in myFormField to change to "Button 3"

 

How would I do that?

 

Scott

TOPICS
Acrobat SDK and JavaScript, How to, PDF forms

Views

134

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 13, 2019

Copy link to clipboard

Copied

Hi,

 

You need to rename each radio button with the same fieldname. Just change the name to "Button" for each radio button, for example. But add a unique export value for button 1, button 2, and button 3 respectively.

 

 

Type in the text that you want it to be displayed in myFormField as the in each of the radio buttons' export value.

 

To do this, in Edit mode, right click on the radio button(s), select Properties---->>> Options and type in your text in the provided blank for the export field. Make sure to uncheck the option that says button is checked by default.

 

 

Then in myFormField textfield open field Properties, goto the Calculate tab, and add a script as Custom Calculation script like this:

 

var button = this.getField("Button").valueAsString;

if (button=="") event.value = "";

else event.value = button;

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
scotwllm AUTHOR
Explorer ,
Nov 13, 2019

Copy link to clipboard

Copied

Hi rbls --

 

Thank you for responding. I did as you suggested, except I named the group HealthPlan instead of Button. After I type the code into the Javascript editor and press "OK," I get the following error message:

 

SyntaxError: missing; before statement

2: at line 3

 

Here is my code:

 

var button = this.getField("HealthPlan").valueAsString;
If (button=="") event.value = "";
else event.value = button;

 

Any idea what the problem is?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 13, 2019

Copy link to clipboard

Copied

Yes, I apologize. I made a mistake.

 

Use the code like this:

 

var button = this.getField("HealthPlan").valueAsString;
if (reset=="") event.value = "";
else event.value = button;


//if you need to clear or reset the radio button selection after the user ticked on one of the option add this line at the end. Remove the slashes // if you are using it

 

//this.resetForm(["HealthPlan"]) ;

 

//The script above was taken from here https://answers.acrobatusers.com/clearing-marked-radio-buttons-form-q1600.aspx

 

 

 

 

Also review the slides below:

 

tesradio1.png

 

 

 

 

 

tesradio2.png

 

 

 

 

tesradio3.png

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
scotwllm AUTHOR
Explorer ,
Nov 13, 2019

Copy link to clipboard

Copied

When I click on a radio button, text should appear in the form field, correct? Nothing seems to be happening.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 14, 2019

Copy link to clipboard

Copied

Did you changed anything in the script that I pasted here?

 

I found another small mistake but it is working on my end.

 

If you re-tryped fieldnames in the scripts make sure it is spelled the same way or if you are missing something.

 

Did you pasted the text that you want it to be displayed in the export value blank shown in the second slide above?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 14, 2019

Copy link to clipboard

Copied

You shouldn't have added the reset, it just complicates the script. Keep it simple.

Use only this code, nothing else:

 

event.value = this.getField("Button").valueAsString;

 

You don't need to handle reset in the calculation script.

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
scotwllm AUTHOR
Explorer ,
Nov 20, 2019

Copy link to clipboard

Copied

Do you mean to include that one line of code in the Calculate tab for the form field?

 

event.value = this.getField("Button").valueAsString;

 

Nothing happens if I click on a radio button.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

I fixed the code even though the old one was working on my end.

 

I will post it back to you in a few.

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

No, Only use this one line of code. 

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
scotwllm AUTHOR
Explorer ,
Nov 20, 2019

Copy link to clipboard

Copied

I must have done something incorrectly. Here is what I have:

 

Radio button group name = HealthPlan

The name for each of the options = HealthPlan

Radio Button Choice =

  • Text to be displayed 1
  • Text to be displayed 2
  • etc.

Text field properties for form field: 

  • Name = Employee Health Plan
  • Custom calculation script = 
    event.value = this.getField("Button").valueAsString;

What did I get wrong?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

Use this code:

 

event.value = this.getField("HealthPlan").valueAsString;

 

because the name of the radiobutton group is "HealthPlan".  That's how it works. To get the value of a field, the name of that particular field has to be used.  I only used "button" as a placeholder for the real value. I apologize for the confusion. 

 

Now, each of the options (export values) for the individual radion buttons has to be different.

 

There is still one more step, but you have to get this bit working first. 

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
scotwllm AUTHOR
Explorer ,
Nov 20, 2019

Copy link to clipboard

Copied

Yay! It works. You said there is one more step?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

I was trying to get rid of the word OFF in the case that the user tries to type in something else in the textfield and then hits delete and enter.

 

How do you get rid of Off displaying when the value is null?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

Thom,

 

Just by using event.value = this.getField("HealthPlan").valueAsString;

posed another problem for me. I was trying to circumvent that by resetting the radio buttons as an option available to the users  in the case  that a radio button is ticked  but then the user decides  not  make any selection; just that line of code by itself  will always keep an active selection.

 

Unless a reset button is offered to the user  to leave the field blank,  the export value will be  permanently displayed.

 

How can this be improved?

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

So that's the last step. Dealing with "Off". There are two easy solutions, 

You only need one, but I'll provide both. 

1) Use a Format Script to make the field blank, this is best used when you need the real value, but just want to show a blank.

 

if(event.value == "Off") event.value = "";

 

2) Modify the Calculation Script. This is best for when you want a blank value. 

 

var cFldVal = this.getField("HealthPlan").valueAsString;

event.value = (cFldVal == "Off")?"":cFldVal;

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
scotwllm AUTHOR
Explorer ,
Nov 20, 2019

Copy link to clipboard

Copied

Is there a way to deselect the radio button in the event the user chooses a radio button for something, and then erases the contents from the form field?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

That is a very different solution. 

What we've done here is to use a calulation to set the value of a text field. Generally a calculated field is set to ReadOnly so the user doen't think they can type into it, because the calculation will override whatever they type.  It is entirely possible to setup a field to override a calculation, but you have to account for all variations of how the value can be set and unset. It's much more complicated. 

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

Here's a forum search that will help

https://community.adobe.com/t5/forums/searchpage/tab/message?advanced=false&allow_punctuation=false&...

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
ls_rbls LATEST
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

Thank you for that thouruough explanation and the link.

 

That was straight to the point.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more