Multi-Select Limit Selection

[Elena]

Hello there,

 

In my multi-select box, I have quite a bit of items one can select. The problem that I'm seeing is that, sometimes users select all of these items when some are actulaly not applicable to them.

 

So, I would like to limit the selection to 5, and provide an alert message that says "please limit your selection to five items".

 

Below is my code for my multi-select. Can you please let me know how might I be able to limit the selection to say, 5 selections maximum?

 

Thank you so much, and as always guidance is appreciated.

 

 

 

<script type="text/javascript">
 /*var v_Knowledge_New = "[@field:Knowledge_New]" ;
 var o_Knowledge_New= document.getElementById("EditRecordKnowledge_New") ;
 o_Knowledge_New.multiple = true ;

 function f_listbox() {
  if ( v_Knowledge_New.indexOf(",") > 0 ) {
   for (var i=0 ; i < o_Knowledge_New.options.length; i++ ) {
    if(o_Knowledge_New.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.value){
      o_Knowledge_New.options.selected = true ;
      break ;
     }
    }
   }
  }
 }
  window.onload = f_listbox ;

*/

function findMultiSelectOption(id){
var select = $('#'+id);
select.attr('multiple',true);
var option = $('#'+id+' option:selected');
if(option.length > 0){
var splited = option.val().split(', ');
if(splited.length > 1){
option.attr('selected', false).remove();
var value_map = {};
for(var i = 0; i < splited.length; i++){
value_map[splited]=splited;
}
select.find('option').each(function(i, el){
if(el.value in value_map){
el.selected = true;
}
});
}
}
}

findMultiSelectOption('EditRecordKnowledge_New');

</script>

[Xiang]

Hi Elena,

 

How are you? How's the weather in your city?

 

I think, the following code checks the number of selections:

<SCRIPT LANGUAGE="JavaScript">
function check_listbox()
{
   var maximum_selections = 5;
   var MyListbox = document.getElementsByName("EditRecordFieldName")[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.getElementById("caspioform").onsubmit=check_listbox;
</SCRIPT>

You can add it after your current code.

 

Don't forget to change names FieldName to the names of your fields.

 

I'll be grateful, if you tell me if the code works.

Have a nice day!

[Elena]

Hi there Xiang,

 

Thank you for the prompt reply and for guidance. The weather here is great today, but expecting some good rainfall in a few days as forecasted.

 

The code did not work though. I simply added the code below my existing code and changed the field name to the appropriate one as advised.

 

I wonder where we're going wrong.

[Xiang]

Hi Elena,

 

I've worked with your code. In my form the following code works:

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

 function f_listbox() {
  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 ;
     }
    }
   }
  }
 }
  window.onload = f_listbox ;

function check_listbox()
{
   var maximum_selections = 5;
   var MyListbox = document.getElementsByName("EditRecordKnowledge_New")[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.getElementById("caspioform").onsubmit=check_listbox;
</SCRIPT>

I've deleted a function, I think, it duplicates the functional and doesn't work in my account.

Is it lost anything if this code is entered instead of the existed?

[Elena]

Hello Xiang,

 

Thank you a million! This works now on my form too.

 

Thank you.

[Kurumi]

Hi @Elena ! Just an update on this post, you may also check this for solution: