Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Allow only numbers to be typed in a textbox

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 188
    Comment on it

    If you have requirement to allow only number in the textbox you can use either of following method. This will allow only numbers i.e. 1,2,3,4,5,6,7,8,9 and 0 all other chars entered will not be accepted.

    There are two approach to do it. First Approach:

    <form name="myForm" id="myForm" method="post" action="Servlet">
       Enter numbers only <input type="text" name="age" id="age" />
       <input type="button" name="submit" value="Submit" onclick="submitForm()" /> 
    </form>
    

    Add this to our current page or method declared init in common js file.

    <script type="text/javascript">
        function isAllNumeric(fieldValue){      
            var numbers = /^[0-9]+$/;       
            if(fieldValue.match(numbers))return true;       
            return false;          
        } 
    
        function submitForm(){
            if(!isAllNumeric(document.getElementById("age").value)){
                   alert('Please give valid number in Age.');
                    return;
                 }
                 document.getElementById("myForm").submit();
        } 
    </script>
    

    In above approach user would be able to enter anything in textbox but at time of submission, form will give alert to user if it contain invalid number in it. Hence even if user copy paste value which contains invalid number in it this will work.

    Second approach is one shown below where user won't be able to enter wrong data, but user can copy paste invalid number which doesn't get prevented.

    <form name="myForm" method="post" action="Servlet">
       Enter numbers only <input type="text" name="age" id="age" onkeypress="return isNumber(event)" />
       <input type="submit" name="submit" value="Submit" /> 
    </form>
    

    Add this to our current page or method declared init in common js file.

    <script type="text/javascript">
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
            }
            return true;
        }
    </script>
    

    Choose the approach which suits you, first one works all the time and second one doesn't allow user to enter wrong data. You can have combination of both to have best of both functionality.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: