Icons / PNG Icons / Delete / Edit / Add Icons / Transparent Icons

Onclick show / hide divs and add / Remove Class for tab colors

Onclick show / hide divs and add / Remove Class for tab colors




<script src="getfile path........jquery-2.1.1.min.js"></script>
<style>
.active{ color:red;}</style>
<script>

$(document).ready( function() {
  $("#searchcarttext").click(function(){
     
         $("#newcart2").hide();
          $("#searchcart2").show();  
           $(".cartpop a.active").removeClass('active');  
           $(this ).addClass('active');
    });
} );


$(document).ready( function() {
  $("#newcarttext").click(function(){
      
         $("#newcart2").show();
          $("#searchcart2").hide();
       $(".cartpop a.active").removeClass('active');  
          $(this).addClass('active');
    });
} );

</script>


<div class="row modal-header " style="margin-bottom:18px; line-height: 25px; padding: 4px; font-weight: bold; font-size: 16px; display:none;">Cart Details</div>


<div class="row cartpop"><a href="#" class="active"  onclick="newcart();" id="newcarttext"><i class="glyphicon glyphicon-shopping-cart"></i>New&nbsp;User</a>&nbsp;&nbsp;&nbsp;<a href="#" onclick="searchcart();" id="searchcarttext"><i class="glyphicon glyphicon-search"></i>Search Old Cart</a></div>
 <div class="row" id="newcart2">
   
      <div class="col-md-12 col-lg-12   col-sm-12 col-xs-12">
          
             <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Mobile Number</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Mobile Number" id="mobile_number_cart" name="mobile_number_cart" onkeypress="return isNumberKey(event)" autocomplete="off" maxlength="10" class="form-control"></div>
  
  
    </div></div>
              <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Customer Name</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Customer Name" id="customer_name_cart" name="customer_name_cart"  autocomplete="off"  class="form-control"></div>
  
  
    </div></div>
             <div class="row">
        <div class="col-md-6 col-md-offset-6 col-lg-6 col-lg-offset-6  col-sm-12 col-xs-12   form-group">
            <input type="button" name="getotp_btn" value="Continue Selling" class="btn btn-default Ipay_btn2" onclick="checkreg()"></div>
    </div></div>
</div>

<div class="row" id="searchcart2" style="display:none;">
   
      <div class="col-md-12 col-lg-12   col-sm-12 col-xs-12">
          
             <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Mobile Number</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Mobile Number" id="mobile_number_cart" name="mobile_number_cart" onkeypress="return isNumberKey(event)" autocomplete="off" maxlength="10" class="form-control"></div>
  
  
    </div></div>
             
             <div class="row">
        <div class="col-md-6 col-md-offset-6 col-lg-6 col-lg-offset-6  col-sm-12 col-xs-12   form-group">
            <input type="button" name="getotp_btn" value="Continue Selling" class="btn btn-default Ipay_btn2" onclick="checkreg()"></div>
    </div></div>
</div>





</div>

Onclick addClass and removeClass - with Jquery

  <style>
  p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }

  .active{color:#fff; background:red; padding:5px;}
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>



<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>

  <script>
$("p").click(function() {
      $("p.active").removeClass('active');
  $( this ).addClass('active');
});
</script>

Onselect whileloop, while loop in javascript

<script>
function whileloop() {
 var limitvalue=document.getElementById("limitvalue").value;
 var text = "";
 var i = 1;
 while (i <= limitvalue) {
text += "<br>The number is " + i;
        i++;
    }
    document.getElementById("demo").innerHTML = text;
if(limitvalue.value=='') // use length or value
alert('invalid')
  }
</script>



<h2>Onchange whileloop will work</h2>
<select id='limitvalue' name='limitvalue' onChange="whileloop();">
   <option selected value="0"  >Select</option>
<option>1</option>
   <option>2</option>
   <option>3</option>
<option>4</option>
<option>5</option>
</select>
<p id="demo"></p>

Onchange select box option function will work, alert on change option,javascript on change function

Example : User will select then it will work,
Onchange function


    <script>
     function jsfunction(){
         var city=document.getElementById('city').value;
      alert(city);
       }
     </script>
  

    <select id="city" onchange="jsfunction()">
    <option value="Hyderabad">Hyderabad</option>
    <option value="Banglore">Banglore</option>
      <option value="Delhi">Delhi</option>
   <option value="KalKatta">KalKatta</option>
     </select>