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 name Property
The HTML DOM Input Number name property returns and modifies the value of the name attribute of an input field with type="number". The name attribute identifies the input field when form data is submitted to the server.
Syntax
Following is the syntax for returning the name value −
object.name
Following is the syntax for modifying the name value −
object.name = "text"
Return Value
The name property returns a string representing the value of the name attribute of the input number field.
Example − Getting Name Property
Following example demonstrates how to get the name property of an input number field −
<!DOCTYPE html>
<html>
<head>
<title>Input Number Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>DOM Input Number name Property</h2>
<p>Quantity: <input type="number" id="quantity" name="product_quantity" value="5" min="1"></p>
<button onclick="showName()">Show Name</button>
<p id="result"></p>
<script>
function showName() {
var numberInput = document.getElementById("quantity");
var result = document.getElementById("result");
result.innerHTML = "Name attribute: " + numberInput.name;
}
</script>
</body>
</html>
The output of the above code is −
DOM Input Number name Property Quantity: [5] [Show Name] (After clicking button) Name attribute: product_quantity
Example − Setting Name Property
Following example shows how to modify the name property of an input number field −
<!DOCTYPE html>
<html>
<head>
<title>Modify Input Number Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modifying Input Number Name Property</h2>
<p>Price: <input type="number" id="price" name="old_price" value="100" step="0.01"></p>
<button onclick="getName()">Get Name</button>
<button onclick="setName()">Change Name</button>
<p id="display"></p>
<script>
function getName() {
var priceInput = document.getElementById("price");
var display = document.getElementById("display");
display.innerHTML = "Current name: " + priceInput.name;
}
function setName() {
var priceInput = document.getElementById("price");
var display = document.getElementById("display");
priceInput.name = "new_price";
display.innerHTML = "Name changed to: " + priceInput.name;
}
</script>
</body>
</html>
The output demonstrates how the name property can be dynamically changed −
Modifying Input Number Name Property Price: [100.00] [Get Name] [Change Name] (After clicking "Get Name") Current name: old_price (After clicking "Change Name") Name changed to: new_price
Example − Form Submission with Name Property
Following example shows how the name property is used when submitting form data −
<!DOCTYPE html>
<html>
<head>
<title>Name Property in Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Data with Name Property</h2>
<form id="orderForm">
<p>Item Quantity: <input type="number" id="qty" name="quantity" value="2" min="1"></p>
<p>Unit Price: <input type="number" id="unitPrice" name="unit_price" value="15.99" step="0.01"></p>
<button type="button" onclick="showFormData()">Preview Form Data</button>
</form>
<div id="preview"></div>
<script>
function showFormData() {
var form = document.getElementById("orderForm");
var formData = new FormData(form);
var preview = document.getElementById("preview");
var output = "<h3>Form Data Preview:</h3>";
for (let [name, value] of formData) {
output += "<p>" + name + ": " + value + "</p>";
}
preview.innerHTML = output;
}
</script>
</body>
</html>
This example shows how the name property determines the field names in submitted form data −
Form Data with Name Property Item Quantity: [2] Unit Price: [15.99] [Preview Form Data] (After clicking button) Form Data Preview: quantity: 2 unit_price: 15.99
Key Points
-
The
nameproperty is essential for form processing as it identifies the field when data is submitted to the server. -
You can both read and modify the name property using JavaScript.
-
The name property returns a string value representing the current name attribute.
-
Multiple input elements can have the same name (useful for radio buttons and checkboxes), but this is less common for number inputs.
-
The name property is different from the
idattribute −idis for client-side identification, whilenameis for server-side form processing.
Conclusion
The HTML DOM Input Number name property provides a way to get and set the name attribute of number input fields. This property is crucial for form handling as it determines how the input field data is identified when submitted to the server. You can dynamically modify the name property using JavaScript to change how form data is processed.
194 Views
