Question

Im using jQuery Credit Card Validator by Pawel Decowski and want to pass the credit card type along with the other credit card detail. His template works fine and I adapted to my website designed. All the values of the form passed but one. Card Type – I cannot pass this value to the action because it just only <li>, not an input element.

Javascript

(function() {

  $(function() {
    $('.demo .numbers li').wrapInner('<a href="#"></a>').click(function(e) {
      e.preventDefault();
      return $('#card_number').val($(this).text()).trigger('input');
    });
    $('.vertical.maestro').hide().css({
      opacity: 0
    });
    return $('#card_number').validateCreditCard(function(result) {
      if (!(result.card_type != null)) {
        $('.cards li').removeClass('off');
        $('#card_number').removeClass('valid');
        $('.vertical.maestro').slideUp({
          duration: 200
        }).animate({
          opacity: 0
        }, {
          queue: false,
          duration: 200
        });
        return;
      }
      $('.cards li').addClass('off');
      $('.cards .' + result.card_type.name).removeClass('off');
      if (result.card_type.name === 'maestro') {
        $('.vertical.maestro').slideDown({
          duration: 200
        }).animate({
          opacity: 1
        }, {
          queue: false
        });
      } else {
        $('.vertical.maestro').slideUp({
          duration: 200
        }).animate({
          opacity: 0
        }, {
          queue: false,
          duration: 200
        });
      }
      if (result.length_valid && result.luhn_valid) {
        return $('#card_number').addClass('valid');
      } else {
        return $('#card_number').removeClass('valid');
      }
    });
  });

}).call(this);

I have my own live version of fiddle if you guys wanna play with. http://jsfiddle.net/cpR6b/

Please suggest

Answer 1

See http://jsfiddle.net/jGESR/

Pseudocode

Add to form tag

 <input type='hidden' id='ccType' name='ccType' />

Add to JS (assuming that the li classname [.card] will contain one classname which is the card type)

 .....
 // check to make sure only one of the card is highlighted)
 if($(".cards li:not('.off')").length == 1){
     $('#ccType').val($(".cards li:not('.off')").attr('class'))
 }

 ...
 if (result.length_valid && result.luhn_valid) {
    return $('#card_number').addClass('valid');
 } else {
    return $('#card_number').removeClass('valid');
 }