CODEWITHSUNDEEP
javascriptjquery
rory-h
rory-h

Reputation: 680

user's text input - mobile prefix should limit the amount of digits being entered.

img I have an input for mobile prefix and number:

  <div class="two columns">
    <input class="sgprefix" id="mobileprefix" name="mobileprefix" type="text">
   </div>
   <div class="nine columns">
     <input id="mobile" name="mobile" type="text" class="input numeric-only">
    </div>

What I'm trying to achieve is that - if the user entered the value 65 in mobile prefix it will limit the mobile number to 8 digits.

I don't want to use maxlength as that will limit it to 8 forever

Upvotes: 0

Views: 116

Answers (3)

Nihar Sarkar
Nihar Sarkar

Reputation: 1299

You can try this code : 

$('#mobile').keyup(function(){    
var count=$('#mobileprefix').val();
        if(count=="65"){
           $(this).attr('maxlength','8');
        }
    else{
      $(this).attr('maxlength','10');    }
});

If you want to remove the maxlength attribute use this code :

$(this).removeAttr('maxlength');

EDIT: check below code , it will change accordingly if you change the value of #mobileprefix.

(function(){

    $('#mobile').keyup(function(){    
var count=$('#mobileprefix').val();
        if(count=="65"){
           $(this).attr('maxlength','8');

        }
    else{
      $(this).removeAttr('maxlength');   }
});

$('#mobileprefix').keyup(function(){
    if($(this).val()=="65"){
        $('#mobile').val($('#mobile').val().substring(0,8));
        }
    }); 
    }());

JSFIDDLE LINK

Upvotes: 2

niyasc
niyasc

Reputation: 4490

You may use following code snippet to serve your purpose. When value of .sgprefix changes, check whether it is 65 if so, set maxlength attribute for number field, otherwise remove maxlength attribute.

$(document).ready(function() {
  $('.sgprefix').change( function() {
    if ($(this).val() == 65) {
      $('#mobile').attr('maxlength', 8);
    } else {
      $('#mobile').removeAttr('maxlength');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="two columns">
  <input class="sgprefix" id="mobileprefix" name="mobileprefix" type="text">
</div>
<div class="nine columns">
  <input id="mobile" name="mobile" type="text" class="input numeric-only">
</div>

Upvotes: 1

Stefan Kert
Stefan Kert

Reputation: 587

You could achive that with javascript. You can register a keyup event on your mobileprefix. When keyup action is performed, you check for the length of the value and if it is 2 you set the maxLength to 6, otherwise you set it 8. Probably you want to add some action if the user only adds 1 digit or to checkup if there are really digits added. 

document.getElementById("mobileprefix").onkeyup = function() {
  if (document.getElementById("mobileprefix").value == '65') {
    document.getElementById("mobile").setAttribute("maxLength", 8);
  } 
  else {
    document.getElementById("mobile").removeAttribute("maxLength");
  }
};
<div class="two columns">
  <input class="sgprefix" id="mobileprefix" name="mobileprefix" type="text">
</div>
<div class="nine columns">
  <input id="mobile" name="mobile" type="text" class="input numeric-only">
</div>

Upvotes: 0

Related Questions