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 name Property
The HTML DOM Input Radio name property is used for setting or returning the name attribute of a radio button input field. The name attribute is crucial for identifying form data after submission to the server and for grouping radio buttons together so only one can be selected at a time.
Syntax
Following is the syntax for setting the name property −
radioObject.name = "name"
Following is the syntax for getting the name property −
var name = radioObject.name
Parameters
The name parameter is a string that specifies the name of the radio button. Radio buttons with the same name form a group where only one button can be selected at a time.
Return Value
The property returns a string representing the value of the name attribute of the radio button.
Example − Setting Radio Button Name
Following example demonstrates how to change the name property of a radio button using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Radio Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Radio Button Name Property</h2>
<form id="myForm">
<label>Select Fruit:</label><br>
<input type="radio" name="fruits" id="orange" value="orange">
<label for="orange">Orange</label><br>
<input type="radio" name="fruits" id="apple" value="apple">
<label for="apple">Apple</label>
</form>
<br>
<button type="button" onclick="changeName()">Change Name to Colors</button>
<button type="button" onclick="showName()">Show Current Name</button>
<p id="result"></p>
<script>
function changeName() {
document.getElementById("orange").name = "colors";
document.getElementById("apple").name = "colors";
document.getElementById("result").innerHTML = "Radio button names changed to 'colors'";
}
function showName() {
var currentName = document.getElementById("orange").name;
document.getElementById("result").innerHTML = "Current name: " + currentName;
}
</script>
</body>
</html>
Initially, both radio buttons have the name "fruits". Clicking "Change Name to Colors" changes both to "colors", and "Show Current Name" displays the current name value.
Example − Getting Radio Button Name
Following example shows how to retrieve the name property of selected radio buttons −
<!DOCTYPE html>
<html>
<head>
<title>Get Radio Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Radio Button Name</h2>
<form>
<fieldset>
<legend>Choose Size:</legend>
<input type="radio" name="size" id="small" value="small">
<label for="small">Small</label><br>
<input type="radio" name="size" id="medium" value="medium">
<label for="medium">Medium</label><br>
<input type="radio" name="size" id="large" value="large">
<label for="large">Large</label>
</fieldset>
</form>
<br>
<button onclick="getSelectedName()">Get Selected Radio Name</button>
<p id="output"></p>
<script>
function getSelectedName() {
var radios = document.getElementsByName('size');
var selectedName = '';
var selectedValue = '';
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedName = radios[i].name;
selectedValue = radios[i].value;
break;
}
}
if (selectedName) {
document.getElementById("output").innerHTML =
"Selected radio name: " + selectedName + "<br>Selected value: " + selectedValue;
} else {
document.getElementById("output").innerHTML = "No radio button selected";
}
}
</script>
</body>
</html>
This example demonstrates how to find which radio button is selected and retrieve its name property. Select a size option and click the button to see the name and value.
Example − Dynamic Radio Button Groups
Following example shows how the name property can be used to create dynamic radio button groups −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Radio Groups</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Radio Button Groups</h2>
<div>
<input type="radio" id="radio1" name="group1" value="option1">
<label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="group1" value="option2">
<label for="radio2">Option 2</label>
</div>
<br>
<button onclick="separateGroups()">Separate into Different Groups</button>
<button onclick="combineGroups()">Combine into Same Group</button>
<p id="status">Both radios are in group1</p>
<script>
function separateGroups() {
document.getElementById("radio1").name = "groupA";
document.getElementById("radio2").name = "groupB";
document.getElementById("status").innerHTML =
"Radio 1 is in groupA, Radio 2 is in groupB (both can be selected)";
}
function combineGroups() {
document.getElementById("radio1").name = "group1";
document.getElementById("radio2").name = "group1";
document.getElementById("status").innerHTML =
"Both radios are in group1 (only one can be selected)";
}
</script>
</body>
</html>
This example demonstrates how changing the name property affects radio button grouping behavior. When they have the same name, only one can be selected. When they have different names, both can be selected simultaneously.
Key Points
-
The
nameproperty groups radio buttons together. Only one radio button in a group can be selected at a time. -
Radio buttons with different names behave as independent controls and can be selected simultaneously.
-
The
nameattribute is essential for form submission as it identifies the form data sent to the server. -
You can dynamically change the
nameproperty to restructure radio button groups using JavaScript. -
Use
getElementsByName()to access all radio buttons with the same name attribute.
Conclusion
The HTML DOM Input Radio name property is essential for controlling radio button grouping behavior and form data submission. By setting the same name for multiple radio buttons, you create mutually exclusive groups, while different names allow independent selections. This property can be dynamically modified using JavaScript to restructure radio button groups as needed.
217 Views
