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 DatetimeLocal name Property
The HTML DOM Input DatetimeLocal name property gets or sets the value of the name attribute of an <input type="datetime-local"> element. This property is essential for form submissions, as it determines the field name sent to the server when the form data is submitted.
Syntax
Following is the syntax to get the name property −
inputDatetimeLocalObject.name
Following is the syntax to set the name property −
inputDatetimeLocalObject.name = "string"
Return Value
The name 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 get the name property of a datetime-local input field −
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get DatetimeLocal Name Property</h2>
<label for="birthDateTime">Birth Date and Time:</label>
<input type="datetime-local" id="birthDateTime" name="userBirthDate" value="2019-05-23T12:45">
<br><br>
<button onclick="getName()">Get Name Property</button>
<p id="result"></p>
<script>
function getName() {
var inputField = document.getElementById("birthDateTime");
var nameValue = inputField.name;
document.getElementById("result").textContent = "Name property value: " + nameValue;
}
</script>
</body>
</html>
The output displays the name property value when the button is clicked −
Name property value: userBirthDate
Example − Setting the Name Property
Following example shows how to dynamically change the name property of a datetime-local input −
<!DOCTYPE html>
<html>
<head>
<title>Set DatetimeLocal Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set DatetimeLocal Name Property</h2>
<label for="eventDateTime">Event Date and Time:</label>
<input type="datetime-local" id="eventDateTime" name="oldEventName" value="2024-01-15T09:30">
<br><br>
<button onclick="changeName()">Change Name to "newEventName"</button>
<button onclick="showCurrentName()">Show Current Name</button>
<p id="display"></p>
<script>
var inputField = document.getElementById("eventDateTime");
function changeName() {
inputField.name = "newEventName";
document.getElementById("display").textContent = "Name changed to: " + inputField.name;
}
function showCurrentName() {
document.getElementById("display").textContent = "Current name: " + inputField.name;
}
</script>
</body>
</html>
Initially clicking "Show Current Name" displays "oldEventName". After clicking "Change Name", the name property is updated to "newEventName".
Example − Practical Form Submission
Following example demonstrates how the name property affects form data submission −
<!DOCTYPE html>
<html>
<head>
<title>DatetimeLocal Name in Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Booking Form</h2>
<form onsubmit="handleSubmit(event)">
<label for="appointmentTime">Preferred Appointment:</label>
<input type="datetime-local" id="appointmentTime" name="appointment_datetime" value="2024-03-15T14:30">
<br><br>
<button type="submit">Book Appointment</button>
</form>
<div id="formData"></div>
<script>
function handleSubmit(event) {
event.preventDefault();
var form = event.target;
var formData = new FormData(form);
var result = "Form data would be sent as:<br>";
for (let [key, value] of formData.entries()) {
result += key + " = " + value + "<br>";
}
document.getElementById("formData").innerHTML = "<pre>" + result + "</pre>";
}
</script>
</body>
</html>
When the form is submitted, the server receives the data with the field name defined by the name property −
Form data would be sent as: appointment_datetime = 2024-03-15T14:30
Key Points
The name property is crucial for form submissions as it defines the field name in the submitted data.
If no name attribute is set, the property returns an empty string.
The name property can be dynamically changed using JavaScript.
Multiple elements can share the same name (useful for radio buttons or checkboxes), but datetime-local inputs typically have unique names.
The name property is different from the
idattribute, which is used for JavaScript and CSS targeting.
Conclusion
The HTML DOM Input DatetimeLocal name property provides access to the name attribute of datetime-local input fields. This property is essential for form processing, allowing you to get or set the field name that will be used when submitting form data to the server.
129 Views
