Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

224
Views
Programmatically submit form with "submit" events

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!