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 Hidden name Property
The HTML DOM Input Hidden name property is used to get or set the value of the name attribute of a hidden input field. Hidden input fields are form elements that are not visible to users but can store data that needs to be submitted with the form.
Syntax
Following is the syntax for getting the name property −
object.name
Following is the syntax for setting the name property −
object.name = "text"
Where object is a reference to the hidden input element, and "text" is the new name value to assign.
Return Value
The name property returns a string representing the current value of the name attribute of the hidden input field.
Getting the Name Property
Following example demonstrates how to retrieve the name attribute of a hidden input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Hidden Input Name</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Hidden Input Name Property</h2>
<form>
<input type="hidden" id="hiddenField" name="user_token" value="abc123">
<button type="button" onclick="showName()" style="padding: 10px 20px; font-size: 16px;">Get Hidden Field Name</button>
</form>
<p id="result" style="margin-top: 20px; font-weight: bold; color: #333;"></p>
<script>
function showName() {
var hiddenInput = document.getElementById("hiddenField");
var nameValue = hiddenInput.name;
document.getElementById("result").textContent = "Hidden field name: " + nameValue;
}
</script>
</body>
</html>
The output shows the name attribute value when the button is clicked −
Hidden field name: user_token
Setting the Name Property
Following example shows how to dynamically change the name attribute of a hidden input field −
<!DOCTYPE html>
<html>
<head>
<title>Set Hidden Input Name</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Modify Hidden Input Name</h2>
<form>
<input type="hidden" id="dynamicField" name="original_name" value="sample_data">
<button type="button" onclick="changeName()" style="padding: 8px 16px; margin: 5px;">Change Name to "new_name"</button>
<button type="button" onclick="displayName()" style="padding: 8px 16px; margin: 5px;">Show Current Name</button>
</form>
<p id="output" style="margin-top: 20px; font-weight: bold; color: #2c5aa0;"></p>
<script>
function changeName() {
var hiddenInput = document.getElementById("dynamicField");
hiddenInput.name = "new_name";
document.getElementById("output").textContent = "Name changed to: " + hiddenInput.name;
}
function displayName() {
var hiddenInput = document.getElementById("dynamicField");
document.getElementById("output").textContent = "Current name: " + hiddenInput.name;
}
</script>
</body>
</html>
Clicking "Show Current Name" initially displays "original_name". After clicking "Change Name", it shows "new_name" −
Before change: Current name: original_name After change: Name changed to: new_name
Practical Example
Following example demonstrates a practical use case where hidden fields store session information that can be modified dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Hidden Field Session Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Session Management</h2>
<form id="sessionForm">
<input type="hidden" id="sessionField" name="session_token" value="xyz789">
<input type="hidden" id="userField" name="user_id" value="12345">
<p>Current Session Details:</p>
<div id="sessionInfo" style="background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 5px;"></div>
<button type="button" onclick="refreshSession()" style="padding: 10px 20px; margin: 5px;">Refresh Session</button>
<button type="button" onclick="showSessionData()" style="padding: 10px 20px; margin: 5px;">Show Session Data</button>
</form>
<script>
function showSessionData() {
var sessionField = document.getElementById("sessionField");
var userField = document.getElementById("userField");
var info = "Session Name: " + sessionField.name + "<br>";
info += "User Name: " + userField.name + "<br>";
info += "Session Value: " + sessionField.value + "<br>";
info += "User Value: " + userField.value;
document.getElementById("sessionInfo").innerHTML = info;
}
function refreshSession() {
var sessionField = document.getElementById("sessionField");
sessionField.name = "refreshed_session_token";
sessionField.value = "new_xyz" + Math.floor(Math.random() * 1000);
document.getElementById("sessionInfo").innerHTML = "Session refreshed! Click 'Show Session Data' to see changes.";
}
// Show initial data
showSessionData();
</script>
</body>
</html>
This example shows how hidden field names can be dynamically updated for session management purposes. The name attribute changes from "session_token" to "refreshed_session_token" when refreshed.
Key Points
-
The
nameproperty is essential for form submission as it identifies the data being sent to the server. -
Hidden input fields are not visible to users but their name and value attributes are accessible via JavaScript.
-
Changing the name property dynamically affects how the field data is submitted in forms.
-
The name property returns a string and can be set to any valid string value.
Conclusion
The HTML DOM Input Hidden name property provides a way to access and modify the name attribute of hidden input fields. This is useful for dynamic form handling, session management, and storing data that needs to be submitted with forms but should not be visible to users.
211 Views
