Observe Form Submission

Question

In my application I need to submit forms via JavaScript. I know that I can do that with this code:

[...document.querySelectorAll('form')].forEach(form => {
    form.addEventListener('submit', e => {
        //doing the processing here
        e.preventDefault();
    })
})

From the server I get completely generated forms as HTML, which I inject into the DOM (or delete them from there), whenever necessary. By doing so, the registered event handlers stop to work, because the form element is either deleted or not registered.

Is it possible to register a global »Submission Listener«, comparable to that:

window.addEventListener('click' e => { … });

what will never be removed if the DOM changes, or will I have to register the submission handlers each time the DOM changes?

Is not a dublicate, because the mentioned delegation strategy is what I am looking for, but not for click events, for submission events instead.

Possible duplicate of [add event listener on elements created dynamically](http://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically) — Michał Perłakowski, Aug 27 '16 at 10:54
_"Is it possible to register a global »Submission Listener«, comparable to that?"_ Is someone preventing you from trying it? _"but not for click events, for submission events instead"_ What makes the `submit` event so special in your case, that you cannot use the proposed strategy? — a better oliver, Aug 29 '16 at 07:49
I have tried, I didn't work, so asked I somebody has already done it. — philipp, Aug 29 '16 at 08:01

score 1 · Accepted Answer · answered Aug 30 '16 at 04:31

You can definitely catch submit events as they bubble up, so what you want can be achieved by listening from a parent element that is always present as the dynamic forms are added and removed. I like doing this thing with a wrapper element with an ID, as opposed to listening a the body or html level. Here's a very simple example using just vanilla js. Codepen here: http://codepen.io/bsidelinger912/pen/RGbWYb

HTML:

<div id="form-wrapper">
  <h2>Form 1</h2>
  <form id="form1">
    <input name="test" placeholder="enter something" />
    <input type="submit" value="submit" />
  </form>

  <h2>Form 2</h2>
  <form id="form2">
    <input name="test" placeholder="enter something" />
    <input type="submit" value="submit" />
  </form>
</div>
<button id="form-adder">
  + Add a form
</button>

Javascript

var formWrapper = document.getElementById('form-wrapper');

// capture the submit event in the parent div
formWrapper.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log('submit captured');

  var thisForm = e.srcElement || e.originalTarget;
  console.log('form id:' + thisForm.id);
  console.log(thisForm.test.value);
});

// dynamically add divs and see we can still capture the submit
var divNum = 3;
function addDiv(e) {
  e.preventDefault();

  formWrapper.innerHTML += '<h2>Form ' + divNum + '</h2>\
  <form id="form' + divNum + '">\
    <input name="test" placeholder="enter something" />\
    <input type="submit" value="submit" />\
  </form>';

  divNum++;
}

document.getElementById('form-adder').addEventListener('click', addDiv);

Observe Form Submission

1 Answers1