Twitter Bootstrap Question posted in

How to check select contains default selected option or not? – Twitter bootstrap

I want to check if any select is submitting default selected option. If so then the submit button event will change the select drop down background color otherwise the the button will normally allow for submit. Here is the source code:

      checkEmpty();

      function checkEmpty() {
        $('form').find('input').on('blur', function() {
          if ($(this).val() == '') {
            $(this).css('background-color', 'red');
          } else {
            $(this).css('background-color', 'transparent');
          };
        });
      };

      $('button#button1').on('click', function() {
        $('form').find('input').each(function() {
          if ($(this).val() == '') {
            $(this).css('background-color', 'red');
          } else {
            $(this).css('background-color', 'transparent');
          };
        });

        //This code 
        $('form').find('select').each(function() {

          if ($(this).val() == '0') {
            $(this).css('background-color', 'red');
          } else {
            $(this).css('background-color', 'transparent');
          };
        });

      });

      $('#employeeid,#number').keypress(function(e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
          return false;
        }
      });

      $('#employename').keypress(function(e) {
        if (e.which < 97 /* a */ || e.which > 122 /* z */ ) {
          e.preventDefault();
        }
      });
.bs-example {
  //font-family: sans-serif;
  position: relative;
  margin: 100px;
}
.typeahead,
.tt-query,
.tt-hint {
  border: 2px solid #CCCCCC;
  border-radius: 8px;
  font-size: 12px;
  height: 100%px;
  line-height: 100%px;
  outline: medium none;
  padding: 8px 12px;
  //width: 100%;

}
.twitter-typeahead {
  width: 100%;
  display: block !important;
}
.typeahead {
  background-color: #84e184;
}
.typeahead:focus {
  border: 2px solid #0097CF;
}
.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
  color: #999999;
}
.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  //width: 422px;

}
.tt-suggestion {
  font-size: 12px;
  line-height: 12px;
  padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}
