Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Number value Property
The HTML DOM Input Number value property is used to get or set the value of an <input> element with type="number". This property allows you to retrieve the current numeric value entered by the user or programmatically set a default value for the number input field.
Syntax
Following is the syntax for getting the value property −
var value = numberObject.value;
Following is the syntax for setting the value property −
numberObject.value = number;
Here, number is a numeric value or string representation of a number that you want to set for the number input field.
Return Value
The value property returns a string representing the current value of the number input field. If no value is entered, it returns an empty string ("").
Getting the Input Number Value
Example
Following example demonstrates how to get the value from a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Input Number Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Input Number Value Property</h2>
<label for="phoneNumber">Phone Number:</label>
<input type="number" value="222" id="phoneNumber" style="margin: 5px; padding: 5px;">
<br><br>
<button onclick="getValue()" style="padding: 8px 15px;">Get Value</button>
<p id="result" style="font-weight: bold; color: #007bff;"></p>
<script>
function getValue() {
var numberInput = document.getElementById("phoneNumber");
var value = numberInput.value;
document.getElementById("result").innerHTML = "The value is: " + value;
}
</script>
</body>
</html>
The output shows the number input with the default value, and displays the current value when the button is clicked −
Input Number Value Property Phone Number: [222] [Get Value] (After clicking button) The value is: 222
Setting the Input Number Value
Example
Following example shows how to set the value of a number input field programmatically −
<!DOCTYPE html>
<html>
<head>
<title>Set Input Number Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Setting Number Input Value</h2>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1" max="100" style="margin: 5px; padding: 5px;">
<br><br>
<button onclick="setValue(10)" style="padding: 8px 15px; margin: 5px;">Set to 10</button>
<button onclick="setValue(50)" style="padding: 8px 15px; margin: 5px;">Set to 50</button>
<button onclick="clearValue()" style="padding: 8px 15px; margin: 5px;">Clear</button>
<br><br>
<button onclick="showValue()" style="padding: 8px 15px;">Show Current Value</button>
<p id="display" style="font-weight: bold; color: #28a745;"></p>
<script>
function setValue(num) {
document.getElementById("quantity").value = num;
}
function clearValue() {
document.getElementById("quantity").value = "";
}
function showValue() {
var value = document.getElementById("quantity").value;
var display = value === "" ? "No value entered" : "Current value: " + value;
document.getElementById("display").innerHTML = display;
}
</script>
</body>
</html>
The buttons allow you to set different values or clear the input field, and display the current value −
Setting Number Input Value Quantity: [ ] [Set to 10] [Set to 50] [Clear] [Show Current Value] (Shows current value or "No value entered" if empty)
Working with Form Validation
Example
Following example demonstrates using the value property with form validation −
<!DOCTYPE html>
<html>
<head>
<title>Number Input Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Age Validation Example</h2>
<form onsubmit="return validateAge(event)">
<label for="age">Enter your age (18-100):</label>
<input type="number" id="age" min="18" max="100" style="margin: 5px; padding: 5px;">
<br><br>
<button type="submit" style="padding: 8px 15px;">Submit</button>
<button type="button" onclick="resetForm()" style="padding: 8px 15px; margin-left: 10px;">Reset</button>
</form>
<p id="message" style="font-weight: bold;"></p>
<script>
function validateAge(event) {
event.preventDefault();
var ageInput = document.getElementById("age");
var age = ageInput.value;
var messageEl = document.getElementById("message");
if (age === "") {
messageEl.style.color = "red";
messageEl.innerHTML = "Please enter your age.";
return false;
}
var ageNum = parseInt(age);
if (ageNum < 18) {
messageEl.style.color = "red";
messageEl.innerHTML = "You must be at least 18 years old.";
return false;
} else if (ageNum > 100) {
messageEl.style.color = "red";
messageEl.innerHTML = "Please enter a valid age.";
return false;
} else {
messageEl.style.color = "green";
messageEl.innerHTML = "Age " + age + " is valid. Form submitted successfully!";
return true;
}
}
function resetForm() {
document.getElementById("age").value = "";
document.getElementById("message").innerHTML = "";
}
</script>
</body>
</html>
This example validates the age input and shows different messages based on the entered value −
Age Validation Example Enter your age (18-100): [ ] [Submit] [Reset] (Validation messages appear based on input)
Key Points
-
The
valueproperty always returns a string, even for number inputs. -
Use
parseInt()orparseFloat()to convert the string value to a number for calculations. -
An empty number input returns an empty string (
""), notnullorundefined. -
The property works with the
min,max, andstepattributes for validation. -
Setting an invalid value (like text) in a number input will result in an empty string when accessed via the
valueproperty.
Conclusion
The HTML DOM Input Number value property provides a simple way to get and set values for number input fields. It is essential for form validation, dynamic content updates, and handling user input in web applications. Remember that the value is always returned as a string and may need conversion for numerical operations.
467 Views
