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 defaultValue Property
The HTML DOM input number defaultValue property returns and modifies the default value of an input field with type="number" in an HTML document. This property represents the initial value specified in the HTML value attribute, which remains unchanged even when the user modifies the input field.
Syntax
Following is the syntax for returning the default value −
object.defaultValue
Following is the syntax for modifying the default value −
object.defaultValue = "number"
Return Value
The defaultValue property returns a string representing the default value of the number input field. If no default value was specified in the HTML, it returns an empty string.
Example − Getting Default Value
Following example demonstrates how to retrieve the default value of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Number Input Default Value</h2>
<p>Age: <input type="number" id="ageInput" value="25" min="1" max="100"></p>
<button onclick="showDefault()">Show Default Value</button>
<p id="result"></p>
<script>
function showDefault() {
var input = document.getElementById("ageInput");
var defaultVal = input.defaultValue;
document.getElementById("result").innerHTML = "Default value: " + defaultVal;
}
</script>
</body>
</html>
The output displays the original default value even if the user changes the input −
Age: [25] [Show Default Value] Default value: 25
Example − Setting Default Value
Following example shows how to modify the default value of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Set Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modify Default Value</h2>
<p>Enter your birth day (1-31): </p>
<input type="number" id="dayInput" min="1" max="31" placeholder="Enter day">
<br><br>
<button onclick="setDefault()">Set Default to 15</button>
<button onclick="resetToDefault()">Reset to Default</button>
<p id="message"></p>
<script>
function setDefault() {
var input = document.getElementById("dayInput");
input.defaultValue = "15";
document.getElementById("message").innerHTML = "Default value set to: " + input.defaultValue;
}
function resetToDefault() {
var input = document.getElementById("dayInput");
input.value = input.defaultValue;
document.getElementById("message").innerHTML = "Input reset to default value: " + input.defaultValue;
}
</script>
</body>
</html>
The first button sets a new default value, and the second button resets the input field to use that default value −
Enter your birth day (1-31): [input field] [Set Default to 15] [Reset to Default] Default value set to: 15
Example − Practical Use Case
Following example demonstrates a practical scenario where the default value is used for form reset functionality −
<!DOCTYPE html>
<html>
<head>
<title>Form Reset with Default Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Configuration</h2>
<form>
<p>Quantity: <input type="number" id="qty" value="1" min="1" max="100"></p>
<p>Price: <input type="number" id="price" value="10.99" step="0.01" min="0"></p>
<p>Discount %: <input type="number" id="discount" value="0" min="0" max="100"></p>
<button type="button" onclick="calculate()">Calculate Total</button>
<button type="button" onclick="resetForm()">Reset to Defaults</button>
</form>
<p id="total"></p>
<script>
function calculate() {
var qty = parseFloat(document.getElementById("qty").value) || 0;
var price = parseFloat(document.getElementById("price").value) || 0;
var discount = parseFloat(document.getElementById("discount").value) || 0;
var subtotal = qty * price;
var total = subtotal - (subtotal * discount / 100);
document.getElementById("total").innerHTML = "Total: $" + total.toFixed(2);
}
function resetForm() {
var inputs = ["qty", "price", "discount"];
inputs.forEach(function(id) {
var input = document.getElementById(id);
input.value = input.defaultValue;
});
document.getElementById("total").innerHTML = "";
}
</script>
</body>
</html>
The reset function uses defaultValue to restore each field to its original state −
Product Configuration Quantity: [1] Price: [10.99] Discount %: [0] [Calculate Total] [Reset to Defaults] Total: $10.99
Key Points
-
The
defaultValueproperty reflects thevalueattribute specified in HTML markup. -
It remains unchanged when the user modifies the input field − only the
valueproperty changes. -
Modifying
defaultValuedoes not automatically change the displayed value − you must also set thevalueproperty. -
The property returns a string, even for number inputs, so use
parseFloat()orparseInt()for numerical calculations. -
If no default value was specified in HTML,
defaultValuereturns an empty string"".
Conclusion
The defaultValue property is essential for form reset functionality and maintaining the original state of number input fields. It allows you to retrieve the initial value specified in HTML and programmatically reset fields to their default state when needed.
141 Views
