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 value Property
The HTML DOM Button value property is associated with the value attribute of the <button> element. It specifies the hidden value of the button that is sent to the server when the button is clicked in a form submission. The value property allows you to set or retrieve the value attribute of a button element programmatically using JavaScript.
The button's value is different from its display text. The display text is what appears between the opening and closing <button> tags, while the value is the data sent to the server during form submission.
Syntax
Following is the syntax for setting the value property −
buttonObject.value = text
Following is the syntax for getting the value property −
var value = buttonObject.value
Parameters
text − A string that specifies the value attribute of the button element.
Return Value
The value property returns a string representing the value attribute of the button element. If no value is set, it returns an empty string.
Example − Setting and Getting Button Value
Following example demonstrates how to set and get the button value property −
<!DOCTYPE html>
<html>
<head>
<title>Button Value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<button id="myButton" name="action" value="FirstButton">My Button</button>
<p>Click on the below button to change the above button value</p>
<button onclick="changeValue()">CHANGE VALUE</button>
<button onclick="showValue()">SHOW VALUE</button>
<p id="result"></p>
<script>
function changeValue() {
document.getElementById("myButton").value = "SecondButton";
document.getElementById("result").innerHTML = "Value changed to: SecondButton";
}
function showValue() {
var currentValue = document.getElementById("myButton").value;
document.getElementById("result").innerHTML = "Current button value: " + currentValue;
}
</script>
</body>
</html>
The output shows the button with its display text "My Button" and demonstrates how the hidden value can be changed and retrieved −
My Button Click on the below button to change the above button value [CHANGE VALUE] [SHOW VALUE] (Initially shows: Current button value: FirstButton) (After clicking CHANGE VALUE: Value changed to: SecondButton)
Example − Form Submission with Button Values
Following example shows how button values are used in form submissions −
<!DOCTYPE html>
<html>
<head>
<title>Button Value in Forms</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<form id="myForm">
<p>Choose an action:</p>
<button type="button" name="action" value="save" onclick="handleClick(this)">Save Document</button>
<button type="button" name="action" value="delete" onclick="handleClick(this)">Delete Document</button>
<button type="button" name="action" value="print" onclick="handleClick(this)">Print Document</button>
</form>
<p id="output"></p>
<script>
function handleClick(button) {
var actionValue = button.value;
var displayText = button.textContent;
document.getElementById("output").innerHTML =
"Button clicked: '" + displayText + "' with value: '" + actionValue + "'";
}
</script>
</body>
</html>
Each button has the same name attribute but different value attributes, allowing the server to distinguish which action was requested −
Choose an action: [Save Document] [Delete Document] [Print Document] (Clicking any button shows the display text and its corresponding value)
Example − Dynamic Button Value Updates
Following example demonstrates dynamically updating button values based on user interaction −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Button Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<button id="toggleButton" value="off" onclick="toggleState()">Turn ON</button>
<p>Current state: <span id="status">OFF</span></p>
<script>
function toggleState() {
var button = document.getElementById("toggleButton");
var status = document.getElementById("status");
if (button.value === "off") {
button.value = "on";
button.textContent = "Turn OFF";
status.textContent = "ON";
} else {
button.value = "off";
button.textContent = "Turn ON";
status.textContent = "OFF";
}
}
</script>
</body>
</html>
This creates a toggle button where both the display text and the value attribute change with each click −
[Turn ON] Current state: OFF (After clicking: [Turn OFF] and Current state: ON)
Key Points
The
valueproperty represents the hidden data sent to the server, not the visible text on the button.Button display text is set between the
<button>tags, while the value is set using thevalueattribute.Multiple buttons can have the same
namebut differentvalueattributes to represent different actions.The
valueproperty can be changed dynamically using JavaScript after the page loads.If no value is explicitly set, the property returns an empty string.
Conclusion
The HTML DOM Button value property provides access to the hidden value attribute of button elements. It is essential for form processing where different buttons need to send different values to the server while displaying user-friendly text. The property can be both read and modified dynamically using JavaScript.
307 Views
