Why this jquery doesnt works?

Question

check this fiddle http://jsfiddle.net/KaDy8/7/ . this is my jquery code

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");
   }
});
});

When I enter 4,the active class should be added to the ul element visa,and when i type 5 active class should be added to ul element mastercard.It is working when I enter 5 into the field ,the card is getting changed,that is it is adding the class to ul element mastercard,but from there if I enter 4,its not adding back the class to ul element visa.What could be the problem?

Answer 1

I think this is the not right way to do this. You can make it simple with help of CSS with unique form. Look this demo that is the modified form of your demo. You can do this thing easily by changing main class can change whole part of your demo

Now your Html looks like that

<section id='cards' class="credit-card visa gr-cards">
        <div class="visa-logo">visa</div>
        <div class="mastercard-logo"><div></div><div></div></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="visa-watermark">visa</div>
        <div class="mastercard-watermark"><div></div><div></div></div>
    </section>

And JS as below

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

For new css see the demo

Now you can re-use the same form for visa & mastercard. Enjoy!!!!

Answer 2

The problem is that

var cc_num = $('input[name="cardnumber"]').val();

will always get the value of the first input element with that name, not of the one that triggered the event.

Once you typed in 5, that input disappears (did you notice how 5 disappears?). Any value you enter now is entered into the second input element, which is inside #mastercard. The value of the first input element (the one belonging to #visa) is still 5 and doesn't change. That's why the condition cc_num.charAt(0)=='4' is never fulfilled.

You could fix the immediate problem by getting the value of the current input element, which triggered the keyup event:

var cc_num = $(this).val();

(DEMO)

This is not a satisfying solution though since now the first input element (in #visa) is shown again and still contains the value 5. This is a very confusing behavior: The user just typed 4 and it changed to 5!

If I were you, I would only have one set of form elements (i.e. only one input field) and handle all the style changes via CSS only. Example: http://jsfiddle.net/KaDy8/16/.

Answer 3

Here is the demo :- jsfiddle.net/KaDy8/12/

Here is the demo of your problem

now understanding what was the problem in your situation first of all you should write $(this).val(); for taking current input so that you will always get current input.

Answer 4

Please have a look at http://jsfiddle.net/KaDy8/11/

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

Answer 5

You are using same name for bot input fields(cardnumber). Give unique name to inputs and check it.