Enter Only Numbers in Textbox using Javascript Example

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this blog, I will explain with you how to enter only the numeric value by using javascript. If you want to allow only numeric values to be entered into the textbox then i hope you can get best solution from here.

From here we will know how to entered only numeric value not a string. If any user try to enters alphabetic character it should warn the error. So this textbox accept only the numeric value. From here,I will give a full simple example of which blocks all are non numeric input from the being entered into the text-field.

So now in this example i will use first example in isNaN() and then the second example in match pattern.

Example 1

<!DOCTYPE html>
<html>
<head>
    <title>enter only numbers in textbox using javascript example - Codingspoint.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
</head>
<body>
    <form>
        <div class="row mt-5">
            <div class="col-md-6 offset-3">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center"><strong>Enter Only Numbers in Textbox using Javascript Example - Codingspoint.com</strong></h3>
                    </div>    
                    <div class="card-body">
                        <div class="alert alert-danger" id="alert" style="display: none;">Please Enter Numeric Value</div>
                        <div class="form-group">
                            <label><strong>Phone Number</strong></label>
                            <input type="text" name="num" placeholder="Enter Only Number..." id="num" class="form-control"\>
                        </div>
                        <div class="form-group text-center">
                            <button class="btn btn-success" onclick="getNameValue(event);">Save</button>
                        </div>
                    </div>    
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        function getNameValue(e){
            e.preventDefault();
            var num = document.getElementById("num").value;
            if (isNaN(num)) {
                document.getElementById("alert").style.display = "block";

                setTimeout(function(){
                    document.getElementById("alert").style.display = "none";
                }, 3000);

            }else{
                alert('is number');

            }
            
        }
    </script>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
    <title>enter only numbers in textbox using javascript example - Codingspoint.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
</head>
<body>
    <form>
        <div class="row mt-5">
            <div class="col-md-6 offset-3">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center"><strong>Enter Only Numbers in Textbox using Javascript Example - Codingspoint.com</strong></h3>
                    </div>    
                    <div class="card-body">
                        <div class="alert alert-danger" id="alert" style="display: none;">Please Enter Numeric Value</div>
                        <div class="form-group">
                            <label><strong>Phone Number</strong></label>
                            <input type="text" name="num" placeholder="Enter Only Number..." id="num" class="form-control" onchange="getNameValue(event);">
                        </div>
                    </div>    
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        
        function getNameValue(e) {
            e.preventDefault();

            var num = document.getElementById("num").value;

            if (!num.match(/^\d+/)) {
                document.getElementById("alert").style.display = "block";

                setTimeout(function(){
                    document.getElementById("alert").style.display = "none";
                }, 3000);

            }else{
                alert('is number');

            }
        }
    </script>
</body>
</html>

Read Also : PHP AngularJS CRUD with Search and Pagination Example From Scratch

thank you for read .I hope it can help you.Also you can follow us on Facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →