0
195
ViewsHow do I store and retrieve an inputted date using session storage?
function storeBooking(
start
) {
sessionStorage.start = start;
}
function getBooking() {
document.getElementById("confirm_start").textContent = sessionStorage.start;
}
function prefillcard()
{
document.getElementById("start").value = sessionStorage.start;
}
window.addEventListener("DOMContentLoaded", prefillcard);<form>
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="date of birth" value="2021-10-04" />
<input type="submit" value="Apply">
</form>So what I've basically set up here is for the date of birth to be stored in session storage and then, if the user decides to fill out the form again in the same browser session, it will auto-fill the date of birth in the form.
The only problem is that when I try it, it comes up as dd/mm/yyyy, despite it working for other inputted values. The only difference between those and the date of birth is that those were text inputs and this is a date input. How would I go about storing, retrieving, and then auto-filling a form with a date input?
2 answers
Answer question0
Use window.sessionStorage.setItem("Name", Value)); and window.sessionStorage.getItem("Name");
In your case using JQuery, you can use your own vanilla js if you are not using JQuery
$( "#start" ).on( "change", function() {
var sdt = $("#start").val();
window.sessionStorage.setItem("startDT", sdt));
});
function prefillcard() {
if (window.sessionStorage.getItem("startDT")) {
var sdt = window.sessionStorage.getItem("startDT");
$("#start").val(sdt);
}
}
Non JQuery version
document.getElementById("start").addEventListener("change", function() {
var sdt = document.getElementById("start").value;
window.sessionStorage.setItem("startDT", sdt));
});
function prefillcard() {
if (window.sessionStorage.getItem("startDT")) {
var sdt = window.sessionStorage.getItem("startDT");
document.getElementById("start").value = sdt;
}
}
0
Using setAttribute should work, so something like:
document.getElementById("dateElementID").setAttribute('value', '2021-04-30')