CODEWITHSUNDEEP
jqueryvalidationcredit-card
Wilf
Wilf

Reputation: 2315

How to pass form values of jQuery Credit card validation pawel decowski

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

Upvotes: 2

Views: 1083

Answers (2)

MagePal Extensions
MagePal Extensions

Reputation: 17656

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

Upvotes: 1

claydiffrient
claydiffrient

Reputation: 1306

I would create a hidden form field. Something like <input type="hidden" id="cardType" value="" />.

You could then simply add some jQuery logic in and have it set the value to whatever you wanted. Something like $('#cardType').val(result.card_type.name) would probably work well for you.

Upvotes: 4

Related Questions