Jump to content

Multi-Select Limit Selection


Recommended Posts

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>

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

  • 5 years later...

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
Reply to this topic...

×   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...
 Share

×
×
  • Create New...