Skip to main content
Inspiring
April 5, 2021
Answered

How to reset a text field based on a drop down selection

  • April 5, 2021
  • 3 replies
  • 6014 views

Is there a way to reset (clear entered data) when a drop down selection is changed? I have a form that has different form fields display based on the drop down selection. 

For example: 

If  Drop down selection= "dd1"

Then Text boxes "Text 1" and "Text 2" are visable and "Text 3" and "Text 4" are hidden

 

If Drop down selection= "dd2"       

Then Text boxes "Text 3" and "Text 4" are visable and "Text 1" and "Text 2" are hidden

 

The values of "Text 1" and "Text 2" OR "Text 3" and "Text 4" need to populate in two text fields at the end of the form. The problem that I am having is that if someone first selects "dd1" and fills out "Text 1" and "Text 2" and then changes their mind and changes their selection to "dd2", and enters new values for the now corresponding "Text 3" and "Text 4", the populated value for the two text fields at the end of the form still show the values for "Text 1" and "Text 2" because the text fields are hidden when the new selection is made, but not cleared. Any help would be appreciated!

 

This topic has been closed for replies.
Correct answer Nesa Nurani

That is very close. I was able to see the issues by using your file rather than mine, because all the fields are on one page. I now see that the original script is working, BUT the fields don't populate until after the drop down is reselected after the corresponding fields ("TEXTA.Text1" "TEXTA.Text2" "TEXTB.Text1" "TEXTB.Text2") are filled in. The user would not have any reason to go back to the drop down after the corresponding fields are filled, unless they made a mistake. Ideally, how the form would work is:

 

  1.  On page 1 of form, user would make a drop down selection ("dd1""dd2""ddOther") and the appropriate text boxes would appear ("TEXTA.Text1"and "TEXTA.Text2"OR"TEXTB.Text1"and"TEXTB.Text2")
  2. User fills in the text boxes that have appeared and continues forward filling out the form.
  3. At the end of the form (in this case, p.5), the corresponding text boxes ("Print Name1" and "Print Name2" would be populated with the previously entered values.

 

Is there a way to make the corresponding text box fill without going back and toggling the drop down selection?

 


Yes, move script to calculate.

3 replies

Nesa Nurani
Community Expert
April 6, 2021

Two fields at the end of the form I assume field1 populate from text1 and text3 and field 2 populate from text 2 and text4 fields?

You can use this script as Validation of dropdown field:

if(event.value == "dd1"){
this.getField("Field1").value = this.getField("Text1").value;
this.getField("Field2").value = this.getField("Text2").value;}
else if( event.value == "dd2"){
this.getField("Field1").value = this.getField("Text3").value;
this.getField("Field2").value = this.getField("Text4").value;}
else {
this.getField("Field1").value = "";
this.getField("Field2").value = "";}

Rename fields as needed.

Inspiring
April 6, 2021

Thanks Nesa! This looks exactly like what I am looking for. Unfortunately, it doesn't seem to be working. I added it to the bottom of my current validation script for the drop down that enables the form fields ("Text1" "Text2" "Text3" "Text4") to be visible or hidden. I'm wondering if the issue is with the fact that I am using groups in the earlier script because more that just "Text1" and "Text2"  OR "Text3" and "Text4" need to be hidden or visible based on the dropdown selection.

 

Here's the current dropdown validation script (incorporating your script at the bottom): 

if(event.value =="dd1"||event.value =="dd2") {

this.getField("Hide.Names").display = display.hidden;

} else {
this.getField("Hide.Names").display = display.visible;
}

if(event.value =="dd1") {

this.getField("TEXTA").display = display.visible;

} else {
this.getField("TEXTA").display = display.hidden;
}

if(event.value =="dd2") {

this.getField("TEXTB").display = display.visible;

} else {
this.getField("TEXTB").display = display.hidden;
}

if(event.value == "dd1"){
this.getField("Print Name1").value = this.getField("TEXTA.Text1").value;
this.getField("Print Name2").value = this.getField("TEXTA.Text2").value;}
else if( event.value == "Revocable"){
this.getField("Print Name1").value = this.getField("TEXTB.Text1").value;
this.getField("Print Name2").value = this.getField("TEXTB.Text2").value;}
else {
this.getField("Print Name1").value = "";
this.getField("Print Name2").value = "";}

 

Note:

"Hide.Names" is just a white text box that hides the information if no selection or another dd selection is made 

"TEXTA" group contains "Text1" and "Text2", plus two additional fields

"TEXTB" group contains "Text3" and "Text4", plus two additional fields

The actual field names have been modified for this correspondence.

 

Could the reason that the bottom portion of the script is not working be because of the group field names? I don't know much about JavaScript, but I know that a very small change can make a big difference. Thanks for all your time and assistance!

 

Nesa Nurani
Community Expert
April 6, 2021

What exactly isn't working?

You set code so when dd2 is selected field TEXTB is visible othervise it's hidden and you set when value is "Revocable", "Print Name1" and "Print Name2" should be TEXTB value but at this point TEXTB is hidden but it will still show value. Is that intentional?

ls_rbls
Community Expert
April 6, 2021

You can a test if using a  custom calculation script in the dropdown field works for you, like for example:

 

if (event.valueAsString == "dd1") {

this.getField("Text1").display = display.visible;

 

this.getField("Text2").display = display.visible;

 

this.getField("Text3").display = display.hidden

 

this.getField("Text4").display = display.hidden

 

this.resetForm(["Text3", "Text4"]);

 

else if (event.valueAsString == "dd2") {

 

this.getField("Text3").display = display.visible;

 

this.getField("Text4").display = display.visible;

 

this.getField("Text1").display = display.hidden;

 

this.getField("Text2").display = display.hidden;

 

this.resetForm(["Text1", "Text2"]);

 

}

Amal.
Community Manager
Community Manager
April 6, 2021

Hi there

 

Hope you are doing well and sorry for the trouble. As described, you want to reset the text field based on the drop down selection.

 

The workflow that you are trying to achieve is possible using the JavaScript. For more information about using JavaScript please check out the help page: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/js_developer_guide.pdf

 

Hope it will help

 

Regards

Amal