4

I would like to submit a form with vanilla JS, but still trigger submit events. Basically the same as pressing the "submit" button.

HTMLFormElement.submit() skips the "submit" event so it does not work for me.

HTMLFormElement.requestSubmit() seems like it would do what I want, but it's browser support is very poor. I would like Chrome/Safari/Firefox/Edge support.

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Mike
  • 95
  • 8
  • Can you please explain the exact use-case? Why don't you use the standard form submission mechanism? – Teemu Apr 20 '22 at 12:13
  • Does this answer your question? [JavaScript post request like a form submit](https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit) – Reynadan Apr 20 '22 at 12:31
  • Could you not click the submit button using js? That way it should post the form and hit the on submit event – Pete Apr 20 '22 at 12:36
  • 1
    @Reynadan No, not really. All of the top answers there do exactly what the OP does *not* want. – Bergi Apr 20 '22 at 13:29
  • There various form-requestsubmit polyfills. Have you looked at them? Their implementation seems quite trivial. – Bergi Apr 20 '22 at 13:31

1 Answers1

2

To programmatically submit a form and still trigger a "submit" event, besides using .requestSubmit(), would be to use .click() method on the "submit" button. In the example below are the following:

  • A <form> that will post it's data to a live test server. The test server's response will be displayed in an <frame> located after the <form>.

  • A <button> outside of the <form> and has no form attribute assigned to it either. This button is isolated from the <form> but it will still trigger a "submit" event indirectly since it is registered to the "click" event and the event handler will programmatically click the "submit" button.

  • Note, the <button> is not necessary to use the .click() method, it can be invoked by other means like any other method or function.

Click the Trigger button

<button class='trigger'>Trigger</button>


const trigger = document.querySelector('.trigger');

trigger.onclick = e => document.querySelector('form button').click();
.trigger {
  vertical-align: top
}
<form id='UI' action='https://httpbin.org/post' method='POST' target='response'>
  <fieldset>
    <legend>Programmatically Submit a Form</legend>
    <input name='test' value='TEST'>
    <button name='send'>Send</button>
  </fieldset>
</form>
<hr>
<button class='trigger'>Trigger</button>
<iframe name='response'></iframe>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • I was hoping that this would be possible without altering the DOM. Feels a bit contrived, but it might be the only way. ); – Mike Apr 20 '22 at 14:44
  • 1
    The DOM doesn't need to be altered at all, I just added a button for demonstration purposes. You can do the same thing by just running this alone: `document.forms[0].elements.ID_or_Name_of_Submit_Button.click()` or `document.querySelector('[type="submit"]').click()`, or.... a thousand other possibilities...`.click()`. Unless of course you never had a submit button in the first place but then that'd be bad UX. – zer00ne Apr 21 '22 at 18:22