Skip to main content
D
DGodfrey90
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

A
ACilluffo
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.

 

    M
    melissa_4506
    New Participant
    April 18, 2025

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

      ls_rbls
      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
      ls_rbls
      Community Expert
      August 22, 2022

      See my example file:

       

      https://acrobat.adobe.com/link/review?uri=urn:aaid:scds:US:20039106-1bf8-3498-a533-9c00e18d8047

      ls_rbls
      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.

        D
        DGodfrey90Author
        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.

          D
          DGodfrey90Author
          Known Participant
          August 13, 2022

          For question 1:

           

          since that script executes the validation from the target field, you can save it as a document-level script and call that function as a custom validation script fro. each of the desired dropdown fields.

           

          Declare a variable for the master option list in that document-level script and establish a condition to define when to add the custom entry using the setItems() method.

           

          Some examples for that method are illustrated in the Adobe Acrobat SDK, JavaScript for Acrobat® API Reference "Doc properties", page 431.

           

          You may also want to check out some of ACP Thom Parker articles and tutorials that cover how to create and store master lists and how to program comboxes with Acrobat JavaScript

           

           

           

          For question 2:

           

          Adobe Acrobat SDK, JavaScript™ for Acrobat® API Reference "Doc properties", page 212 and page 213.

           

          See about resetting the dirty flag, and also take a look at the example scripts that illustrate how to employ the "requiresFullSave" property respectively.

           

           


          There are no page numbers in the current SDK (it is html). I am also unable to find these sections by searching. Can you help me locate them some other way? like a link maybe?  Thanks.

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices