Jad Jad - 4 months ago 20
jQuery Question

Automatically Determine Credit Card Type

I'm trying to automatically determine credit card type. The code below works but not on mobile. I've tried finding a solution for mobile but unable to do so at this time. Here's the jquery -

(function($) {
$.getCreditCardType = function(val) {
if(!val || !val.length) return undefined;
switch(val.charAt(0)) {
case '4': return 'visa';
case '5': return 'mastercard';
case '3': return 'amex';
case '6': return 'discover';
};
return undefined;
};
$.fn.creditCardType = function(options) {
var settings = {
target: '#credit-card-type',
};
if(options) {
$.extend(settings, options);
};
var keyupHandler = function() {
$("#credit-card-type li").removeClass("active");
$("input[id=authorizenet_cc_type]").val('');
switch($.getCreditCardType($(this).val())) {
case 'visa':
$('#credit-card-type .VI').addClass('active');
$("input[id=authorizenet_cc_type]").val('VI');
break;
case 'mastercard':
$('#credit-card-type .MC').addClass('active');
$("input[id=authorizenet_cc_type]").val('MC');
break;
case 'amex':
$('#credit-card-type .AE').addClass('active');
$("input[id=authorizenet_cc_type]").val('AE');
break;
case 'discover':
$('#credit-card-type .DI').addClass('active');
$("input[id=authorizenet_cc_type]").val('DI');
break;
};
};
return this.each(function() {
$(this).bind('keyup',keyupHandler).trigger('keyup');
});
};


})(jQuery);

ANSWER: I added
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I will give credit to Scott for the help he provided.

Answer

Have you tried using keypress instead of keyup?

$(this).keypress(function() {

});

or using the input event of the input field you are monitoring?

$(this).on('input', function() {

});

EDIT - Answering your question

I wasn't really sure what was going on in your code out of context. I changed a few things in the scoping just so I could get things working.

First off, I am going to assume the HTML looks something like this.

<ul id="credit-card-type">
    <li>
        <form>
        <input type="text" id="credit-card-type" />
        <input type="text" id="authorizenet_cc_type" />
        </form>
    </li>
</ul>

Then the JS using the input event

     var getCreditCardType = function(val) {
        if(!val || !val.length) return undefined;
        switch(val.charAt(0)) {
            case '4': return 'visa';
            case '5': return 'mastercard';
            case '3': return 'amex';
            case '6': return 'discover';
        }
        return undefined;
    }



     var keyupHandler = function() {
         console.log('test')
       $("#credit-card-type li").removeClass("active");
       $("input[id=authorizenet_cc_type]").val('');
       switch(getCreditCardType($(this).val())) {
         case 'visa':
          $('#credit-card-type .VI').addClass('active');
          $("input[id=authorizenet_cc_type]").val('VI');
           break;
         case 'mastercard':
          $('#credit-card-type .MC').addClass('active');
          $("input[id=authorizenet_cc_type]").val('MC');
           break;
         case 'amex':
           $('#credit-card-type .AE').addClass('active');
           $("input[id=authorizenet_cc_type]").val('AE');
           break;
         case 'discover':
           $('#credit-card-type .DI').addClass('active');
          $("input[id=authorizenet_cc_type]").val('DI');
           break;
       };
     };



    $('input#credit-card-type').on('input',keyupHandler);
Comments