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 value Property
The HTML DOM Input Hidden value property returns and modifies the content of the value attribute of an input field with type="hidden". Hidden input fields are invisible to users but store data that can be accessed and manipulated using JavaScript.
Hidden input fields are commonly used to store temporary data, user session information, or values that need to be submitted with forms without displaying them to users.
Syntax
Following is the syntax for returning the value −
object.value
Following is the syntax for modifying the value −
object.value = "text"
Where object is a reference to the hidden input element, and "text" is the new string value to be assigned.
Return Value
The value property returns a string representing the current value stored in the hidden input field. If no value is set, it returns an empty string.
Example − Basic Usage
Following example demonstrates how to get and set the value of a hidden input field −
<!DOCTYPE html>
<html>
<head>
<title>Hidden Input Value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>DOM Hidden Value Property Example</h2>
<p>Hidden input field stores: <span id="currentValue"></span></p>
<input type="hidden" id="hiddenField" value="Secret Data 123">
<button onclick="showValue()" style="margin: 10px; padding: 10px 20px;">Show Hidden Value</button>
<button onclick="changeValue()" style="margin: 10px; padding: 10px 20px;">Change Value</button>
<button onclick="clearValue()" style="margin: 10px; padding: 10px 20px;">Clear Value</button>
<p id="result" style="margin-top: 20px; font-weight: bold;"></p>
<script>
function showValue() {
var hiddenInput = document.getElementById("hiddenField");
var result = document.getElementById("result");
result.innerHTML = "Current value: " + hiddenInput.value;
document.getElementById("currentValue").innerHTML = hiddenInput.value;
}
function changeValue() {
var hiddenInput = document.getElementById("hiddenField");
hiddenInput.value = "New Secret Value " + new Date().getTime();
showValue();
}
function clearValue() {
var hiddenInput = document.getElementById("hiddenField");
hiddenInput.value = "";
showValue();
}
// Show initial value
showValue();
</script>
</body>
</html>
The output shows how the hidden field's value can be accessed and modified through JavaScript −
DOM Hidden Value Property Example Hidden input field stores: Secret Data 123 [Show Hidden Value] [Change Value] [Clear Value] Current value: Secret Data 123
Example − Form Submission with Hidden Fields
Following example shows how hidden input fields work with form submissions −
<!DOCTYPE html>
<html>
<head>
<title>Hidden Fields in Forms</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form id="userForm" onsubmit="return handleSubmit(event)">
<input type="hidden" id="sessionId" name="sessionId" value="sess_12345">
<input type="hidden" id="timestamp" name="timestamp">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required style="margin: 5px; padding: 5px;"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required style="margin: 5px; padding: 5px;"><br><br>
<button type="submit" style="padding: 10px 20px; background: #007bff; color: white; border: none;">Register</button>
</form>
<div id="formData" style="margin-top: 20px; padding: 10px; background: #f8f9fa;"></div>
<script>
// Set timestamp when page loads
document.getElementById("timestamp").value = new Date().toISOString();
function handleSubmit(event) {
event.preventDefault();
var form = document.getElementById("userForm");
var sessionId = document.getElementById("sessionId").value;
var timestamp = document.getElementById("timestamp").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var formData = document.getElementById("formData");
formData.innerHTML = "<h3>Form Data:</h3>" +
"<p><strong>Session ID:</strong> " + sessionId + "</p>" +
"<p><strong>Timestamp:</strong> " + timestamp + "</p>" +
"<p><strong>Username:</strong> " + username + "</p>" +
"<p><strong>Email:</strong> " + email + "</p>";
return false;
}
</script>
</body>
</html>
The form includes hidden fields for session tracking and timestamps that are automatically populated and submitted along with visible form data.
Example − Dynamic Hidden Field Management
Following example demonstrates creating and managing hidden fields dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Hidden Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Shopping Cart Hidden Fields</h2>
<div style="margin-bottom: 20px;">
<button onclick="addItem('laptop', 999.99)" style="margin: 5px; padding: 8px;">Add Laptop</button>
<button onclick="addItem('mouse', 25.50)" style="margin: 5px; padding: 8px;">Add Mouse</button>
<button onclick="addItem('keyboard', 75.00)" style="margin: 5px; padding: 8px;">Add Keyboard</button>
</div>
<button onclick="showCart()" style="padding: 10px; background: #28a745; color: white; border: none;">Show Cart Contents</button>
<button onclick="clearCart()" style="padding: 10px; background: #dc3545; color: white; border: none; margin-left: 10px;">Clear Cart</button>
<div id="cartContainer"></div>
<div id="cartDisplay" style="margin-top: 20px; padding: 10px; background: #e9ecef;"></div>
<script>
var itemCounter = 0;
function addItem(itemName, price) {
itemCounter++;
var container = document.getElementById("cartContainer");
// Create hidden input for item name
var nameInput = document.createElement("input");
nameInput.type = "hidden";
nameInput.id = "item_name_" + itemCounter;
nameInput.name = "item_name_" + itemCounter;
nameInput.value = itemName;
// Create hidden input for item price
var priceInput = document.createElement("input");
priceInput.type = "hidden";
priceInput.id = "item_price_" + itemCounter;
priceInput.name = "item_price_" + itemCounter;
priceInput.value = price;
container.appendChild(nameInput);
container.appendChild(priceInput);
alert(itemName + " added to cart!");
}
function showCart() {
var display = document.getElementById("cartDisplay");
var hiddenInputs = document.querySelectorAll('#cartContainer input[type="hidden"]');
if (hiddenInputs.length === 0) {
display.innerHTML = "<p>Cart is empty</p>";
return;
}
var cartItems = "<h3>Cart Contents:</h3><ul>";
var total = 0;
for (var i = 0; i < hiddenInputs.length; i += 2) {
var itemName = hiddenInputs[i].value;
var itemPrice = parseFloat(hiddenInputs[i + 1].value);
cartItems += "<li>" + itemName + " - $" + itemPrice.toFixed(2) + "</li>";
total += itemPrice;
}
cartItems += "</ul><p><strong>Total: $" + total.toFixed(2) + "</strong></p>";
display.innerHTML = cartItems;
}
function clearCart() {
document.getElementById("cartContainer").innerHTML = "";
document.getElementById("cartDisplay").innerHTML = "<p>Cart cleared!</p>";
itemCounter = 0;
}
</script>
</body>
</html>
This example shows how hidden fields can be dynamically created to store shopping cart data that persists until the user submits the form or clears the cart.
Common Use Cases
Hidden input fields are commonly used for −
Session management − Storing session IDs or tokens for user authentication
Form state tracking − Preserving form data across multiple pages
Security tokens − CSRF protection tokens for form submissions
User preferences − Storing temporary user settings or configurations
Analytics data − Tracking user interactions or page timestamps
Conclusion
The HTML DOM Input Hidden value property provides a simple way to store and manipulate data that needs to be included in form submissions but hidden from users. It accepts any string value and is essential for maintaining application state, security tokens, and tracking information in web forms.
357 Views
