Jump to content

JS: Disable fields conditionally in the search page


Recommended Posts

JavaScript Solution: Disable fields conditionally in the search page

Feature Description:

This JavaScript solution shows how to disable a Dropdown Form Element based on a selection made in another dropdown element. This solution can be used on the Search page of a Search and Report DataPage.

For example, assume that a search form contains three fields, Country, State and City where Country and State are Dropdown form elements and City is a Text Field. If the country selected in the Country dropdown is not "United States", the State dropdown element is disabled. This prevents a user from making a selection for State. This feature is useful when there are no State values to be displayed for any Country selection other than the United States.


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

  •  It is used in the Search page of a Search and Report DataPage,
  •  The first and second field elements are Dropdown Form Elements and,
  • The selection made in the first dropdown is "United States".

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 page in the Search and Report using the Caspio Bridge DataPage Wizard.

Form elements on the Search page of a Search and Report DataPage are referenced as Value1_1, Value2_1 and so on. Value1_1 is a reference to the first form element while Value2_1 is a reference to the second form element. The naming convention follows the order in which the form elements appear on a DataPage.

This solution can be customized for two elements of a Search form appearing in any order as long as the first of the two elements is a Dropdown Form Element.

  /*(1) Value1_1 is a reference to the first dropdown element */
  var dropdown1 = "Value1_1";
  /*(2) Value2_1 is a reference to the second drodown element */
  var dropdown2 = "Value2_1";
  /*(3) The text in the first dropdown which if not selected will disable the second dropdown */
  var rightSelection = "United States";

  <!-- Function secondDropdown compares the selection made in one dropdown and disables another dropdown based on selections made -->
  function secondDropdown()
    var firstDropdown = document.getElementsByName(dropdown1); 
    var firstSelection = firstDropdown[0].options[firstDropdown[0].selectedIndex].text;
    var secondDropdown = document.getElementsByName(dropdown2);
    if (firstSelection != rightSelection)
document.addEventListener('DataPageReady', secondDropdown);
  /*(4) Everytime a selection is made, the function secondDropdown() is called. */


Tips for Customization

a. Customize the script by changing the values of the variables dropdown1 and dropdown2 to their appropriate field references.

b. Change the value of the variable right selection from "United States" to suit your requirements.

c. Change the direct reference made to the first Dropdown Form Element in the line of code directly below comment (4) to the appropriate reference

For example, if the Country field is the fifth field on the Search form, a reference to it is made as Value5_1. This requires a change to the line of code below comment (4) as shown.

document.getElementById("Value5_1 ").onchange=secondDropdown;

Additional Considerations

The use of this solution may conflict with other solutions that you may have already used for a particular DataPage.

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

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Create New...