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

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

score 4 · Answer 1 · answered Nov 23 '12 at 18:23

4

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.

answered Nov 23 '12 at 18:23

claydiffrient

1,296
3
19
35

Hi Clay, I've tried to put a hidden input before but no luck. And yet, I don't know which id refers to a card type coz there's no line to tell. :( Have you tried my fiddle? – Wilf Nov 23 '12 at 18:28
No line to tell? Place the hidden input on your page. Then place @Clay's jquery line into the pawel code below this line: `$('.cards .' + result.card_type.name).removeClass('off');` – ethorn10 Nov 23 '12 at 18:51
Hi, I’m the developer of jCCV. This is my preferred solution. The `result.card_type.name` variable holds the actual card type. The current accepted answer is a hack relying on the code of the plugin’s demo page. However, don’t use ethorn10’s suggestion to modify the plugin’s code — there’s no need. Just put Clay’s code inside the `if (result.length_valid && result.luhn_valid) { }` block. – Pawel Decowski Jun 10 '14 at 08:50

MagePal Extensions · Accepted Answer · 2012-11-23T19:13:06.017

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

edited Nov 23 '12 at 19:13

answered Nov 23 '12 at 19:03

MagePal Extensions

17,646
2
47
62

This relies on the demo code’s HTML structure and not the core library. You can access the card type directly: `if (result.length_valid && result.luhn_valid) { $('#ccType').val(result.card_type.name) }` – Pawel Decowski Jul 02 '15 at 10:19

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

2 Answers2