30-Jan-2020
.
Admin
Hi Dev,
In this blog, I will explain you how to enter only numeric value in javascript. You want to allow only numeric values to be entered into the textbox.
You entered only numeric value not a string. If user enters alphabetic character it should warn the error. This textbox accept only numeric value.Here,I will give a full example which blocks all non numeric input from being entered into the text-field.
In this example i will use first example in isNaN() and second example in match pattern.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>enter only numbers in textbox using javascript example - nicesnippets.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 - NiceSnippets.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 - nicesnippets.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 - NiceSnippets.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>
It will help you....
#JavaScript
