Skip to main content
Known Participant
August 12, 2022
Question

Clear default option when clicked in dropdown so user can type in custom text

  • August 12, 2022
  • 4 replies
  • 6527 views

Is this possible? Rather than having to backspace/delete all the text of the default (such as select an item), when the default is clicked the field is blank for the custom text to be entered.

4 replies

Participating Frequently
April 7, 2023

This is actually easier than it might seem, but not very intuitive.  If you click in the circled area multiple times, it will deselect the default choice & your field will be blank.

 

New Participant
April 18, 2025

This worked. Like you said, not intuitive at all.

ls_rbls
Community Expert
September 5, 2022

Hi,

 

Hope that you found a solution yet, if not maybe this will help. Here is your updated file:

 

 

  1. I did not employed a hidden field as suggested in these forums  nor used a document-level array to write all comboboxes values to a global variable.
  2. I slightly modified the original code that I posted to you and moved it as a keystroke event script
  3. Added a simple Mouse Down event ; is not elegant but do it does its job and  complement the keystroke event with acquiring all the values from comboboxes and list them dynamically  when the user clicks on the desired field.
  4.  Fixed a few things in your document-level script
  5.  Eliminated all custom validating scripts for the comboboxes  that were interfering with other scripts and making the form extremely slow; that method was not necessary. The validation can be handled with the keystroke script using event.rc (which I did to handle the null or empty "" strings condition that usually throw errors when the user deletes a value and leaves the combobox empty).
  6.  Incorporated to your current reset button script  the setItems() method to clear all comboboxes.
  7.  Added the app.thermometer object to the reset script to give notice to the user that the form is resetting. Takes about 8-10 seconds to complete. (This may be improved if, for example,  the over 10  custom calculating scripts and over 10 validating scripts were not running continuously in the  background during the fields reset operation). 

 

NOTE:

The only downside to updating comboboxes dynamically is that when the users click on an empty combobox, and as the values get populated,  the event trigger will select automatically the last value that was added to the list.

 

If you or your users are not bothered by this, then the form rather works pretty darn well (IMHO).

ls_rbls
Community Expert
August 22, 2022
ls_rbls
Community Expert
August 12, 2022

++MODIFIED REPLY :  fixed some discrepancies in the script

 

Yes it may be possible with a JavaScript custom format script or a combination of such script and the field object built-in features.

 

This has been answered before.

 

The dropdown menu can display a default visible string of text, but as soon as the user types in something in it, it  blanks itself to accept the  new value; then commit that value after hitting enter.

 

See slides below for my way of doing it (this could be achieved in many other creative ways):

 

In the first slide I am using Acrobat's built-in feature in the dropdown properties. I eliminated from the choices "Select an Item" and entered a single blank space as my default selection.

 

 

 

 

In the second slide, while using the "Prepare Form" tool, I opened the "Dropdown Properties" and selected the "Format" tab first. Then select "Custom" from the dropdown options, and then click on "Edit..." to open the JavaScript editor and use the actual script.

 

See example script next.

 

 

The example script below is a slightly modified version of the original that has been circulating around for years in various discussions that are found in these forums and the old ones from  Acrobatusers.com.

 

 

All credit to George Johnson and Gilad D (try67).

  

 

 

 

 


(event.value !== " " || event.value =="") ? 

([

event.value = event.target.value,

event.target.display = display.visible

]) : ([

event.value = "Select an Item", 

event.target.display = display.noPrint,
  
  ]);

 

 

 

 

 

Give it a try (or improve it) and let us know if this works for you.

Known Participant
August 13, 2022

I think I got that part working. I have a couple of other questions though.

 

1. I got the following code on another thread in a validation script:

if (event.value) {
var f = event.target;
var found = false;
for (var i=0; i<f.numItems; i++) {
if (f.getItemAt(i, false)==event.value) {found = true; break;}
}
if (!found) {
f.insertItemAt({nIdx: -1, cName: event.value});
f.defaultValue = f.getItemAt(0, false);
}
}

I believe this was to save a custom entered option for future selection. However, this only works in a single dropdown on a single row. I have 18 rows, thus 18 location drpdowns Location1, Location2, etc. Is there a way to add the custom entry to a master options list that can be called from any of the dropdowns?

 

2. If the form is closed without saving, the entered value is not saved for future use. The desired workflow is to have the user save the completed form under a new filename for manually posting online. Then when the form is opened the following month, it needs to have all of the fields blank, but have the custom option available in the dropdowns still.

 

Here is my onload document level script:

var fieldsNotToReset = ["ChaplainName", "CompanyName",];

