Populate an HTML Form from a FormData object

Question

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);

What do you want to do with `data`? – Leonid Vasilev Feb 23 '17 at 06:28 — Leonid Vasilev, Feb 23 '17 at 06:28
I want to use it to populate an HTML form's field values. – tufelkinder Feb 23 '17 at 15:24 — tufelkinder, Feb 23 '17 at 15:24

Sphinxxx · Accepted Answer · 2020-03-09T19:40:32.463

19

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.

edited Mar 09 '20 at 19:40

answered Aug 24 '18 at 22:02

Sphinxxx

12,484
4
54
84

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! – tufelkinder Aug 27 '18 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 09 '22 at 14:49
Also I switched the part getting the input to `form.elements.namedItem(key)` – Can Rau Aug 09 '22 at 14:51

score 3 · Answer 2 · answered Dec 03 '17 at 12:00

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

answered Dec 03 '17 at 12:00

Jovan MSFT

13,232
4
40
55

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. – tufelkinder Jun 19 '18 at 14:19

score 1 · Answer 3 · answered Feb 23 '17 at 03:54

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.

answered Feb 23 '17 at 03:54

Chris Cruz

1,829
13
15

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. – tufelkinder Feb 23 '17 at 04:02

score 0 · Answer 4 · answered Feb 23 '17 at 04: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.

answered Feb 23 '17 at 04:02

Pankaj Kumar Singh

164
2
9

score -4 · Answer 5 · answered Feb 23 '17 at 06:20

-4

You can use localStorage or sessionStorage objects.

Like

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

or

sessionStorage.data = data; //untill session complete

answered Feb 23 '17 at 06:20

raj peer

694
6
13

Populate an HTML Form from a FormData object

5 Answers5