2

<label for="streetname">Street Address</label>
<input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />

function getBooking() {
  if (sessionStorage.fname != undefined) {
    document.getElementById("confirm_fname").textContent = sessionStorage.fname;
    document.getElementById("confirm_lname").textContent = sessionStorage.lname;
    document.getElementById("confirm_email").textContent = sessionStorage.email;
    document.getElementById("confirm_phone").textContent = sessionStorage.phone;
    document.getElementById("confirm_start").textContent = sessionStorage.start;
    document.getElementById("confirm_streetname").textContent = sessionStorage.streetname;
    document.getElementById("confirm_suburb").textContent = sessionStorage.suburb;
    document.getElementById("confirm_state").textContent = sessionStorage.state;
    document.getElementById("confirm_postcode").textContent = sessionStorage.postcode;
    document.getElementById("confirm_skill").textContent = sessionStorage.skill;
    document.getElementById("confirm_other").textContent = sessionStorage.other;
    document.getElementById("confirm_otherbox").textContent = sessionStorage.otherbox;
    
    
    document.getElementById("a_fname").value = sessionStorage.fname;
    document.getElementById("a_lname").value = sessionStorage.lname;
    document.getElementById("a_email").value = sessionStorage.email;
    document.getElementById("a_phone").value = sessionStorage.phone;
    document.getElementById("a_start").value = sessionStorage.start;
    document.getElementById("a_streetname").value = sessionStorage.streetname;
    document.getElementById("a_suburb").value = sessionStorage.suburb;
    document.getElementById("a_state").value = sessionStorage.state;
    document.getElementById("a_postcode").value = sessionStorage.postcode;
    document.getElementById("a_skill").value = sessionStorage.skill;
    document.getElementById("a_other").value = sessionStorage.other;
    document.getElementById("a_otherbox").value = sessionStorage.otherbox;
  }
 }

How can I, using an external JavaScript file, use session storage to auto-fill a form if the user had already filled out the form in the same browser session? I've already got code that stores the values in session storage if the form is validated correctly, so how would I go about doing this?

If more or less information is needed, please let me know.

Note: no jQuery or inline Javascript please.

snailleaker
  • 47
  • 5
  • Can you cut the code down to the smallest reproducible example please? – Ermiya Eskandary Oct 03 '21 at 16:04
  • @ErmiyaEskandary Done. I cannot cut most of the JavaScript code any further though as it won't make sense. – snailleaker Oct 03 '21 at 16:07
  • Thank you - is the question regarding how to get the items from session storage or how to autofill the form? There's more than one aspect here. – Ermiya Eskandary Oct 03 '21 at 16:20
  • @ErmiyaEskandary You're welcome. When you put it that way, I guess it'd have to be both. Because I know how to retrieve items from session storage but not in the context of auto-filling the form. – snailleaker Oct 03 '21 at 16:25
  • Not any different than setting values for any HTML element - you already have a reference to the form `regForm` so try https://stackoverflow.com/a/7609144/4800344 – Ermiya Eskandary Oct 03 '21 at 16:29
  • @ErmiyaEskandary Thank you. I've set up some JavaScript code, which I've edited into my post, to retrieve the session storage but I really don't know how to actually set it as the default value of the form. Is there any way you can show me how to do that? Because I've checked the link you sent and can't find anything specific to my case. – snailleaker Oct 03 '21 at 16:46

2 Answers2

1

Both sessionStorage and localStorage have functions called getItem for retrieving data and setItem for storing data.
Along with some other useful functions.

So, for this case, it seems you need:

document.getElementById("a_fname").value = sessionStorage.getItem("fname");

And same goes for all the rest.

Check this out for more information.

tomleb
  • 2,409
  • 2
  • 9
  • 24
  • Thanks for your help. How would I actually insert this into my form though? I'm rather new to coding so please bare my insistent questions, I just want to learn. I've inserted a piece of HTML code into my post. How would I go about doing this? – snailleaker Oct 03 '21 at 17:12
  • It's ok :) and frankly what you did should work. It's not the most efficiant way, there are better ways of doing this to avoid re-writing the line for every input, but that is a bit more complex. For a start, this should do the trick. – tomleb Oct 03 '21 at 17:17
  • Thank you. Appreciate the help. – snailleaker Oct 03 '21 at 17:20
  • Sure, glad to help. P.S. - if you're curious, an example of a better way is to store all the values into 1 `sessionStorage` key, as an object. Then you can correspond the IDs of the inputs with the object keys, and make a loop that fills all the inputs with about 3 lines of code. – tomleb Oct 03 '21 at 17:23
  • 1
    Interesting. I'm all for efficiency so I'll try that out. – snailleaker Oct 03 '21 at 17:24
0

You looking for localStorage methods: getItem(key), setItem(key, value). A little late but one thing i noticed. Maybe it's still helpful for your example. if there are so many elements i would do it through a loop. like for example:

<div id="confirm_fname">First Name</div>
<div id="confirm_lname">Last Name</div>
<div id="confirm_email">Email</div>
...

<script>
const keyNames = [
  {k1: 'confirm_fname', k2: 'fname'},
  {k1: 'confirm_lname', k2: 'lname'},
  {k1: 'confirm_email', k2: 'email'}
]

keyNames.map(function (key) {
  sessionStorage.setItem(key.k2, Math.random()); // set to localStorage  
  document.getElementById(key.k1).textContent = sessionStorage.getItem(key.k2); // get from localStorage
})
</script>

It's make the code shorter and you can easily handel the elements.

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79