CODEWITHSUNDEEP
jquery
user1937021
user1937021

Reputation: 10801

Check if any select boxes have not been selected

I have a dynamic number of select elements. When the form is submitted, I want to check if any of them have not been selected yet ie the value == "", if so throw an error, any ideas how I do this please in Jquery? Thanks!

<div class="container-seller-commission">
  <div class="row-seller-commission">
    <select name="seller" id="seller" class="select-seller valid">
      <option value=""></option>
      <option value="4" selected="selected">Agent</option>
      <option value="2">Crisalix Global</option>
      <option value="1">Owner</option>
      <option value="3">Support</option>
    </select>
  </div>
</div>
<div class="row-seller-commission">
  <select name="seller" id="seller" class="select-seller valid">
    <option value=""></option>
    <option value="4" disabled="disabled">Agent</option>
    <option value="2" selected="selected">Crisalix Global</option>
    <option value="1">Owner</option>
    <option value="3">Support</option>
  </select>
</div>
<div class="row-seller-commission">
  <select name="seller" id="seller" class="select-seller valid">
    <option value=""></option>
    <option value="4" disabled="disabled">Agent</option>
    <option value="2">Crisalix Global</option>
    <option value="1" selected="selected">Owner</option>
    <option value="3" disabled="disabled">Support</option>
  </select>
</div>

Upvotes: 0

Views: 541

Answers (3)

Saumil
Saumil

Reputation: 2517

Here is the working fiddle

And here is the code used in the Fiddle,

$(document).ready(function(){

    $("#validateButtonId").on("click",function(){

    var selectBoxFlag = true;

    //iterating through all the select boxes with class 'select-seller'
    $(".select-seller").each(function(){
      if($(this).val() == ""){
        selectBoxFlag = false;
      }
    });

    if(selectBoxFlag){
        $("#formId").submit();
    }else{
        alert("Selectbox value is not selected!");
    }

  });
});

The "validateButtonId" is the ID of the button that you use when you try to submit the form, keep in mind that the input type of this button should be button and not submit

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Working fiddle.

On submit check all the select :

$('form').submit(function(e){
  e.preventDefault();

  var empty_select = false;

  $('select').each(function(){
    if($(this).val()==''){
      empty_select = true
    }
  })

  if(empty_select)
    alert('Fill all selects')
  else
    alert('submit')
})

Upvotes: 0

Cleared
Cleared

Reputation: 2590

Select all your selectboxes using $('.select-seller'), and then you can loop through all the boxes using the jquery-function each(). Inside the loop you can then get the value by using $(this).val() and compare it to an empty string. Then all you have to do is to keep track if atleast one box is missing a selection:

$(document).ready(function(){
    var unselected = false;
    $('.select-seller').each(function() {
      if ($(this).val() === '') {
        unselected = true;
      }
    });
    if (unselected) {
        //Atleast one box is missing a selection
    } else {
        //All boxes has a selection
    }
});

Upvotes: 0

Related Questions