Jump to content
  • 0
Sign in to follow this  
EmmePGN

Limit Selection to 3 out of Multi-Select List Box

Question

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>

 

 

 

 

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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.

 

 

 

 

 

Multi-select List box.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...