Search code examples
javascripthtmlform-data

html: load formData to populate default values

I have an HTML form:

    <form id="myForm" method="POST" action="/submit" target="response-frame">
        <div class="input">
            <label for="name">Full Name</label>
            <input id="name" name="name" type="text" value="x" />
        </div>

        <div class="input">
            <label for="email">Email Address</label>
            <input id="email" name="email" type="email" value="[email protected]" />
        </div>

        <button type="submit">Submit</button>
        <button type="loadValues" onclick="setFormValues()">Load Values</button>
    </form>

When I click on submit, the filled in values are sent in the form of a formData object https://developer.mozilla.org/en-US/docs/Web/API/FormData

For some of the form entries, I have default/placeholder values, like e.g. for the email i have the default value: [email protected] and when i submit the form, this default value is included in the formdata.

enter image description here

My question is, is there any way populate my HTML elegantly with an existing formData object?

I know that I could just use a script that populates the form, like I do already to some degree here:

<script>
        function setFormValues() {
            const urlParams = new URLSearchParams(window.location.search);
            const key = urlParams.get("key");
            if (key) {
                document.getElementById("name").value = key;
            }
        }

        window.onload = setFormValues;
    </script>

But my form will have 15 fields or so, and it seems tedious to set every single of these fields manually, and it seems inelegant to set them via a loop.

Ideally, I would like to just "load an existing formData object" that automatically puts all the default values/placedholders. The user can then modify the fields to their liking, and when they click on send, the modified formData is sent to the destination.

My full code is here: https://github.com/charelF/wg-form-page/blob/main/public/form.html

Solution

  • You can use URLSearchParams.entries() and Array::forEach():

    [...new URLSearchParams('?name=Alexander%20Nenashev&[email protected]')
  .entries()]
  .forEach(([name, value]) => 
    Object.assign(document.querySelector(`form [name="${ CSS.escape(name) }"]`) ?? {}, {value})
  );
    <form id="myForm" method="POST" action="/submit" target="response-frame">
        <div class="input">
            <label for="name">Full Name</label>
            <input id="name" name="name" type="text" value="x" />
        </div>

        <div class="input">
            <label for="email">Email Address</label>
            <input id="email" name="email" type="email" value="[email protected]" />
        </div>

        <button type="submit">Submit</button>
        <button type="loadValues" onclick="setFormValues()">Load Values</button>
    </form>