How to switch between css with jquery


Tags: javascript,jquery,html,css,forms

Problem :

I have two forms which are places inside a ul and <li id=visa class=active> can be used to show one form and <li id=mastercard class=active> can be used to show the other form at a time.But the jquery I have below is made in such a way that its an onclick function.When I click on a link,visa,visa class is active,whn i click on mastercard,mastercard is active.But instead of onclick function I need a jquery which can make the class active on input given in a card_number field.When I input a number starting with 4,<li id=visa class=active> must be done,and when I insert number starting with 5 <li id=mastercard class=active> must take place.

Given below is my html

  <html lang="en">
    <head>
    <script src="jquery-1.7.2.min.js"></script>

    <script>



    jQuery(document).ready(function(){
        // Switch cards
        jQuery('.switchCard').click(function(e){
            var newCard = jQuery(this).attr('href');
            e.preventDefault();

            jQuery('.cards li.active').fadeOut('fast',function(){
                jQuery(this).removeClass('active');
                jQuery(newCard).fadeIn('fast',function(){
                    jQuery(newCard).addClass('active');
                });
            });
        });
    });


    </script>


     <script src="main.js"></script>


    <link rel="stylesheet" href="style.css" />
    </head>
    <body>

       <section class="card-select">
            <h2>Select Payment Type</h2>
            <div class="wrap">
                <a href="#visa" class="switchCard">
                    <img src="visa.png">
                </a>

                <a href="#mastercard" class="switchCard">
                    <img src="mastercard.png">

            </div>
        </section>






    <ul class="cards">


    <li id="visa" class="active">
    <section class="credit-card visa gr-visa">
            <div class="logo">visa</div>
            <form>
                <h2>Payment Details</h2>

                <ul class="inputs">
                    <li>
                        <label>Card Number</label>
                        <input type="text" name="cardnumber" pattern="[0-9]{13,16}" class="full gr-input" required />
                    </li>
              <li>
                <label>Name on card</label>
                <input type="text" name="card_name" size="20" class="month gr-input" required />
                    <li class="expire last">
                        <label>Expiration</label>

                    <div class="dropdown">
          <select name="one" class="dropdown-select month gr-input">
            <option value="">Month</option>
            <option value="1">Jan</option>
            <option value="2">Feb</option>
            <option value="3">Mar</option>
         <option value="4">Apr</option>
            <option value="5">May</option>
            <option value="6">Jun</option>
         <option value="7">Jul</option>
         <option value="8">Aug</option>
         <option value="9">Sep</option>
         <option value="10">Oct</option>
         <option value="11">Nov</option>
         <option value="12">Dec</option>

          </select>
        </div>          

                <div class="dropdown">
          <select name="one" class="dropdown-select year gr-input">
            <option value="">Year</option>
               <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
         <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
         <option value="2019">2019</option>
         <option value="2020">2020</option>
         <option value="2021">2021</option>
         <option value="2022">2022</option>
         <option value="2023">2023</option>
         <option value="2024">2024</option>
          </select>
        </div>

                        <div class="clearfix"></div>
                    </li>
                    <li class="cvc-code last">
                        <label>CVV Code</label>
                        <input type="text" name="cvc_code" value="174" size="10" class="gr-input" required />
                    </li>
                  <input type="post" name="submit" value="Pay Now" class="fsSubmitButton"/>
                    <div class="clearfix"></div>
                </ul>
            </form>
            <div class="watermark">visa</div>
        </section>
    </li>
    <li id="mastercard">
    <section class="credit-card mastercard gr-mastercard">
            <div class="logo"><div></div><div></div></div>

            <form>
                <h2>Payment Details</h2>

                <ul class="inputs">
                    <li>
                        <label>Card Number</label>
                        <input type="text" name="card_number" pattern="[0-9]{13,16}" class="full gr-input" required />
                    </li>
              <li>
                <label>Name on card</label>
                <input type="text" name="card_name" size="20" class="month gr-input" required />
                    <li class="expire last">
                        <label>Expiration</label>

                    <div class="dropdown">
          <select name="one" class="dropdown-select month gr-input">
            <option value="">Month</option>
            <option value="1">Jan</option>
            <option value="2">Feb</option>
            <option value="3">Mar</option>
         <option value="4">Apr</option>
            <option value="5">May</option>
            <option value="6">Jun</option>
         <option value="7">Jul</option>
         <option value="8">Aug</option>
         <option value="9">Sep</option>
         <option value="10">Oct</option>
         <option value="11">Nov</option>
         <option value="12">Dec</option>

          </select>
        </div>          

                <div class="dropdown">
          <select name="one" class="dropdown-select year gr-input">
            <option value="">Year</option>
               <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
         <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
         <option value="2019">2019</option>
         <option value="2020">2020</option>
         <option value="2021">2021</option>
         <option value="2022">2022</option>
         <option value="2023">2023</option>
         <option value="2024">2024</option>
          </select>
        </div>

                        <div class="clearfix"></div>
                    </li>
                    <li class="cvc-code last">
                        <label>CVV Code</label>
                        <input type="text" name="cvc_code" value="174" size="10" class="gr-input" required />
                    </li>
                <input type="post" name="submit" value="Pay Now" class="fsSubmitButtonM"/>
                    <div class="clearfix"></div>

                </ul>
            </form>
            <div class="watermark"><div></div><div></div></div>
        </section>

    </li>
    </body>
    </html>

