How to inject data to a Form after clicking Submit?

Issue

I want to send a form by clicking the Submit button. The form originally only consists of a CSRF token. When the user clicks submit, I want to fill up the form using vanilla JS with data gathered on the page.

Now here's the HTML with the form and an input field which shall be injected afterwards:

<input id="user-input" type="text" name="userInput">

<form id="best-form-ever" method="post" action="/amaze-me">

    <input type="hidden" name="_csrf" value="xyz1234">
    <button id="submit-form" name="submit-form">Submit</button>

</form>

I have the following JavaScript code so far in place:

document.querySelector("#best-form-ever").addEventListener("submit", this.handleSubmit, false);

handleSubmit(event) {
    event.preventDefault();

    const form = document.getElementById("best-form-ever");
    const userInput = document.querySelector("#user-input").innerHTML;

    const payload = new FormData(form);
    payload.append("userInput", userInput);

    payload.submit(); /* this doesn't work :( */
}

Unfortunately, the form won't get send this way since FormData:submit is not a function.

So here's my question:
How can I inject additional data to a form after the submit event?

Solution

If you set the attribute form on the input element and set the value to the ID of the form, it will be included in the form.

<input type="text" name="userinput" form="bestformever">

<form id="bestformever" method="post" action="/amaze-me">
  <input type="hidden" name="_csrf" value="xyz1234">
  <button type="submit">Submit</button>
</form>

Elements can also be added on the submit event either by setting the form attribute on input elements or by adding elements directly to the form that is submitted:

document.forms.bestformever.addEventListener('submit', e => {
  let formid = e.target.id;
  
  // input "collected" on the submit event
  [...document.forms.dynamicallyaddedinputs.elements]
    .forEach(elm => elm.setAttribute('form', formid));
  
  // input added to the DOM on the submit event
  e.target.innerHTML += `<input name="calculated" type="hidden" value="${2+3}">`;
});

<form name="dynamicallyaddedinputs">
  <input type="text" name="userinput">
</form>

<form id="bestformever" name="bestformever" method="post" action="/amaze-me">
  <input type="hidden" name="_csrf" value="xyz1234">
  <button type="submit">Submit</button>
</form>

Answered By - chrwahl