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 Submit value Property
The HTML DOM Input Submit value property is associated with the input element having type="submit" and the value attribute. It is used to return the value of the submit button's value attribute or to set it. The value property for submit button changes the text displayed on the button, as by default the text is "Submit".
Syntax
Following is the syntax for getting the value property −
var buttonText = submitObject.value;
Following is the syntax for setting the value property −
submitObject.value = text;
Here, text is a string specifying the text to be displayed on the submit button.
Parameters
The value property accepts the following parameter −
text − A string that represents the text to display on the submit button. If no value is set, the browser displays the default text "Submit".
Return Value
The value property returns a string representing the current text displayed on the submit button.
Example − Changing Submit Button Text
Following example demonstrates how to change the submit button text using the value property −
<!DOCTYPE html>
<html>
<head>
<title>Submit Value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Submit Value Property</h2>
<form style="border: 2px solid green; padding: 15px; border-radius: 5px;">
<label>Username: <input type="text" id="USR" style="margin: 5px;"></label><br><br>
<label>Location: <input type="text" id="Loc" style="margin: 5px;"></label><br><br>
<input type="submit" id="SUBMIT1" style="padding: 8px 16px;">
</form>
<br>
<p>Change the submit button text by clicking the button below:</p>
<button onclick="changeValue()" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px;">CHANGE TEXT</button>
<p id="result"></p>
<script>
function changeValue() {
document.getElementById("SUBMIT1").value = "Submit Form";
document.getElementById("result").innerHTML = "The submit button text has been changed to 'Submit Form'";
}
</script>
</body>
</html>
The output shows a form with a submit button. Initially, the button displays "Submit". After clicking the "CHANGE TEXT" button, the submit button text changes to "Submit Form" −
Before: [Submit] button After: [Submit Form] button Text: "The submit button text has been changed to 'Submit Form'"
Example − Getting Submit Button Value
Following example shows how to retrieve the current value of a submit button −
<!DOCTYPE html>
<html>
<head>
<title>Get Submit Button Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Getting Submit Button Value</h2>
<form style="border: 2px solid blue; padding: 15px; border-radius: 5px;">
<input type="text" placeholder="Enter your name" style="padding: 5px; margin: 5px;"><br><br>
<input type="submit" id="mySubmit" value="Send Data" style="padding: 8px 16px;">
</form>
<br>
<button onclick="getValue()" style="padding: 8px 16px; background-color: #008CBA; color: white; border: none; border-radius: 4px;">GET VALUE</button>
<p id="display"></p>
<script>
function getValue() {
var buttonValue = document.getElementById("mySubmit").value;
document.getElementById("display").innerHTML = "Current submit button value: '" + buttonValue + "'";
}
</script>
</body>
</html>
The output displays the current value of the submit button when the "GET VALUE" button is clicked −
Current submit button value: 'Send Data'
Example − Multiple Submit Buttons
Following example demonstrates working with multiple submit buttons, each having different values −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Submit Buttons</h2>
<form style="border: 2px solid purple; padding: 15px; border-radius: 5px;">
<p>Choose an action:</p>
<input type="submit" id="save" value="Save Draft" style="padding: 8px 16px; margin: 5px;">
<input type="submit" id="publish" value="Publish Now" style="padding: 8px 16px; margin: 5px;">
<input type="submit" id="preview" value="Preview" style="padding: 8px 16px; margin: 5px;">
</form>
<br>
<button onclick="modifyButtons()" style="padding: 8px 16px; background-color: #f44336; color: white; border: none; border-radius: 4px;">MODIFY BUTTONS</button>
<p id="status"></p>
<script>
function modifyButtons() {
document.getElementById("save").value = "Quick Save";
document.getElementById("publish").value = "Go Live";
document.getElementById("preview").value = "View Draft";
document.getElementById("status").innerHTML = "All button texts have been updated!";
}
</script>
</body>
</html>
The output shows three submit buttons with initial values. After clicking "MODIFY BUTTONS", all button texts are updated −
Before: [Save Draft] [Publish Now] [Preview] After: [Quick Save] [Go Live] [View Draft] Status: "All button texts have been updated!"
Key Points
The
valueproperty controls the text displayed on submit buttons.The default value for submit buttons is "Submit" if no value attribute is specified.
You can both get and set the value property using JavaScript.
Changing the value property immediately updates the button's displayed text.
Multiple submit buttons in the same form can have different values to indicate different actions.
The value is also sent to the server when the form is submitted, making it useful for identifying which button was clicked.
Browser Compatibility
The Input Submit value property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the HTML DOM specification and works consistently across different platforms.
Conclusion
The HTML DOM Input Submit value property provides a simple way to get or set the text displayed on submit buttons. It allows dynamic modification of button labels and helps create more interactive forms. This property is essential for customizing submit button text based on user interactions or application state.
242 Views
