Limit Selection to 3 out of Multi-Select List Box

[EmmePGN]

Hello,

Can anyone please help me on imposing a limit to the number of selections users can have from the multi-select listbox. The form is an Update Form.

Below is my script, and it is not working. It is still allowing users to press on. 

Thank you so much in advance.

 

<script type="text/javascript">
 var v_state = "[@field:TypesWrittenComm]" ;
 var o_state = document.getElementById("EditRecordTypesWrittenComm") ;
 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 ;
     } 
    }
   }
  }
 }
 
function check_listbox()
{
   var maximum_selections = 3;
   var MyListbox = document.getElementsByName("EditRecordTypesWrittenComm")[0];
   var number_selections = 0;
   for (var i=0; i<MyListbox.length; i++)
   {
      if (MyListbox.options[i].selected) number_selections++;
    }
   if (number_selections>maximum_selections)
   {
     alert("You can select only " + maximum_selections + " items");
     return false
    }
}

document.addEventListener('DataPageReady', f_listbox);
 //You can also use the line below instead of the eventlistener 
// setTimeout(f_listbox, 20); 
</script>

 

 

 

 

[Vitalikssssss]

Hi @EmmePGN,

The following script fires the selection check after user clicks on Update button in his form:

<script type="text/javascript">
 var v_state = "[@field:TypesWrittenComm]" ;
 var o_state = document.getElementById("EditRecordTypesWrittenComm") ;
 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 ;
     } 
    }
   }
  }
 }
 
function check_listbox()
{
   var maximum_selections = 3;
   var MyListbox = document.getElementsByName("EditRecordTypesWrittenComm")[0];
   var number_selections = 0;
   for (var i=0; i<MyListbox.length; i++)
   {
      if (MyListbox.options[i].selected) number_selections++;
    }
   if (number_selections>maximum_selections)
   {
     alert("You can select only " + maximum_selections + " items");
     event.preventDefault();
    }
}


document.addEventListener('BeforeFormSubmit', function(event) {
	check_listbox();

});

</script>

Hope this helps.

Regards,

vitalikssssss

[EmmePGN]

Hello Vitalikssssss

Thank you so very much for the code. It is working.  Thank you.

There is a new issue though. The value results of the selection are now bunching together at the bottom of the list box. The results somehow begin to occupy the extra space that is generated by the multi-list box.   I attached an image here to show what I'm saying. 

Any recommendation for this issue?  

I will appreciate your further help.

 

 

 

 

 

[Kurumi]

Hi @EmmePGN - can you try this code instead:
 

<script>
 var v_Knowledge_New = "[@field:Address]" ;
 var o_Knowledge_New= document.getElementById("EditRecordAddress") ;
 o_Knowledge_New.multiple = true ;

document.addEventListener('DataPageReady', function (event) {
  if ( v_Knowledge_New.indexOf(",") > 0 ) {
   for (var i=0 ; i < o_Knowledge_New.options.length; i++ ) {
    if(o_Knowledge_New[i].value == v_Knowledge_New) {
     o_Knowledge_New.remove(i);
     break ;
    }
   }
   var o_st = v_Knowledge_New.split(", ") ;
   for (var j=0 ; j < o_st.length; j++) {
    for (var i=0 ; i < o_Knowledge_New.options.length; i++ ) {
     if(o_st[j]== o_Knowledge_New.options[i].value){
      o_Knowledge_New.options[i].selected = true ;
      break ;
     }
    }
   }
  }
});

document.addEventListener('BeforeFormSubmit', function(event) {

   var MyListbox = document.getElementsByName("EditRecordAddress")[0];
   var number_selections = 0;
   for (var i=0; i<MyListbox.options.length; i++)
   {
      if (MyListbox.options[i].selected) 
         number_selections+=1;
    }
   if (number_selections>3)
   {
     event.preventDefault();
     alert("You can select only " + 3 + " items");
     event.stopImmediatePropagation(); 

    }

});
</script>

I was able to test this on my end and working as expected. Hope this helps! 

[PotatoMato]

Hi! Just to update, Caspio has already added an article to limit selection on multi-select listbox: https://howto.caspio.com/tech-tips-and-articles/setting-the-maximum-number-of-listbox-selections-in-forms/

 

-Potato