text box value less than two letter (Number) value prepend with 0 using jquery

Question

I am currently working on prepending using jQuery. Here in the text field if the user enters a 2 digit number in a text field, when he clicks outside it automatically should add 0 before the text — for example if the user types 12 and he focuses out the value should be 012

With the current code I am checking how many letters he entered but I am confused how to give this append or concatenation.

With this code I am validating the text field using jquery validator

 txt_CC:{
            required: true,
            number:true,
            maxlength:3
        },

Here is my jquery code

$('#txt_CC').on('change',function(e){
    if($('#txt_CC').val().length > 2){
        $('.cc_field').val()     + '0';
    }else{
        alert("Sorry not eligble");
    }
});

Here is my input field.

<input type="text" class="cc_field" placeholder="Country Code"
       id="txt_CC" maxlength="3" name="txt_CC" />

http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript — epascarello, Sep 08 '15 at 19:27
You're looking to prepend the value, not append the value... — War10ck, Sep 08 '15 at 19:34

joyBlanks · Answer 1 · 2015-09-08T19:27:21.350

1

Try to put back the value in val function as setter

$('#txt_CC').on('change',function(e){
   var len = $('#txt_CC').val().length;
   if(len == 1){
      $('.cc_field').val( '00' + $('.cc_field').val());
   }else if(len == 2){
      $('.cc_field').val('0'+ $('.cc_field').val() );
   }else if(len == 3){
      //do something ?
   }else{
       alert("Sorry not eligble");
   }

});

edited Sep 08 '15 at 19:27

answered Sep 08 '15 at 19:22

joyBlanks

6,419
1
22
47

1) 0 should be before the current value 2) why is the OP checking for length > 2 if he/she wants to check for a 2-digit number? – Emil Sep 08 '15 at 19:27
@Emil, epascarello, thanks fixed it. I was not sure about other clauses – joyBlanks Sep 08 '15 at 19:30
@Mahadevan I was not sure when you want to fire the not eligible clause, But I hope you got the idea. – joyBlanks Sep 08 '15 at 19:30
@joyBlanks sorry i put alert to test whether it is coming in condition or not actually i don't want alert – Mr.M Sep 08 '15 at 19:35

score 1 · Accepted Answer · answered Sep 08 '15 at 19:47

1

You can try this:

$('#txt_CC').on('change',function(e){
    alert($('#txt_CC').val().length);
  if($('#txt_CC').val().length <= 2){
    $('.cc_field').val('0' + $('.cc_field').val());
  }
  else{
    alert("Sorry not eligble");
  }
});

answered Sep 08 '15 at 19:47

R-J

928
1
7
24

score 1 · Answer 3 · answered Sep 08 '15 at 19:53

Here is how to do it:

this.value = '0' + this.value;

To prepend a zero to the the value entered.

Here is a demo on how to do it:

$('#txt_CC').on('change',function(e){
     if( this.value.length <= 2 ){
         this.value = '0' + this.value;
     } else {
         alert("Sorry not eligble");
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" />

score 1 · Answer 4 · answered Sep 09 '15 at 02:31

Why to use JQuery , when you can handle this in simple JS

Pure JS Solution

function pad(number) {
    if (number.length == 2) {
        number = ("0" + number);
    } else if (number.length == 1) {
        number = ("00" + number);
    }
    document.getElementById('txt_CC').value = number;
}

<input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" onchange='pad(this.value)' />

text box value less than two letter (Number) value prepend with 0 using jquery

4 Answers4