var fieldsToReset = []; for (var i=0; i<this.numFields; i++) { var fname = this.getNthFieldName(i); var f = this.getField(fname); if (f==null) continue; if (fieldsNotToReset.indexOf(fname)!=-1) continue; fieldsToReset.push(fname); } this.resetForm(fieldsToReset);
for (var i=0; i<this.numFields; i++) {
var f = this.getField(this.getNthFieldName(i));
if (f==null) continue;
f.readonly = false;
}

this.getField("CommunityServiceTotal").readonly = true;
this.getField("CounselingTotal").readonly = true;
this.getField("CrisisResponseTotal").readonly = true;
this.getField("FirstResponderTotal").readonly = true;
this.getField("MeetingsTotal").readonly = true;
this.getField("MissionsTotal").readonly = true;
this.getField("RapidResponseTotal").readonly = true;
this.getField("TrainingTotal").readonly = true;
this.getField("VeteransTotal").readonly = true;
this.getField("TotalHoursServed").readonly = true;
this.getField("TotalTravelHours").readonly = true;

for (var i=0; i<this.numFields; i++) {

var f = this.getField(this.getNthFieldName(i));

if (f==null) continue;

if (f.type=="button") f.display = display.visible;

}

this.getField("MonthYear").setFocus();

 

Do I need to somehow auto save the form before it is closed when the Save As is completed? How to do that best?

As always, thanks to everyone who is helping me.

ls_rbls
Community Expert
August 22, 2022

Thanks. I look forward to trying it out.


First and foremost apologies for taking this long to reply.

 

Here is the same script I posted earlier but modified to satisfy your requirement.

 

Be advised that this script  is employing a  ternary (conditional) operation. As such, you will notice that I placed my for loop operation at the very top of the script before  the rest of the declared variables that will interact in the ternary operation. 

 

 

/*
CUSTOM FORMAT SCRIPT -- RUN FROM EACH COMBOBOX 
OR INVOKE AS A FUNCTION FROM EACH COMBOBOX 
*/

/////////////////////// DECLARE YOUR VARIABLES ////////////////////////

var f = event.target; f.defaultValue = "Select an Item or Enter a Location";

      {
        for (i=0; i < this.getField("hiddenBox").numItems; i++); 

        var itemsList = this.getField("hiddenBox").getItemAt(i, false);

        var values = this.getField("hiddenBox").insertItemAt(event.value, "", -1);

        var comboValues = event.target.insertItemAt(itemsList, "", -1);

      }
            
var comboStatus = (event.value !=="" 
                   && event.value !==" " 
                   && event.value !=="Virtual" 
                   && event.value !=="Select an Item or Enter a Location") ? ([

                   
///////////// GET INDEXED FACE VALUES FROM HIDDEN FIELD ////////////////

                   this.getField("hiddenBox").insertItemAt(event.value, "", -1),
                   event.target.insertItemAt(itemsList, "", -1)

                   ]) : ([

                   f, 

                   event.target.display = display.noPrint
                   
                   ]);


////////////////// EXECUTE IF / ELSE CONDITION ////////////////////////

(event.value =="") ? ([ event.value = "Select an Item or Enter a Location",
                        event.target.display = display.noPrint,
                        this.getField("hiddenBox").value = "Select an Item or Enter a Location",

                        this.getField("hiddenBox").setItems([ 

                                      ["Select an Item or Enter a Location"], 

                                      [" "],
 
                                      ["Virtual"]

                                      ]) 

                                   ]) : comboStatus

 

 

I tested this script with 20 different dropdown menus and it doesn't require a "parent.child" naming convention for each of them.

 

This custom format script  also employs the use of a dropdown menu as the hidden field instead of a textfield ; it works with a hidden listbox as well, and you may also use it as custom calculation script.

 

The reason why I preferred this approach, simply because you can hold an entire list of indexed values in a combobox, while in the case of  updating values back and forth with a textfield  to many comboboxes requires a much more different approach (specially if using export values in those comboboxes)..

 

NOTE: It may also work as custom keystroke or mouse event action with a few modifications. .

 

Nevertheless, since you're not using Thom Parker methods for a MasterList that stays scured as a document-level script, I still employed some of his advised techniques that are found in the link I posted for you in my first reply.

 

All of the answers you need are there: Part 1 and Part2 of that article should you decide to use/modify  this script as a dynamic  MasterList..

 

This script update each of the comboboxes dynamically and without the need of of document-level functions nor validating other scripts in conjunction with custom keystroke scripts.

 

NOTE: You may need to work around on how to effectively reset the fields using clearItems() and the setItems() methods.

 

Let us know if this help.