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 Radio value Property
The HTML DOM Input Radio value property is used to set or return the value of the value attribute for a radio button element. This property allows you to access or modify the value that will be sent to the server when the form is submitted.
The value property doesn't affect the visual appearance of the radio button on the webpage. Instead, it serves as an identifier to distinguish between different radio buttons in the same group when form data is processed.
Syntax
Following is the syntax to return the value property −
radioObject.value
Following is the syntax to set the value property −
radioObject.value = text
Parameters
The value property accepts the following parameter −
text − A string that specifies the value for the radio button. This value is sent to the server when the form is submitted.
Return Value
The value property returns a string representing the value of the radio button's value attribute. If no value attribute is specified, it returns an empty string.
Getting Radio Button Value
Following example demonstrates how to get the value of a radio button using the value property −
<!DOCTYPE html>
<html>
<head>
<title>Get Radio Button Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Fruit</h2>
<form>
<input type="radio" name="fruits" id="mango" value="Mango">
<label for="mango">Mango</label><br>
<input type="radio" name="fruits" id="apple" value="Apple">
<label for="apple">Apple</label><br>
<input type="radio" name="fruits" id="orange" value="Orange">
<label for="orange">Orange</label>
</form>
<br>
<button type="button" onclick="getValue()">Get Selected Value</button>
<p id="result"></p>
<script>
function getValue() {
var radios = document.getElementsByName("fruits");
var selectedValue = "";
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
if (selectedValue) {
document.getElementById("result").innerHTML = "Selected fruit: " + selectedValue;
} else {
document.getElementById("result").innerHTML = "No fruit selected.";
}
}
</script>
</body>
</html>
The output shows radio buttons for fruit selection. When a fruit is selected and the button is clicked, the corresponding value is displayed −
Select Your Favorite Fruit ? Mango ? Apple ? Orange [Get Selected Value] Selected fruit: Apple (when Apple is selected)
Setting Radio Button Value
Following example demonstrates how to set the value of a radio button dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Set Radio Button Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Radio Button Values</h2>
<form>
<input type="radio" name="colors" id="color1" value="red">
<label for="color1">Red</label><br>
<input type="radio" name="colors" id="color2" value="green">
<label for="color2">Green</label><br>
</form>
<br>
<button type="button" onclick="changeValues()">Change Values to Uppercase</button>
<button type="button" onclick="showValues()">Show Current Values</button>
<p id="display"></p>
<script>
function changeValues() {
document.getElementById("color1").value = "RED";
document.getElementById("color2").value = "GREEN";
document.getElementById("display").innerHTML = "Values changed to uppercase!";
}
function showValues() {
var val1 = document.getElementById("color1").value;
var val2 = document.getElementById("color2").value;
document.getElementById("display").innerHTML =
"Color1 value: " + val1 + "<br>Color2 value: " + val2;
}
</script>
</body>
</html>
Initially, the radio buttons have lowercase values. Clicking "Change Values to Uppercase" modifies the values dynamically −
Dynamic Radio Button Values ? Red ? Green [Change Values to Uppercase] [Show Current Values] Before change: Color1 value: red, Color2 value: green After change: Color1 value: RED, Color2 value: GREEN
Practical Form Submission Example
Following example shows how radio button values are used in form submission −
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Subscription Plan</h2>
<form id="subscriptionForm">
<p>Choose your plan:</p>
<input type="radio" name="plan" id="basic" value="basic-monthly-19.99">
<label for="basic">Basic Plan - $19.99/month</label><br>
<input type="radio" name="plan" id="premium" value="premium-monthly-39.99">
<label for="premium">Premium Plan - $39.99/month</label><br>
<input type="radio" name="plan" id="enterprise" value="enterprise-monthly-79.99">
<label for="enterprise">Enterprise Plan - $79.99/month</label>
</form>
<br>
<button type="button" onclick="simulateSubmission()">Submit Form</button>
<p id="formData"></p>
<script>
function simulateSubmission() {
var selectedPlan = document.querySelector('input[name="plan"]:checked');
if (selectedPlan) {
var planValue = selectedPlan.value;
document.getElementById("formData").innerHTML =
"Form would submit: plan=" + planValue;
} else {
document.getElementById("formData").innerHTML =
"Please select a subscription plan.";
}
}
</script>
</body>
</html>
When a plan is selected and submitted, the form data shows the corresponding value −
Subscription Plan Choose your plan: ? Basic Plan - $19.99/month ? Premium Plan - $39.99/month ? Enterprise Plan - $79.99/month [Submit Form] Form would submit: plan=premium-monthly-39.99
Key Points
The value property is essential for form processing as it determines what data is sent to the server.
Multiple radio buttons with the same
nameattribute form a group, but each should have a uniquevalue.If no value attribute is specified, the radio button returns an empty string when accessed via JavaScript.
The value property can be dynamically changed using JavaScript after the page loads.
Use
document.querySelector('input[name="groupName"]:checked')to find the selected radio button in a group.
Conclusion
The HTML DOM Input Radio value property is crucial for handling form data in web applications. It allows you to set meaningful values for radio buttons that are sent to the server during form submission, while also providing JavaScript access to read and modify these values dynamically. Understanding this property is essential for creating interactive forms and processing user selections effectively.
260 Views
