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 Button name Property
The HTML DOM name property is used to get or set the value of the name attribute of an input button element. This property is essential for form data submission, as the name attribute identifies the button when the form is submitted to the server.
Syntax
Following is the syntax for returning the name value −
object.name
Following is the syntax for setting the name value −
object.name = "text"
Here, text represents the new name value to be assigned to the input button.
Return Value
The name property returns a string that represents the value of the name attribute of the input button element.
Example − Getting Button Name
Following example demonstrates how to get the name attribute value of an input button −
<!DOCTYPE html>
<html>
<head>
<title>Get Button Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Get Button Name Example</h2>
<input type="button" id="myBtn" name="submitButton" value="Click to Show Name">
<p id="result"></p>
<script>
document.getElementById("myBtn").onclick = function() {
var btn = document.getElementById("myBtn");
var nameValue = btn.name;
document.getElementById("result").innerHTML = "Button name: " + nameValue;
};
</script>
</body>
</html>
The output displays the name attribute value when the button is clicked −
Button name: submitButton
Example − Setting Button Name
Following example shows how to change the name attribute value of an input button −
<!DOCTYPE html>
<html>
<head>
<title>Set Button Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Change Button Name Example</h2>
<input type="submit" id="changeBtn" name="oldName" value="Change My Name" style="padding: 10px; margin: 10px;">
<p id="display" style="font-size: 16px; color: #333;"></p>
<script>
document.getElementById("changeBtn").onclick = function() {
var btn = document.getElementById("changeBtn");
document.getElementById("display").innerHTML = "Previous name: " + btn.name;
btn.name = "newButtonName";
document.getElementById("display").innerHTML += "<br>New name: " + btn.name;
};
</script>
</body>
</html>
The output shows both the previous and new name values −
Previous name: oldName New name: newButtonName
Example − Form Submission with Button Names
Following example demonstrates how button names are used in form submission −
<!DOCTYPE html>
<html>
<head>
<title>Button Names in Form</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Form with Named Buttons</h2>
<form action="/submit" method="get">
<input type="text" name="username" value="user123" style="padding: 8px; margin: 5px;"><br>
<input type="submit" name="action" value="Save" style="padding: 10px; margin: 5px; background: #28a745; color: white; border: none;">
<input type="submit" name="action" value="Cancel" style="padding: 10px; margin: 5px; background: #dc3545; color: white; border: none;">
</form>
<p style="font-size: 14px; color: #666;">Both buttons share the same name "action" but have different values.</p>
</body>
</html>
When submitted, the server receives either action=Save or action=Cancel depending on which button is clicked, along with username=user123.
Browser Compatibility
The name property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works with all input button types including button, submit, and reset.
Key Points
-
The name property is essential for form data submission and server-side processing.
-
Multiple buttons can share the same name attribute but should have different values.
-
The property returns an empty string if no name attribute is set.
-
Changing the name property dynamically affects how the button data is submitted in forms.
Conclusion
The HTML DOM name property provides a simple way to access and modify the name attribute of input buttons. This property is crucial for form handling, allowing developers to dynamically change button identification for server-side processing and ensuring proper form data submission.
181 Views
