gistfile1.txt

<script type="text/javascript" charset="utf-8">
  function getCreditCardType(accountNumber)
  {

    //start without knowing the credit card type
    var result = "unknown";

    //first check for MasterCard
    if (/^5[1-5]/.test(accountNumber))
    {
      result = "mastercard";
    }

    //then check for Visa
    else if (/^4/.test(accountNumber))
    {
      result = "visa";
    }

    //then check for AmEx
    else if (/^3[47]/.test(accountNumber))
    {
      result = "amex";
    }

    return result;
  }
  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>