Can I add dashes every 4 numbers for credit card number field in insert time

Question

Help me to set credit card number format 1111-1111-1111-1111 like this in textbox field at insert time.

 <div class="form-group">
        <label>Card Number</label>
        <input type="text" class="form-control" placeholder="xxxx-xxxx-xxxx-xxxx" name="card-number" id="credit-card" value="" >
    </div>
    <div class="form-group center-block">
        <input type="button" name="btn-update" id="btn-update" value="UPDATE" class="btn">
 </div>

Use oninput event to keep track of user input and then use logic to insert -/ — Lalit, Dec 26 '17 at 11:43
SO is not a "do my work for me" service. Use your preferred search provider to find one of the many libraries out there that will do the job. — Andreas, Dec 26 '17 at 11:44
check this - https://stackoverflow.com/questions/36833366/format-credit-card-number — Bhaskar Jain, Dec 26 '17 at 11:45

score 14 · Accepted Answer · answered Dec 26 '17 at 11:45

14

If you are using jquery

$('.creditCardText').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
  }
  $(this).val(foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="creditCardText" value="1234-1234-1234-1234" />

answered Dec 26 '17 at 11:45

TarangP

2,711
5
20
41

It's Helpful me . Thanks . – Nimesh Patel Dec 26 '17 at 11:57

Junius L · Answer 2 · 2017-12-26T12:06:55.237

2

Using onkeyup Event you can keep track of the number of characters entered by the user.

function formatCreditCard() {
    var x = document.getElementById("credit-card");
    var index = x.value.lastIndexOf('-');
    var test = x.value.substr(index + 1);
    if (test.length === 4)
         x.value = x.value + '-';
}

<div class="form-group">
        <label>Card Number</label>
        <input type="text" class="form-control" onkeyup="formatCreditCard()" placeholder="xxxx-xxxx-xxxx-xxxx" name="card-number" id="credit-card" value="" >
    </div>
    <div class="form-group center-block">
        <input type="button" name="btn-update" id="btn-update" value="UPDATE" class="btn">
    </div>

edited Dec 26 '17 at 12:06

answered Dec 26 '17 at 11:51

Junius L

15,881
6
52
96

Thanks for your efforts... – Nimesh Patel Dec 26 '17 at 11:57
Use (test.length === 4 && x.value.length<16) instead of just test.length === 4 to avoid adding dashes at the end of your string – gdawgrancid Sep 26 '19 at 20:31

score 1 · Answer 3 · answered Dec 26 '17 at 11:52

You can have your own custom logic like this:

$('input[name=card-number]').keypress(function(){
 var rawNumbers = $(this).val().replace(/-/g,'');
 var cardLength = rawNumbers.length;
 if(cardLength !==0 && cardLength <=12 && cardLength % 4 == 0){
   $(this).val($(this).val()+'-');
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
        <label>Card Number</label>
        <input type="text" class="form-control" placeholder="xxxx-xxxx-xxxx-xxxx" name="card-number" id="credit-card" value="" maxlength="19" >
    </div>
    <div class="form-group center-block">
        <input type="button" name="btn-update" id="btn-update" value="UPDATE" class="btn">
    </div>

score 0 · Answer 4 · answered Dec 26 '17 at 11:48

var txtCardNumber = document.querySelector("#txtCardNumber");
txtCardNumber.addEventListener("input", onChangeTxtCardNumber);

function onChangeTxtCardNumber(e) {     
    var cardNumber = txtCardNumber.value;

      // Do not allow users to write invalid characters
    var formattedCardNumber = cardNumber.replace(/[^\d]/g, "");
    formattedCardNumber = formattedCardNumber.substring(0, 16);

    // Split the card number is groups of 4
    var cardNumberSections = formattedCardNumber.match(/\d{1,4}/g);
    if (cardNumberSections !== null) {
        formattedCardNumber = cardNumberSections.join('-'); 
    }

    console.log("'"+ cardNumber + "' to '" + formattedCardNumber + "'");

    // If the formmattedCardNumber is different to what is shown, change the value
    if (cardNumber !== formattedCardNumber) {
        txtCardNumber.value = formattedCardNumber;
    }
}

HTML Code

<input id="txtCardNumber"/>

score 0 · Answer 5 · answered Dec 26 '17 at 11:52

Try this,

<!doctype html>
<html>
<body>
    <form>
        <input id="cc" value="" placeholder="1234 1234 1234 1234">
    </form>
    <p>Type some sample credit card numbers in the box above and it should
    automatically format it nicely.</p>
    <script>
        function cc_format(value) {
            var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
            var matches = v.match(/\d{4,16}/g);
            var match = matches && matches[0] || ''
            var parts = []
            for (i=0, len=match.length; i<len; i+=4) {
                parts.push(match.substring(i, i+4))
            }
            if (parts.length) {
                return parts.join('-')
            } else {
                return value
            }
        }

        onload = function() {
            document.getElementById('cc').oninput = function() {
                this.value = cc_format(this.value)
            }
        }
    </script>
</body>
</html>

Can I add dashes every 4 numbers for credit card number field in insert time

5 Answers5