Why won't form.submit() trigger the "submit" event?

Question

I am submitting my form by using JavaScript .submit() function.

form.submit();

But when I using addEventListener to capture my submit event, it wouldn't work.

form.addEventListener("submit", function(event){
    //codes
});

I found out addEvenetListener function will only listen for onsubmit event instead of submit. Is there have any alternative solution to call my function when form.submit() is executed?

ps: For some reasons I need to stay with form.submit() to submit my form instead of using submit button.

`form.onsubmit` and `form.addEventListener("submit", ...)` refer to the same event. — Patrick Roberts, Jul 05 '17 at 02:53
https://stackoverflow.com/questions/7410063/how-can-i-listen-to-the-form-submit-event-in-javascript — lit, Jul 05 '17 at 02:54

score 28 · Accepted Answer · answered Jul 05 '17 at 02:59

28

According to MDN:

The form's onsubmit event handler (for example, onsubmit="return false;") will not be triggered when invoking this method from Gecko-based applications. In general, it is not guaranteed to be invoked by HTML user agents.

To get around this issue, try using dispatchEvent():

var form = document.querySelector('form');

form.addEventListener('submit', function () {
  console.log('invoked');
  
  return false;
});

// form.submit();
form.dispatchEvent(new Event('submit'));

<form></form>

answered Jul 05 '17 at 02:59

Patrick Roberts

49,224
10
102
153

Just tested, form.dispatchEvent(new Event('submit')); is working for me. But I am maintaining a old system and there is a lot of html files. If I change **form.submit()** to **form.dispatchEvent(new Event('submit'))** for every single file, it would be a nightmare – Owl Jul 05 '17 at 03:11
@Owl well, if you have a good editor, you can find all occurrences of a string in all files within your project directory, say `.submit()`, and replace them all with this function... that's much preferable to overwriting native functions in JavaScript, which is another possibility, but a _very_ bad idea. – Patrick Roberts Jul 05 '17 at 03:14
I found this article [link](http://codetheory.in/javascript-fire-onsubmit-by-calling-form-submit/), it might explained why my event listener is not working (I'm not sure it is correct or not). I will accept your solution and try to search through all of my files to replace the function T T – Owl Jul 05 '17 at 04:09
2

@Owl yes, that exactly coincides with the information I quoted from MDN in my answer. Maybe you missed that or something? The explanation is indeed correct. – Patrick Roberts Jul 05 '17 at 13:17
3

With this solution, Firefox now logs a warning: `Form submission via untrusted submit event is deprecated and will be removed at a future date.` – Matt May 11 '22 at 23:17

score 4 · Answer 2 · edited Jan 31 '23 at 10:26

If you need not to support older browsers (IE, Safari < 16), you can use requestSubmit().

Unlike @Patrick Roberts's solution of dispatchEvent(), this will also validate form's content! As per MDN:

submit() submits the form, but that's all it does. requestSubmit(), on the other hand, acts as if a submit button were clicked. The form's content is validated, and the form is submitted only if validation succeeds. Once the form has been submitted, the submit event is sent back to the form object.

Alternatively, if you have access to the submit button (which I'm aware of that OP hasn't), btn.click() is the best supported way since it will do form validation as well as will trigger submit event.

score 1 · Answer 3 · answered Dec 27 '18 at 16:51

Instead of using this and then adding event listener to the submit

var form = $('form');
form.submit();
form.addEventListener("submit", function(event){
    //codes
});

You could use this instead

var form = $('form');
form.submit(function(event){
    // Do something on submit
});

score 0 · Answer 4 · answered Jul 05 '17 at 02:51

0

Make the event handler listen for the button click and then call form.submit() inside the callback.

answered Jul 05 '17 at 02:51

Difster

3,264
2
22
32

Thank you for reply. Actually I want to call a generic function to perform some verification checking before my form is submitting and there is a lot of forms. So it is not a ideal solution for me to bind an onclick event on every buttons. – Owl Jul 05 '17 at 02:56
You could add a class to the buttons to be listened for so you'd only need a single event handler. Point of note: this would all be easier in jQuery. – Difster Jul 05 '17 at 02:59
I am maintaining an old system, and there is a lot of pages of html files. If I add a class for the button one by one, it would be a nightmare for me. – Owl Jul 05 '17 at 03:08
That's very unfortunate. – Difster Jul 05 '17 at 03:10

score 0 · Answer 5 · answered Jul 05 '17 at 02:54

0

I think this solution would be more useful than the one you are trying. There could be some syntax error.

HTML:

<button onclick="formSubmit()"> Submit form</button>

JavaScript:

function formSubmit()
{
   var form = document.getElementById('formName');
   form[0].submit();
}

answered Jul 05 '17 at 02:54

Denis

1,219
1
10
15

Thank you for reply. Actually I want to call a generic function to perform some verification checking before my form is submitting and there is a lot of forms. So it is not a ideal solution for me to bind an onclick event on every buttons – Owl Jul 05 '17 at 02:57

Why won't form.submit() trigger the "submit" event?

5 Answers5

Linked