The css is

/* === Basic reset === */
* { margin: 0; padding: 0; outline: none; box-sizing:border-box; }
a>img { border: none; }
header, footer, article, section, nav, aside { display: block; }

/* === General === */
body {
    font-family:Arial;
    font-size: 14px;
    background:#ddd;
}

.clearfix {
    clear:both;
}
/* === Credit Card === */
.credit-card {
    display:block;
    position:relative;
    width:93.75%;   /* This is 300px on 320px wide screen */
    max-width:500px;    /* Just to make sure that it doesnt get crazy on bg screens */
    min-width:300px;    /* And make sure that it contains at least some size */
    margin:30px auto;
    padding:20px;
    overflow:hidden;
    border-radius:6px;
    z-index:1;
}

.credit-card .inputs {
    list-style:none;
    margin-top:30px;

}

.credit-card .inputs li {
    margin-bottom:30px;
}


.credit-card .inputs li.last {
    margin-bottom:10px;
}

.credit-card .inputs li.expire {
    float:left;
    width:70%;
    margin-right:5%;
}

.credit-card .inputs li.expire input{
    float:left;
    width:35%;
}

.credit-card .inputs li.expire input.month{
    width:30%;
    margin-right:5%;
}

.credit-card .inputs li.cvc-code {
    float:right;
    width:20%;


}
.creditcatd .inputs ul.cvc-code{
display: inline;
}

.credit-card .inputs li.cvc-code input {
    width:70%;
}

.credit-card .watermark {
    position:absolute;
    z-index:10;
}

.credit-card form {
    position:relative;
    z-index:50;
}

.credit-card .logo {
    position:absolute;
    top:15px;
    right:20px;
    text-transform:uppercase;
    font-weight:bold;
}
/* === Visa === */
.visa {
    color:#fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2);
}

.visa h2 {
    text-shadow:1px 1px 2px rgba(17,121,173,0.8);
}

.visa .logo {
    color:rgba(255,255,255,0.9);
    font-size:2em;
    font-style:italic;
    text-shadow:0px 0px 3px rgba(17,123,173,0.9);
}

.visa .logo:after {
    content:' ';
    position:absolute;
    left:0px;
    top:5px;
    width: 0;
    height: 0;
    border-top: 10px solid orange;
    border-left: 10px solid transparent;
}

