Jump to content
caspio

JS: Multiselect Listbox In Update Datapage

Recommended Posts

JavaScript SolutionSelect multiple values from a listbox in an Update DataPage
 
Feature Description:
This JavaScript solution shows how to enable the selection of multiple values using a listbox form element in an Update or Details DataPage.

 

When the DataPage is submitted, the values selected in the listbox are stored in the table as a comma-separated string.

 

For example: A field named state in a table contains US states. If three states California, Nevada and Oregon are selected in this listbox, the value stored in that field will be "California, Nevada, Oregon".

When the DataPage is opened, the current values will be preselected in the listbox.

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

a. It is used in an Update or Details DataPage and
b. The field name state exists in the DataPage.


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

<script type="text/javascript">
 var v_state = "[@field:state]" ;
 var o_state = document.getElementById("EditRecordstate") ;
 o_state.multiple = true ;

 function f_listbox() {
  if ( v_state.indexOf(",") > 0 ) {
   for (var i=0 ; i < o_state.options.length; i++ ) {
    if(o_state[i].value == v_state) {
     o_state.remove(i);
     break ;
    }
   }
   var o_st = v_state.split(", ") ;
   for (var j=0 ; j < o_st.length; j++) {
    for (var i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options[i].value){
      o_state.options[i].selected = true ;
      break ;
     } 
    }
   }
  }
 }
 document.addEventListener('DataPageReady', f_listbox);
 //You can also use the line below instead of the eventlistener 
// setTimeout(f_listbox, 20); 
</script>

 
Tips for Customization
 
To customize this script to enable the same feature for the additional field, duplicate the first three lines using your second field name. Then duplicate the code inside the f_listbox function.

 

Tested Browsers
This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 10, Firefox 25.0.1, Chrome 31.0.1650.57, Safari 5.1.7


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. 

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...