Jump to content

JS: Select multiple values from a listbox in a WebForm


caspio

Recommended Posts

JavaScript Solution: Select multiple values from a listbox in a Submission Form

Feature Description:
This JavaScript solution shows how to enable the selection of multiple values from a listbox form element in a Submission Form DataPage.
Multiple values in a listbox can be selected by holding the Ctrl key on the keyboard while clicking on the required values simultaneously.
When the form is submitted, the values selected in the listbox are recorded as a series of all selected choices separated by commas.

For example, assume that a listbox named States in a Submission Form contains names of all the different states in the United States.
If the following three states California, Nevada and Oregon are selected in this listbox, the value stored in that field will be "California,Nevada,Oregon".

Implementation:
This solution can be used "as-is", without any changes if
a. It is used in an Submission Form DataPage and
b. The listbox field to enable multiple selection is called States.

To use this solution copy and paste the code below, inside the HTML Footer section of the DataPage using the Caspio Bridge DataPage Wizard.

<SCRIPT LANGUAGE="JavaScript">

document.addEventListener('DataPageReady', assignMultiple);

function assignMultiple() {
 /* "fieldName" is the variable name for the listbox type form element field. */
   let fieldName = "InsertRecordStates";

  let x=document.getElementsByName(fieldName);
   x[0].multiple=true;


}
</SCRIPT>

Additional Considerations

  • To use this script with a field not named as States, change all occurrences of the text States in the script to the appropriate field name.
  • If the States field is used in the Search page of a Report DataPage, configure it as a Text Field with contains as its comparison operator. Only then, a search initiated with even one of the three state names will return all records where those state names are found, including those containing multiple state names.


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

# MS Windows - IE 11, Firefox 74.0, Chrome 81.0, MS Edge 42.0
# Mac OS - Firefox 74.0, Chrome 81.0, Safari 13.1

# Android - Firefox 74.0, Chrome 81.0
#iOs - Firefox 74.0, Chrome 81.0, Safari 13.1


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

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