creditcardselect.js

  <script type="text/javascript" charset="utf-8">
  function handleEvent(event)
  {
    var value   = event.target.value,
        type    = getCreditCardType(value);

    switch (type)
    {
      case "mastercard":
          //show MasterCard icon
          $("ul.credit_card_types>li").css({opacity: 0.5});
          $("li.mastercard").css({opacity: 1.0});
          break;

      case "visa":
          //show Visa icon
          $("ul.credit_card_types>li").css({opacity: 0.5});
          $("li.visa").css({opacity: 1.0});
          break;

      case "amex":
          //show American Express icon
          $("ul.credit_card_types>li").css({opacity: 0.5});
          $("li.amex").css({opacity: 1.0});
          break;

      default:
          //clear all icons?
          //show error?
          $("ul.credit_card_types>li").css({opacity: 1.0});
    }
  }
  $(document).ready(function() {
    document.addEventListener("DOMContentLoaded", function(){
      var textbox = document.getElementById("credit_card_card_number");
      textbox.addEventListener("keyup", handleEvent, false);
      textbox.addEventListener("blur", handleEvent, false);
    }, false);
  })
  </script>