Limit total options in select - PHP

Asked

Viewed 807 times

2

To limit the number of options selected in a select so that the form is not sent above a maximum amount.

For example, I want a maximum of 3 options to be submitted in the form. Above that, I wanted to prevent the user from submitting the form.

How can I do that?

<form action="" method="post">
<select class="form-control" name="options" multiple="multiple">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
    <option value="4">Opção 4</option>
    <option value="5">Opção 5</option>
    <option value="6">Opção 6</option>
    <option value="7">Opção 7</option>
    <option value="8">Opção 8</option>
    <option value="9">Opção 9</option>
    <option value="10">Opção 10</option>
</select>
<input type="submit" name="send" value="enviar">
</form>
php javascript
  • 2

    I think only with javascript and still there is no way to really stop, who knows what you are doing can circumvent it, so you still have to check again on the server with PHP

  • take a look here, I think it will help you> http://stackoverflow.com/questions/2046205/how-do-you-limit-options-selected-in-a-html-select-box/2046293#2046293

  • the ideal would not be to use checkboxes for this?

2 answers

4

You can do by javascript: Look at this Fiddle

$( "#send" ).click(function() {
  var count = $("#options :selected").length;
  alert( count );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post">
<select class="form-control" id="options" name="options" multiple="multiple">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
    <option value="4">Opção 4</option>
    <option value="5">Opção 5</option>
    <option value="6">Opção 6</option>
    <option value="7">Opção 7</option>
    <option value="8">Opção 8</option>
    <option value="9">Opção 9</option>
    <option value="10">Opção 10</option>
</select>
<input type="submit" id="send" name="send" value="enviar">
</form>

Running the above code you can also see the result.

I’m not blocking sending, but if you select multiple items the alert will display how many.

Just treat and use javascript as you see fit.

1


Slightly improving the code of @Ricardo ... Here it disables the button when it reaches more than 3 selected.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#options").change(function(){
    var total = $("#options :selected").length;

   if(total > 3){
     $("#send").prop("disabled", true);
   }else{
     $("#send").prop("disabled", false);
   }
  });
});
</script>
<form action="" method="post">
<select class="form-control" id="options" name="options" multiple="multiple">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
    <option value="4">Opção 4</option>
    <option value="5">Opção 5</option>
    <option value="6">Opção 6</option>
    <option value="7">Opção 7</option>
    <option value="8">Opção 8</option>
    <option value="9">Opção 9</option>
    <option value="10">Opção 10</option>
</select>
<input type="submit" id="send" name="send" value="enviar">
</form>

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.