I have this div with credit card information divided in 4 groups:

<div class="card-number"> 
     <div class="section" id="cc_display_number1">****</div>
     <div class="section" id="cc_display_number2">****</div>
     <div class="section" id="cc_display_number3">****</div>
     <div class="section" id="cc_display_number4">****</div>
</div>

and this input which is collecting user's credit card number:

<input type="text" id="cc_number" name="cc_number" required=""/>

I've made so far this:

$("#cc_number").on('keyup', function() {
    var number = $(this).val();

    var parts = [];    
    for (var i = 0; i < number.length; i  = 4) {
        parts.push(number.substring(i, i   4));
    }    
    
    if($(this).val() == "") {
        
    } else {
        if(parts[0].lenght == 4) {
            $("#cc_display_number1").text(parts[0]);
        }
        if(parts[1].lenght == 4) {
            $("#cc_display_number2").text(parts[1]);
        }
        if(parts[2].lenght == 4) {
            $("#cc_display_number3").text(parts[2]);
        }
        if(parts[3].lenght == 4) {
            $("#cc_display_number4").text(parts[3]);
        }
    }
});

but it's not working as expected. I want for each digit inputted in the field to replace the particular * in the card-number class div. Any ideas?

$("#cc_number").on('keyup', function() {
    var number = $(this).val();

    var parts = [];    
    for (var i = 0; i < number.length; i  = 4) {
        parts.push(number.substring(i, i   4));
    }    
    if($(this).val() == "") {
        
    } else {
        if(parts[0].lenght == 4) {
            $("#cc_display_number1").text(parts[0]);
        }
        if(parts[1].lenght == 4) {
            $("#cc_display_number2").text(parts[1]);
        }
        if(parts[2].lenght == 4) {
            $("#cc_display_number3").text(parts[2]);
        }
        if(parts[3].lenght == 4) {
            $("#cc_display_number4").text(parts[3]);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-number"> 
     <div class="section" id="cc_display_number1">****</div>
     <div class="section" id="cc_display_number2">****</div>
     <div class="section" id="cc_display_number3">****</div>
     <div class="section" id="cc_display_number4">****</div>
</div>

<input type="text" id="cc_number" name="cc_number" required=""/>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Look at the errors in your console - until the user enters enough characters, your parts array won't have four elements, so checking parts[1].length will fail, even if you correct the typo.

You also need to pad the parts, in case the user hasn't entered a full four characters yet.

$("#cc_number").on('keyup', function() {
    var number = $(this).val();

    var parts = [];
    for (var i = 0; i < number.length; i  = 4) {
        parts.push(number.substring(i, i   4).padEnd(4, "*"));
    }
    
    for (var i = 0; i < parts.length; i  ) {
      $("#cc_display_number"   (i   1)).text(parts[i]);
    }
    
    for (var i = parts.length; i < 4; i  ) {
      $("#cc_display_number"   (i   1)).text("****");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-number"> 
     <div class="section" id="cc_display_number1">****</div>
     <div class="section" id="cc_display_number2">****</div>
     <div class="section" id="cc_display_number3">****</div>
     <div class="section" id="cc_display_number4">****</div>
</div>

<input type="text" id="cc_number" name="cc_number" required=""/>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to test if parts array have index like:

$("#cc_number").on('keyup', function() {
    var number = $(this).val();
    var parts = [];    
    for (var i = 0; i < number.length; i  = 4) {
        parts.push(number.substring(i, i   4));
    }    
    if($(this).val() == "") {
        
    } else {
        if(parts[0] && parts[0].length == 4) {
            $("#cc_display_number1").text(parts[0]);
        }
        if(parts[1] && parts[1].length == 4) {
            $("#cc_display_number2").text(parts[1]);
        }
        if(parts[2] && parts[2].length == 4) {
            $("#cc_display_number3").text(parts[2]);
        }
        if(parts[3] && parts[3].length == 4) {
            $("#cc_display_number4").text(parts[3]);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-number"> 
     <div class="section" id="cc_display_number1">****</div>
     <div class="section" id="cc_display_number2">****</div>
     <div class="section" id="cc_display_number3">****</div>
     <div class="section" id="cc_display_number4">****</div>
</div>

<input type="text" id="cc_number" name="cc_number" required=""/>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>