.tt-suggestion p {
  margin: 0;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="panel-group">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title" style="text-align: center;">Test</h3>
      </div>
      <div class="panel-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-sm-3" for="acode">ID</label>
            <div class="col-sm-5 " id="empid">
              <div class="  input-group ">
                <span class="input-group-addon "><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>	
                <input class="form-control " list="employeeid" name="employeeid" id="employeeid" placeholder="Enter ID">
                <datalist id="employeeid">
                </datalist>
                <span class="input-group-btn">							    
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true" ></i></span>
                </button>
                </span>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Name</label>
            <div class="col-sm-5">
              <input type="text" class="form-control" name="employename" id="employename" placeholder="Enter Name">
              <span id="errmsg2" class="errmsg"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Number</label>
            <div class="col-sm-5">
              <input type="text" class="form-control" name="number" id="number" placeholder="Enter Number">
              <span id="errmsg2" class="errmsg"></span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3" style="text-align:right;">Month</label>
            <div class="col-sm-5">
              <select name="langOpt[]" id="langOpt">
                <option value="0" selected disabled>Select Month</option>
                <option value="ALL">All</option>
                <option value="JAN">January</option>
                <option value="FEB">February</option>
                <option value="MAR">March</option>
                <option value="APR">April</option>
                <option value="MAY">May</option>
                <option value="JUN">June</option>
                <option value="JUL">July</option>
                <option value="AUG">August</option>
                <option value="SEP">September</option>
                <option value="OCT">October</option>
                <option value="NOV">November</option>
                <option value="DEC">December</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" onclick="" id="button1" class="btn btn-primary">Save</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Add a simple check to see if the selected month equals the default month.

    $(document).ready(function(){
  $("#submit").click(function(){
   var month= $(#DropdownID option:selected).val();
    if(month== "Select Month")
    {
     alert("Please select a Month");
     return false;
    }
 });
});
    Login or Signup to reply.
  2. 0 
          checkEmpty();
      function checkEmpty(){
        $('form').find('input').on('blur', function(){
          if($(this).val()==''){
            $(this).css('background-color','red');
          } else {
            $(this).css('background-color','transparent');
          };
        });		
      };

      $('button#button1').on('click', function(){
		  ok=true;
		$('form').find('input').each(function(){
		  if($(this).val()==''){ 
            $(this).css('background-color','red');
			ok=false;
          } else {
            $(this).css('background-color','transparent');
          };
        });
		
		//This code 
		$('form').find('select').each(function(){
		
		  if($(this).val()==null){  
            $(this).css('background-color','red');
			ok=false;
			
          } else {
            $(this).css('background-color','transparent');
          };
        });
     return ok;
      });

      $('#employeeid,#number').keypress(function(e){
          if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
             return false;
          }
      });

      $('#employename').keypress(function(e) {
          if(e.which < 97 /* a */ || e.which > 122 /* z */) {
              e.preventDefault();
          }
      });
    <!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>      
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
      <style type="text/css">
         .bs-example{
         //font-family: sans-serif;
         position: relative;
         margin: 100px;
         }
         .typeahead, .tt-query, .tt-hint {
         border: 2px solid #CCCCCC;
         border-radius: 8px;
         font-size: 12px;
         height: 100%px;
         line-height: 100%px;
         outline: medium none;
         padding: 8px 12px;
         //width: 100%;
         }
         .twitter-typeahead {
         width: 100%;
         display:block !important;
         }
         .typeahead {
         background-color: #84e184;
         }
         .typeahead:focus {
         border: 2px solid #0097CF;
         }
         .tt-query {
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
         }
         .tt-hint {
         color: #999999;
         }
         .tt-dropdown-menu {
         background-color: #FFFFFF;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 12px;
         padding: 8px 0;
         //width: 422px;
         }
         .tt-suggestion {
         font-size: 12px;
         line-height: 12px;
         padding: 3px 20px;
         }
         .tt-suggestion.tt-is-under-cursor {
         background-color: #0097CF;
         color: #FFFFFF;
         }
         .tt-suggestion p {
         margin: 0;
         }
      </style>
   </head>
   <body >
      <div class="container"  >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading" >
                  <h3 class="panel-title" style="text-align: center;">Test</h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="acode">ID</label>
                        <div class="col-sm-5 " id = "empid" >
                           <div class="  input-group ">
                              <span class="input-group-addon "><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>							  
                              <input class="form-control " list="employeeid" name="employeeid" id="employeeid"  placeholder="Enter ID">
                              <datalist  id="employeeid">								
                              </datalist>
                              <span class="input-group-btn">							    
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true" ></i></span>
                              </button>    
                              </span>							  
                           </div>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-3" style="text-align:right;">Name</label>
                        <div class="col-sm-5">                                                               
                           <input type="text" class="form-control" name="employename"  id="employename" placeholder="Enter Name" >        
                           <span id="errmsg2" class="errmsg"></span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-3" style="text-align:right;">Number</label>
                        <div class="col-sm-5">                                                               
                           <input type="text" class="form-control" name="number"  id="number" placeholder="Enter Number" >        
                           <span id="errmsg2" class="errmsg"></span>
                        </div>
                     </div>
					 
					 <div class="form-group">
                        <label class="control-label col-sm-3" style="text-align:right;">Month</label>
                        <div class="col-sm-5">                                                               
                            <select   name="langOpt[]"  id="langOpt" >
						     <option value="0" selected disabled>Select Month</option>
							 <option value="ALL">All</option>
							 <option value="JAN">January</option>
							 <option value="FEB">February</option>
							 <option value="MAR">March</option>
							 <option value="APR">April</option>
							 <option value="MAY">May</option>
							 <option value="JUN">June</option>
							 <option value="JUL">July</option>
							 <option value="AUG">August</option>
							 <option value="SEP">September</option>
							 <option value="OCT">October</option>
							 <option value="NOV">November</option>
							 <option value="DEC">December</option>							 
							</select>
                        </div>
                     </div>
					 
                     <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                           <button type="submit"  onclick="" id="button1" class="btn btn-primary">Save</button>                            
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search