0

I have a <form> with a few radio buttons groups:

<form>
Group 1: 
<input type='radio' name='a' value='1'>
<input type='radio' name='a' value='2'>
<input type='radio' name='a' value='3'><br>
Group 2: 
<input type='radio' name='b' value='1'>
<input type='radio' name='b' value='2'>
<input type='radio' name='b' value='3'>
</form>

How to save, on each selection change event, everything to localStorage, and then on page reload (e.g. after we close and reopen the browser) reload the previously selected items?

All what I think of for this seems unnecessarily complex.

We probably have to assign a listener to event "radio button is selected" or should we detect this simply with "change" event?

NB: This solves the similar problem for <input type="text">: Auto-save all inputs value to localStorage and restore them on page reload

Maybe is there an easier way:

Can we serialize a whole <form> state (input values, selected radio buttons, etc.) into localStorage, and easily restore it, without jQuery? (without having to write specific code for text inputs, other code for radio buttons, other code for checkboxes, etc.)

Basj
  • 41,386
  • 99
  • 383
  • 673
  • To the downvoter: can you maybe add a comment to explain how to improve this question? – Basj Apr 14 '20 at 08:21
  • You use localStorage.setItem('key', value) and.getItem('key'). https://stackoverflow.com/questions/17087636/how-to-save-data-from-a-form-with-html5-local-storage – Joel Hager Apr 14 '20 at 08:30
  • @JoelHager this doesn't work so simply for `` radio buttons group. Is there maybe a generic solution to serialize a whole `
    `, no matter the content (radio, checkbox, text, etc.) ?
     – Basj Apr 14 '20 at 08:36
  • 1
    Maybe something like this? https://www.telerik.com/blogs/save-for-later-feature-in-forms-using-localstorage – Joel Hager Apr 14 '20 at 08:42

2 Answers2

1

  1. Create a helper function to retrieve form values: https://stackoverflow.com/a/41262933/4988674

  2. Add event listener to form changes: https://stackoverflow.com/a/10760931/4988674

  3. Inside event listener save form data into localStorage: https://stackoverflow.com/a/2010948/4988674

  4. Create "onload" event and populate form values from localStorage: https://stackoverflow.com/a/7327185/4988674 and https://benalexkeen.com/autofilling-forms-with-javascript/

Max Donchenko
  • 160
  • 1
  • 2
  • 13
  • This works for ``, it's already done here: https://stackoverflow.com/questions/61085148/auto-save-all-inputs-value-to-localstorage-and-restore-them-on-page-reload/61085307#61085307. But here I'm looking for a generic way working for **all kind of inputs in a form (checkboxes, radio buttons, etc.)**. – Basj Apr 14 '20 at 08:37
  • Using plain Javascript you can't do it out-of-the-box in one line. – Max Donchenko Apr 14 '20 at 09:10
  • You can create this kind of generic "form filler" based on approach from the article from the last link (https://benalexkeen.com/autofilling-forms-with-javascript/). – Max Donchenko Apr 14 '20 at 09:11
  • Isn't there an automatic way with JSON.serialize a whole form @Max? – Basj Apr 14 '20 at 09:14
  • Looks like either this function may help: https://stackoverflow.com/a/257401/4988674 or this one https://stackoverflow.com/a/6937576/4988674, but yeah, there is no commonly used utility for form population. Agree, it's pity. – Max Donchenko Apr 14 '20 at 09:28
  • I doubt this will work with radio buttons/checkboxes @Max: these codes don't use "checked" attribute which seems mandatory to persist the state of selected items. – Basj Apr 14 '20 at 09:31
1

This is a solution for radio buttons:

document.querySelectorAll('input[type="radio"]').forEach(elt => { 
    if (localStorage.getItem(elt.name) == elt.value) 
        elt.checked = true; 
    elt.addEventListener("change", e => { 
        localStorage.setItem(e.target.name, e.target.value); 
    }); 
});

This works for text <input>: Auto-save all inputs value to localStorage and restore them on page reload.

Basj
  • 41,386
  • 99
  • 383
  • 673
  • 1
    I would suggest running "formElement.querySelectorAll" instead of "document.querySelectorAll" because it will affect only inputs scoped within the form, not all inputs on the page. – Max Donchenko Apr 14 '20 at 13:18