CODEWITHSUNDEEP
javascriptjqueryvalidationselect
Scott Boyde
Scott Boyde

Reputation: 27

Jquery multiple select boxes limit selection

I wanted a select box to have a list of players with two others to add starting 11 as well as one for substitutes. I have found the following that works. 

<script type="text/javascript">
$().ready(function() {
$('#add_starting').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove_starting').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
 $('#add_subs').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select3');
});
$('#remove_subs').click(function() {
return !$('#select3 option:selected').remove().appendTo('#select1');
});
});
</script>

Here is my html

<div class="form-group">
            <div class="col-sm-3">
            <select name="from" id="select1" class="form-control" size="8" multiple="multiple">
                    {exp:clubmanager:player_select} 
            </select>
            </div>

            <div class="col-sm-1">
                <button type="button" id="add_starting" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                <button type="button" id="remove_starting" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
            </div>

            <div class="col-sm-3">
                <select name="match_players[]" id="select2" class="form-control" size="8" multiple="multiple"></select>
            </div>

            <div class="col-sm-1">
                <button type="button" id="add_subs" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                <button type="button" id="remove_subs" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
            </div>

            <div class="col-sm-3">
                <select name="match_subs[]" id="select3" class="form-control" size="8" multiple="multiple"></select>
            </div>

            </div>

           <div class="form-group">
            <div class="col-xs-6">
                <!-- Do NOT use name="submit" or id="submit" for the Submit button -->
              <button type="submit" class="btn-u">Update Player</button>
            </div>
            </div>

I am looking to add some validation on the select2 box that it won't allow submission if there are less than 11 or more than 11 players.

Upvotes: 2

Views: 191

Answers (2)

Abhinav
Abhinav

Reputation: 8168

I guess from select option 1, you are adding players to select option 2. So its better you set validation on select option1, and check then and there whether the select option 2 has 11 players(options) or not.

You can also add validation on add_subs for substitute players.

$('#select2 option,#add_subs').on('click',function(){
   if ( $('#select2 option').length == 11 ) {
      return false;
   }
else{
 //code to append
}
});

Upvotes: 0

unconditional
unconditional

Reputation: 7666

Try this:

   $('button[type="submit"]').on('click', function(e){
        if ( $('#select2').find('option').length != 11 ) {
            e.preventDefault(); // prevent submit

            console.log("Not posting!");
        } else {
            console.log("Posting!");
        }
    });

Also, you don't have to remove() an element before doing appendTo() since an element can only have one parent anyway. So this will work fine:

$('#select1 option:selected').appendTo('#select2');

Full example: JSFiddle

Upvotes: 1

Related Questions