.visa .watermark {
    bottom:-100px;
    left:-50px;
    color:rgba(255,255,255,0.06);
    font-size:20em;
    font-weight:bold;
    font-style:italic;
}
/* === Mastercard === */
.mastercard {
    color:#fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.3);
}

.mastercard h2 {
    text-shadow:0px 1px 1px #2D4DAA;
}

.mastercard label {
    color:rgba(255,255,255,0.7);
    text-shadow:0px 1px 1px rgba(0,0,0,0.4);
}

.mastercard input {
    border:1px solid rgba(39,70,157,0.8);
}

.mastercard .logo div {
    float:left;
    width:25px;
    height:25px;
    border-radius:15px;
    background:rgba(239,209,57,0.8);
}

.mastercard .logo div:first-child 
{
    background:rgba(223,40,40,0.8);
    margin-right:-10px;
}

.mastercard .watermark {
    bottom:-130px;
    left:15%;
}

.mastercard .watermark div {
    float:left;
    width:200px;
    height:200px;
    border-radius:100px;
    background:rgba(239,209,57,0.1);
}

.mastercard .watermark div:first-child {
    background:rgba(223,40,40,0.1);
    margin-right:-60px;
}
/* === Forms === */
label {
    display:block;
    margin-bottom:8px;
    color:rgba(255,255,255,0.6);
    text-transform:uppercase;
    font-size:1em;
    font-weight:bold;
    text-shadow:0px 1px 2px rgba(17,123,173,0.6);
}

input {
    display:block;
    padding:10px 8px;
    color:#999;
    font-size:1em;
    font-weight:bold;
    text-shadow:1px  1px 1px #fff;
    border:1px solid rgba(16,103,133,0.6);
    box-shadow:0px 0px 3px rgba(255,255,255,0.5), inset 0px 1px 4px rgba(0,0,0,0.2);
    border-radius:3px;
}

input.full {
    width:100%;
}


