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 Select name Property
The HTML DOM Select name property returns and modifies the value of the name attribute of a dropdown list (select element) in an HTML document. This property is essential for form data processing and server-side identification of form elements.
Syntax
Following is the syntax for returning the name property −
object.name
Following is the syntax for modifying the name property −
object.name = "text"
Parameters
text − A string value that specifies the new name for the select element.
Return Value
The property returns a string representing the value of the name attribute of the select element. If no name attribute is specified, it returns an empty string.
Example − Getting Select Name
Following example demonstrates how to retrieve the name property of a select element −
<!DOCTYPE html>
<html>
<head>
<title>DOM Select name Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.select-box {
padding: 8px;
margin: 10px;
font-size: 16px;
border: 2px solid #333;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin: 10px;
}
.output {
margin: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>Select Name Property Example</h1>
<p>Choose your favorite subject:</p>
<select class="select-box" name="favoriteSubject">
<option>Physics</option>
<option>Mathematics</option>
<option>Chemistry</option>
<option>English</option>
</select>
<br>
<button onclick="showName()" class="btn">Show Name</button>
<div class="output" id="result"></div>
<script>
function showName() {
var selectElement = document.querySelector(".select-box");
var output = document.getElementById("result");
output.innerHTML = "Select element name: " + selectElement.name;
}
</script>
</body>
</html>
The output displays the name attribute value when the button is clicked −
Select element name: favoriteSubject
Example − Modifying Select Name
Following example shows how to change the name property of a select element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Modify Select Name Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.select-box {
padding: 8px;
margin: 10px;
font-size: 16px;
border: 2px solid #333;
}
.btn {
background: #28a745;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
margin: 5px;
}
.output {
margin: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>Change Select Name Property</h1>
<select class="select-box" name="originalName" id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<br>
<button onclick="getCurrentName()" class="btn">Get Current Name</button>
<button onclick="changeName()" class="btn">Change Name</button>
<div class="output" id="display"></div>
<script>
function getCurrentName() {
var select = document.getElementById("mySelect");
var display = document.getElementById("display");
display.innerHTML = "Current name: " + select.name;
}
function changeName() {
var select = document.getElementById("mySelect");
var display = document.getElementById("display");
select.name = "modifiedName";
display.innerHTML = "Name changed to: " + select.name;
}
</script>
</body>
</html>
Initially shows "originalName", then changes to "modifiedName" when the Change Name button is clicked −
Current name: originalName Name changed to: modifiedName
Example − Form Submission with Select Name
Following example demonstrates how the name property is used in form submissions −
<!DOCTYPE html>
<html>
<head>
<title>Select Name in Form</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 500px;
margin: 0 auto;
}
.form-group {
margin: 15px 0;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
select {
width: 100%;
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.form-data {
background: #f8f9fa;
padding: 10px;
margin-top: 10px;
border: 1px solid #dee2e6;
}
</style>
</head>
<body>
<h1>Form with Named Select Elements</h1>
<form id="myForm">
<div class="form-group">
<label for="country">Country:</label>
<select name="user_country" id="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
</div>
<div class="form-group">
<label for="skill">Skill Level:</label>
<select name="user_skill" id="skill">
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
<button type="button" onclick="showFormData()" class="btn">Show Form Data</button>
</form>
<div id="formOutput" class="form-data" style="display: none;"></div>
<script>
function showFormData() {
var form = document.getElementById("myForm");
var output = document.getElementById("formOutput");
var formData = "";
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
if (element.type === "select-one" && element.name) {
formData += "Name: " + element.name + " | Value: " + element.value + "<br>";
}
}
output.innerHTML = formData;
output.style.display = "block";
}
</script>
</body>
</html>
When submitted, the form sends data using the name attributes as keys −
Name: user_country | Value: us Name: user_skill | Value: beginner
Key Points
The name property is essential for form data processing and server-side handling.
Unlike the
idattribute, multiple elements can share the same name (useful for radio buttons and checkboxes).The name property can be dynamically changed using JavaScript without affecting the element's functionality.
When a form is submitted, the select element's name becomes the key in the name-value pair sent to the server.
Conclusion
The HTML DOM Select name property provides a way to access and modify the name attribute of dropdown lists. This property is crucial for form handling, allowing developers to identify form elements on both client and server sides. It can be used to retrieve the current name or dynamically change it as needed.
239 Views
