26

Is it possible to store a FormData object of a form and then use that FormData object later to repopulate the stored FormData values back into the form?

For example: HTML

<form id="test_form">
  <input type="text" name="last_name" placeholder="Last Name"/><br/>
  <input type="text" name="first_name" placeholder="First Name"/><br/>
  <input type="date" name="date_of_birth" placeholder="Date of Birth"/><br/>
</form>

Javascript

var f = document.getElementById('test_form');
var data = FormData(f);
...
// mythical function to translate FormData back into form values
f.values(data);
2
  • What do you want to do with data? Feb 23, 2017 at 6:28
  • 3
    I want to use it to populate an HTML form's field values. Feb 23, 2017 at 15:24

5 Answers 5

21

Using this and this, here is how I serialize and deserialize form data:

function formSerialize(form) {
    const data = new FormData(form);
    //https://stackoverflow.com/a/44033425/1869660
    return new URLSearchParams(data).toString();
}

function formDeserialize(form, data) {
    const entries = (new URLSearchParams(data)).entries();
    for(const [key, val] of entries) {
        //http://javascript-coder.com/javascript-form/javascript-form-value.phtml
        const input = form.elements[key];
        switch(input.type) {
            case 'checkbox': input.checked = !!val; break;
            default:         input.value = val;     break;
        }
    }
}

Warning: formDeserialize() won't clear fields that are not included in the stored data, e.g. empty radio groups or checkboxes. Also, not tested with all <input> types.

3
  • Thank you, this is the best and closest thing I have seen to a solution. Would prefer a native function, but I will test this. Thanks! Aug 27, 2018 at 17:29
  • 1
    Thanks a lot, very helpful 🙏 I've stumbled upon a problem with file fields which you can't populate so I'm skipping them like this if (!input || input.type === "file") continue; right after const input = .. before the switch, could also be done as part of the switch of course.
    – Can Rau
    Aug 9, 2022 at 14:49
  • Also I switched the part getting the input to form.elements.namedItem(key)
    – Can Rau
    Aug 9, 2022 at 14:51
3

Not sure if this is the answer to your question, but if you have JQuery and JQuery View engine, you can use this:

var f = document.getElementById('test_form');
var data = FormData(f);

// Fill the form using JQuery view Engine:
$("#test_form").view(f);

See example on: https://jocapc.github.io/jquery-view-engine/docs/form

1
  • This isn't the exact answer, but incredibly informative and useful idea! I will definitely be looking at this project for other applications. It's basically a super lightweight front-end framework. Jun 19, 2018 at 14:19
1

You are on the right track with creating the FormData object from the test_form ID.

You can access all the values from the FormData object as so:

var f = document.getElementById('test_form');
var data = new FormData(f);

var lastName = data.get('last_name');
var firstName = data.get('first_name');
var dob = data.get('date_of_birth');

You can also use FormData.getAll to pull all of the data from the object.

var allData = data.getAll;

Hopefully this is what you were asking, if not please let me know and we can get it figured out.

1
  • 4
    I know I can access the properties individually with .get, but, on a form with dozens of fields, it would be helpful to be able to populate those form fields from a form data object without needing to do it one field at a time or knowing the names of the fields in advance. The .getAll function is in the right direction, but looking for a way to put those values back into the correct form fields. Feb 23, 2017 at 4:02
0

You can store value to variables using FormData but cannot populate back using values. You need to populate for every field individually using script.

-4

You can use localStorage or sessionStorage objects.

Like

localStorage.data = data; //untill clear the browsing history

or

sessionStorage.data = data; //untill session complete

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.