JS: Prevent blank entries from displaying in a dropdown

[caspio]

JavaScript Solution: Prevent blank entries from displaying in a dropdown form element

Feature Description:

This JavaScript solution shows how to prevent blank "Text" entries from displaying in a dropdown form element of a Search form in a Search and Report DataPage. Typically, when a dropdown form element is configured in Caspio Bridge to use a Lookup table/view, a lookup table and field are selected. The selected field may be populated by a user through another DataPage such as a WebForm.

For example, assume that a user is expected to fill in the value for a City field in a WebForm DataPage. This City field is also used as a Lookup table/view field to populate a dropdown form element in the Search page of a Search and Report DataPage. If a user omits to fill a value for the City field in the WebForm, then no value is stored for that record. This, in turn, causes the dropdown form element on the Search page to display a blank.

This JavaScript solution, when applied on a Search page of a Search and Report DataPage, will remove the appearance of all blank entries. This improves the appearance of the Search page, while still preserving all values other than a blank in the dropdown form element.

Implementation:

This solution can be used "as-is", without any changes if

• It is used in the Search form of a Search and Report DataPage and
• The dropdown form element is the first field of the search page,

To use this solution,

a. Highlight to copy the code provided in the text area shown below.

b. Paste it inside the HTML Footer section of the Search form in a Search and Report DataPage.

The Dropdown Form Element considered for this example is referenced as Value1_1 in the script provided below. Value1_1 stands for the first form element. Hence, for a Dropdown Form Element appearing in positions other than the first position, this solution can be customized by changing the value of the variable dropdown.

<SCRIPT LANGUAGE="JavaScript"> 

<!-- Function removeBlanksInDropdown searches for blank entries and removes all occurrences. It is advisable to use this script with the "Show distinct display options" checkbox checked in the dropdown configuration in the Caspio Bridge DataPage Wizard --> 
function removeBlanksInDropdown()
{ 
   /* dropdown stores the value of the dropdown form element reference in the DataPage. */
   var dropdown = document.getElementsByName("Value1_1");

   for (var q = dropdown[0].length-1; q >= 0; q--)
   { 
      if (dropdown[0].options[q].value == "")
         dropdown[0].remove(q);
   }
 }

document.addEventListener('DataPageReady', removeBlanksInDropdown);
</SCRIPT>

Customize the script by changing the value of the variable dropdown to an appropriate field reference. For example, if the Dropdown appears as the second field of the Search form, it must be referenced as Value2_1. Accordingly, change the above code from

var dropdown = document.getElementsByName("Value1_1");

to

var dropdown = document.getElementsByName("Value2_1");

Additional Considerations

This solution only removes the "appearance" of blank entries from the City field used in the Search form. It does not remove the blank entries from the associated table.

Tested Browsers

This JavaScript solution was tested on the following platforms and Internet Browsers only.

# MS Windows - IE 8.0, Firefox 3.5.7, Chrome 3.0.195.38, Safari 4.0.3

# Macintosh - Firefox 3.5.7, Safari 4.0.3

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.