The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

credit card input

  • # November 17, 2012 at 12:01 pm


    I am trying to implement the credit card input type ..when I am start typing the digits I need to include dash every after 4 digits like this XXXX-XXXX-XXXX-XXXX and if it is amex card it should be like this XXXX-XXXXXX-XXXXX…

    can anyone help me with this?


    # November 17, 2012 at 9:46 pm

    Are you using jQuery? If so you can use this plugin:

    If you are not using jQuery it might be worth using just for this reason.

    You might need to do a check based on what card they chose which would look something like this (not tested)

    if ( $('#card_type_dropdown').change(function () {
    if ( $(this).val() == 'amex' )
    else { $("#credit").mask("9999-9999-9999-9999"); }

    **Note: ** I don’t really know if .mask supports live change events, but using something with this plugin might be the easiest / quickest option.

    Hopefully that helps you a little bit.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed