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 Button name Property
The HTML DOM Button name property is associated with the name attribute of the <button> element. The name property allows you to set or return the value of the name attribute of a button element. The name attribute is primarily used in forms to identify elements when submitting form data to the server and for accessing elements using JavaScript.
Syntax
Following is the syntax for setting the name property −
buttonObject.name = "name"
Following is the syntax for getting the name property −
var name = buttonObject.name
Here, name is a string that specifies the name of the button element.
Return Value
The name property returns a string representing the value of the name attribute of the button element. If no name attribute is set, it returns an empty string.
Example − Setting Button Name Property
Following example demonstrates how to change the name property of a button dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Button Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button id="button1" name="btn1">BUTTON</button>
<p>Click the button below to change the above button's name.</p>
<button onclick="changeName()">CHANGE NAME</button>
<p id="result"></p>
<script>
function changeName() {
document.getElementById("button1").name = "SECOND BUTTON";
var newName = document.getElementById("button1").name;
document.getElementById("result").innerHTML = "The new button name is: " + newName;
}
</script>
</body>
</html>
The output shows the original button, and after clicking "CHANGE NAME", the paragraph displays the updated name −
BUTTON Click the button below to change the above button's name. CHANGE NAME (After clicking CHANGE NAME:) The new button name is: SECOND BUTTON
Example − Getting Button Name in Form
Following example shows how to retrieve the name property of buttons in a form context −
<!DOCTYPE html>
<html>
<head>
<title>Get Button Names</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<button type="button" id="btn1" name="save" onclick="showName(this)">Save</button>
<button type="button" id="btn2" name="cancel" onclick="showName(this)">Cancel</button>
<button type="button" id="btn3" name="delete" onclick="showName(this)">Delete</button>
</form>
<p id="output">Click any button to see its name property.</p>
<script>
function showName(buttonElement) {
var buttonName = buttonElement.name;
document.getElementById("output").innerHTML = "Button name: " + buttonName;
}
</script>
</body>
</html>
Each button displays its name when clicked −
Save Cancel Delete Click any button to see its name property. (After clicking Save:) Button name: save
Example − Form Submission with Button Names
Following example demonstrates how button name properties work in form submission −
<!DOCTYPE html>
<html>
<head>
<title>Button Names in Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="myForm" onsubmit="handleSubmit(event)">
<input type="text" name="username" placeholder="Enter username" required>
<br><br>
<button type="submit" name="action" value="login">Login</button>
<button type="submit" name="action" value="register">Register</button>
<button type="submit" name="action" value="reset">Reset Password</button>
</form>
<p id="result"></p>
<script>
function handleSubmit(event) {
event.preventDefault();
var clickedButton = document.activeElement;
var actionName = clickedButton.name;
var actionValue = clickedButton.value;
document.getElementById("result").innerHTML =
"Form submitted with button name: '" + actionName + "' and value: '" + actionValue + "'";
}
</script>
</body>
</html>
When any submit button is clicked, the form shows which button triggered the submission −
[Enter username] Login Register Reset Password (After clicking Register:) Form submitted with button name: 'action' and value: 'register'
Key Points
The name property is essential for identifying which button was clicked in form submissions.
Multiple buttons can share the same name but should have different values to distinguish them.
The name property can be changed dynamically using JavaScript.
If no name attribute is specified, the name property returns an empty string.
The name attribute is different from the id attribute − name is for form data, id is for element identification.
Conclusion
The HTML DOM Button name property provides access to the name attribute of button elements, enabling dynamic manipulation and form data identification. It is particularly useful in forms where multiple buttons perform different actions, allowing servers to determine which specific button triggered the form submission.
338 Views
