Skip to content

April 12, 2011

3

jCreditCard

This jQuery script is a user interface enhancement. The script first takes the type of preferred payment the user wants to use and gives the correct form. If credit card is selected, the script will know what type of credit card the user is using based on the credit card number. Using this information, it will dynamically indicate to the user that the correct credit card type has been selected and will change a hidden field to that type. It will also show the correct cvv instructions depending on credit card.

Demo

Numbers for demonstration. AMEX: 347, Discover: 6011, Visa: 4, Mastercard: 51.

Javascript

$(document).ready(function() {
$('input[name=paymenttype]:eq(0)').click();
	$("input[name='paymenttype']").change(function(){
		if (($(this).val()) == 'cc'){
			$('.paypal').css("opacity",0.5);
			$('#ccs').removeClass().addClass('all');	
			$('#cc_fields').slideDown();
		}else if (($(this).val()) == 'paypal'){
			$('.paypal').css("opacity",1);
			$('#ccs').removeClass().addClass('none');	
			$('#cc_fields').slideUp();
		}
	});
	$("input[name='cc_number']").keyup(function(){
		var visa = new RegExp("^4"), 
		mastercard = new RegExp("^5[1-5]"), 
		amex = new RegExp("^3[47]"), 
		discover = new RegExp("^(6011|622(1(2[6-9]|[3-9][0-9])|[2-8][0-9][0-9]|9([0-1][0-9]|2[0-5]))|64[4-9]|65)"); 
		if ($(this).val().match(discover) != null){
			$('#ccs').removeClass().addClass('discover')
			$('input[name=user_cc]').val('discover');
		}else if ($(this).val().match(visa) != null){
			$('#ccs').removeClass().addClass('visa');
			$('input[name=user_cc]').val('visa');
		}else if ($(this).val().match(mastercard) != null){
			$('#ccs').removeClass().addClass('mastercard');
			$('input[name=user_cc]').val('mastercard');
		}else if ($(this).val().match(amex) != null) {
			$('#ccs').removeClass().addClass('amex');
			$('input[name=user_cc]').val('amex');
		}else {
			$('#ccs').removeClass().addClass('all');
			$('input[name=user_cc]').val('');
		}
		if ($('#ccs').hasClass('amex')){
			$('#cvv').addClass('cvvamex');
		} else {
			$('#cvv').removeClass('cvvamex');
		}
	});	
});

CSS

.paypal {opacity:0.5}
#ccs {height:38px;width:215px;display:block;float:left;text-indent:-999px;margin-right:15px;}
#ccs.all {background:url(join_files/cards.png);}
#ccs.none {background:url("join_files/cards.png") repeat scroll 0 -38px transparent;}
#ccs.visa {background:url("join_files/cards.png") repeat scroll 0px -76px transparent;}
#ccs.mastercard {background:url("join_files/cards.png") repeat scroll 0 -114px transparent;}
#ccs.discover {background:url("join_files/cards.png") repeat scroll 0 -152px transparent;}
#ccs.amex {background:url("join_files/cards.png") repeat scroll 0 -190px transparent;}
#cvv {background:url("join_files/cvv.png") no-repeat 75px 25px;width:133px}
#cvv.cvvamex {background:url("join_files/cvvamex.png") no-repeat 75px 25px}
Read more from Scripts
3 Comments Post a comment
  1. kyle Czarnecki
    Apr 12 2011

    i like your style

    Reply
    • Dec 24 2015

      Just what I’m looking for, but I’m gntiteg a syntax error on line 3 of the Javascript ( $(‘div.rotator ul li’).css({opacity: 0.0}); ) I believe I’ve placed everything right. It is not rotating as yours does in the demo, it doesn’t rotate at all.

      Reply
  2. Oct 19 2013

    This is a really usfuel technique and is something I use on every site I develop. I have a slightly different syntax, which adds the .js class to the html element instead of the body. I also include this before I link to any CSS. Although this might not be allowed by the spec, it’s something that is completely supported. The syntax I use is below:document.getElementsByTagName(‘html’)[0].className += ‘ js’;You mention Modernizr, which does exactly the same thing as you and I describe — it adds a .js class to the html (it also adds a plethora of other class names for you to hook on to). You include Modernizr in the head, someone gave me the following updated syntax, which only adds the .js class if Modernizr hasn’t already:if (typeof Modernizr === ‘undefined’) { var docElement = document.documentElement; docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, ‘ js ‘);};The only thing I would question with regards to your solution, is the methodology of your CSS, instead of styling the .nojs, I assume everything non-prefixed is with and without JavaScript, then I prefix the JavaScript-enabled styles with the new class..conditionalContent { display:block; } // default statehtml.js .conditionalContent { display:none; } // when JS is enabledFor me, this makes more sense. Firstly I think it follows the progressive enhancement idea (which I’m sure you’re doing) more closely). Secondly, it continues to work correctly if you don’t add the .no-js class / JavaScript added class, which means you follow best practice of making sure everything works without JavaScript first, before enhancing the project with JavaScript.Let me know your thoughts.

    Reply

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments