Trigger form submission with javascript

Question

I have a form that I would like to submit via JavaScript. Obviously this can be achieved by:

document.getElementById("myForm").submit();

The issue is that I have a listener on the submit event that looks like this:

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    // Other work
});

This event handler is not triggered when I call .submit(). From 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.

So, given this restraint, how can I submit the form in a way that ensures the event handler is invoked?

What is the proper way to to call dispatchEvent? According to MDN, dispatchEvent is supported across browsers, but calling new Event() is not. How else can an event be constructed? — Max
– Max, Commented Feb 2, 2016 at 13:38
probably something in line of var evt = document.createEvent("Event"); evt.initEvent("submit", true, true); form.dispatchEvent(evt); link — Sami
– Sami, Commented Feb 2, 2016 at 14:05

Whip · Accepted Answer · 2022-11-21 10:17:29Z

30

Update Nov 21, 2022

I would now recommend the requestSubmit() method. You can pass a submit button to it if you want. Its cleaner and can be intercepted.

document.getElementById("myForm").requestSubmit();

Original answer

A custom event works just fine.

document.getElementById("myForm").dispatchEvent(new CustomEvent('submit', {cancelable: true}));

edited Nov 21, 2022 at 10:17

answered Jul 8, 2022 at 5:32

Whip

2,3121 gold badge26 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mystical · Accepted Answer · 2018-09-20 01:31:54Z

14

You need create a submit event, then dispatch it.

(function () {
              if ( typeof window.CustomEvent === "function" ) return false;

              function CustomEvent ( event, params ) {
                params = params || { bubbles: true, cancelable: true, detail: undefined };
                var evt = document.createEvent('submit');
                evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
                return evt;
               }

              CustomEvent.prototype = window.Event.prototype;

              window.CustomEvent = CustomEvent;

})();
var evt = new CustomEvent("submit", {"bubbles":true, "cancelable": true});
document.getElementById("myForm").addEventListener("submit",function(event) {
                event.preventDefault();
                alert('submit');
});

Then when you want submit this function you need to call:

!document.getElementById("myForm").dispatchEvent(evt);

For more event info see dispatchEvent.

edited Sep 20, 2018 at 1:31

Mystical

2,8622 gold badges26 silver badges47 bronze badges

answered Feb 2, 2016 at 14:14

Raymond Cheng

2,51523 silver badges35 bronze badges

2 Comments

Max Over a year ago

According to MDN, new Event is not supported in IE: developer.mozilla.org/en-US/docs/Web/API/Event/Event

Raymond Cheng Over a year ago

@Max, developer.mozilla.org/en-US/docs/Web/API/CustomEvent/… ,here have a common methed to deal with IE > 9

Dustin Poissant · Accepted Answer · 2016-02-02 13:25:19Z

-11

Use jQuery to submit the form and add the handler.

$("#myForm").on("submit", function(e){
  e.preventDefault();
  // Handle submission here
});

// Then later
$("#myForm").submit();

answered Feb 2, 2016 at 13:25

Dustin Poissant

3,5162 gold badges23 silver badges34 bronze badges

5 Comments

Max Over a year ago

Thanks for the answer, but I'm not using jQuery.

Dustin Poissant Over a year ago

What exactly are you trying to do, if your trying to run some code after the form is submitted, and your submitting the form using JavaScript, then why not just run the code after you submit the code using JavaScript

Max Over a year ago

I've decided to run to code after submitting the form with JavaScript. It's just somewhat annoying that you can't trigger the submit handler via .submit().

Dustin Poissant Over a year ago

And that is exactly why people use jQuery. Because each browser has it's little quarks as to what works and what doesn't, and jQuery makes all features work on all browsers.

Qasim Over a year ago

The .submit() works without jQuery too. For example, document.querySelector('form').submit(); works perfectly!

Collectives™ on Stack Overflow

Trigger form submission with javascript

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related