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 Week name Property
The HTML DOM Input Week name property allows you to retrieve or modify the name attribute of an HTML input element with type="week". The name attribute identifies the form field when data is submitted to the server.
Syntax
Following is the syntax for getting the name attribute −
inputWeekObject.name
Following is the syntax for setting the name attribute −
inputWeekObject.name = "string"
Parameters
- string − A string value representing the name of the week input field. This name is used when the form is submitted.
Return Value
The property returns a string representing the value of the name attribute. If no name attribute is set, it returns an empty string.
Example − Getting the Name Property
Following example demonstrates how to retrieve the name property of a week input −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input Name Property</h2>
<form>
<label for="weekInput">Select Week: </label>
<input type="week" id="weekInput" name="event_week" value="2024-W01">
<br><br>
<button type="button" onclick="getName()">Get Name</button>
<button type="button" onclick="setName()">Set New Name</button>
</form>
<p id="result"></p>
<script>
function getName() {
var weekInput = document.getElementById("weekInput");
var nameValue = weekInput.name;
document.getElementById("result").textContent = "Name attribute: " + nameValue;
}
function setName() {
var weekInput = document.getElementById("weekInput");
weekInput.name = "updated_week";
document.getElementById("result").textContent = "Name changed to: updated_week";
}
</script>
</body>
</html>
The output shows how the name property can be retrieved and modified −
Week Input Name Property Select Week: [2024-W01] [Get Name] [Set New Name] (Clicking "Get Name" displays: Name attribute: event_week) (Clicking "Set New Name" displays: Name changed to: updated_week)
Example − Music Event Application
Following example shows a practical application where the name property identifies different event types −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Name - Music Events</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
fieldset {
border: 2px solid #4CAF50;
border-radius: 10px;
padding: 15px;
}
legend {
font-weight: bold;
color: #4CAF50;
}
input[type="button"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Music Event Week</legend>
<label for="WeekSelect">Select Week: </label>
<input type="week" id="WeekSelect" value="2019-W52" name="Sunburn Goa">
<br><br>
<input type="button" onclick="getEventName()" value="Which music event falls in this week?">
<input type="button" onclick="changeEventName()" value="Change Event Name">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
function getEventName() {
if(inputWeek.value === '2019-W52') {
divDisplay.textContent = 'Music Event: ' + inputWeek.name;
} else {
divDisplay.textContent = 'No Music Event scheduled for ' + inputWeek.value;
}
}
function changeEventName() {
inputWeek.name = "Tomorrowland Belgium";
divDisplay.textContent = 'Event name changed to: ' + inputWeek.name;
}
</script>
</body>
</html>
This example demonstrates both getting and setting the name property dynamically. The name serves as an identifier for the type of music event associated with the selected week.
Music Event Week Select Week: [2019-W52] [Which music event falls in this week?] [Change Event Name] (Clicking first button displays: Music Event: Sunburn Goa) (Clicking second button displays: Event name changed to: Tomorrowland Belgium)
Form Submission Usage
The name property is essential for form submissions. When a form containing a week input is submitted, the server receives the data as name=value pairs.
Example
<!DOCTYPE html>
<html>
<head>
<title>Week Input Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration Form</h2>
<form action="/submit-event" method="post">
<label for="festivalWeek">Festival Week: </label>
<input type="week" id="festivalWeek" name="festival_week" value="2024-W25">
<br><br>
<label for="concertWeek">Concert Week: </label>
<input type="week" id="concertWeek" name="concert_week" value="2024-W30">
<br><br>
<input type="submit" value="Register Events">
</form>
<p><i>On submission, server receives: festival_week=2024-W25 and concert_week=2024-W30</i></p>
</body>
</html>
When this form is submitted, the server receives the week values identified by their respective name attributes.
Conclusion
The HTML DOM Input Week name property provides a way to access and modify the name attribute of week input elements. This property is crucial for form submissions where the name identifies the field data sent to the server, and it can be dynamically changed using JavaScript for flexible form handling.
149 Views