/* === Gradients === */
.gr-visa {
    background: #1db1cf; /* Old browsers */
    background: -moz-linear-gradient(top,  #1db1cf 0%, #1078ab 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1db1cf), color-stop(100%,#1078ab)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1db1cf 0%,#1078ab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1db1cf', endColorstr='#1078ab',GradientType=0 ); /* IE6-9 */
}
.gr-mastercard {
    background: #4d86ce; /* Old browsers */
    background: -moz-linear-gradient(top,  #4d86ce 0%, #2d4daa 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d86ce), color-stop(100%,#2d4daa)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4d86ce 0%,#2d4daa 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4d86ce 0%,#2d4daa 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4d86ce 0%,#2d4daa 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #4d86ce 0%,#2d4daa 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d86ce', endColorstr='#2d4daa',GradientType=0 ); /* IE6-9 */
}
.gr-input {
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #d9d9d9 38%, #e5e5e5 82%, #e7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(38%,#d9d9d9), color-stop(82%,#e5e5e5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}








.dropdown {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 28px;
  width: 150px;
  background: #f2f2f2;
  border: 1px solid;
  border-color: white #f7f7f7 #f5f5f5;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888 transparent;
  pointer-events: none;
}
.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}
.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.dropdown-select {
  position: relative;
  width: 130%;
  margin: 0;
  padding: 6px 8px 6px 10px;
  height: 28px;
  line-height: 14px;
  font-size: 12px;
  color: #62717a;
  text-shadow: 0 1px white;
  /* Fallback for IE 8 */
  background: #f2f2f2;
  /* "transparent" doesn't work with Opera */
  background: rgba(0, 0, 0, 0) !important;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}
.dropdown-select:focus {
  z-index: 3;
  width: 100%;
  color: #394349;
  outline: 2px solid #49aff2;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: -2px;
}
.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  background: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
}

/* Fix for IE 8 putting the arrows behind the select element. */
.lt-ie9 .dropdown {
  z-index: 1;
}
.lt-ie9 .dropdown-select {
  z-index: -1;
}
.lt-ie9 .dropdown-select:focus {
  z-index: 3;
}

/* Dirty fix for Firefox adding padding where it shouldn't. */
@-moz-document url-prefix() {
  .dropdown-select {
    padding-left: 6px;
  }
}
.fsSubmitButton
{
float:left;
width:20%;
padding: 7px 12px 8px !important;
font-size: 15px !important;
background-color: #57d6c7;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.fsSubmitButtonM
{
float:left;
width:20%;
padding: 7px 12px 8px !important;
font-size: 15px !important;
background-color: #3dbdae;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}


/* === Card Selection === */
.card-select {
    margin-bottom:40px;
}

.card-select h2 {
    font-size:1.5em;
    color:#555;
    text-shadow:1px 1px 1px rgba(255,255,255,0.2);
}

.card-select .wrap {
    width:300px;
    margin:20px auto;
    padding:10px;
    border:1px solid #A0A0A0;
    background:rgba(176,176,176,0.4);
    border-radius:6px;
    box-shadow:0px 0px 2px rgba(0,0,0,0.5);
}

.card-select a {
    text-decoration:none;
}

.card-select a img {
    width:15%;
}

the below css deals with the hiding and showing of the cards

/* === Cards === */
.cards {list-style:none;}
.cards>li {display:none;}
.cards>li.active {display:block;}

The jquery code which is used to switch the class using onclick is

 jQuery(document).ready(function(){
        // Switch cards
        jQuery('.switchCard').click(function(e){
            var newCard = jQuery(this).attr('href');
            e.preventDefault();

            jQuery('.cards li.active').fadeOut('fast',function(){
                jQuery(this).removeClass('active');
                jQuery(newCard).fadeIn('fast',function(){
                    jQuery(newCard).addClass('active');
                });
            });
        });
    })

;

I dont know how can I modify the above code,so that I can change the class when i enter a numbers starting with so and so in the card number field

Im sorry for the long code description,but order to get a clear view,I have given this fully

js fiddle http://jsfiddle.net/KaDy8/



Solution :

Try this function instead

jQuery(document).ready(function(){
$('input[name="cardnumber"]').on('keyup',function(){
   var cc_num = $('input[name="cardnumber"]').val();
   if(cc_num.charAt(0)=='4'){
    $("#visa").addClass("active");
    $("#mastercard").removeClass("active");
   }else if(cc_num.charAt(0)=='5'){
    $("#mastercard").addClass("active");
    $("#visa").removeClass("active");
   }
});
});

    CSS Howto..

    How do I style HTML in a JEditorPane?

    How can I make a display:flex container expand horizontally with its wrapped contents?

    how to get a rounded corner table with a body in different color with CSS?

    Capybara how to check if 'li' of a given link has proper css class

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    CSS / Jquery How to auto-size containers and images

    How to use CSS for mobile in the right way?

    how to center a div between another two (left and right) divs?

    How to use the compass transition mixins with a translateX property and autoprefixer?

    How to justify short text inside fill fixed width parent with CSS?

    div not showing above text box

    How to make a website look like a Windows Office application? [closed]

    How to link an external stylesheet in CSS

    How to specify a more specific styling with .css.scss?

    How do I specify IE 11 specific css file?

    How can I simply add a css file to change the background color for my shiny app

    How to create shapes in css? [closed]

    How to prevent css borders from floating to the top of parent div

    How to know when you have received an image in the browser?

    How to put image and input on the same line with css

    Hovering over navigation link to show a separate div

    Codeigniter shows views differently when index is removed

    How to make an item background visible on overflow?

    Show div when hover another div using only css

    How to make somethings like this in CSS?

    How to make function NOT highlight last row in table?

    How to change html td background colour through Javascript?

    How to make cut off in CSS as shown in the attached image?

    How do I change the arrow in the select with Chosen plugin?

    How to add style to the parent when radio button is selected