JS - Simulate form submit with "form attribute" on text input

Question

Consider I have the following HTML:

<form id="myForm" action="/echo/html/" method="post">
  <input type="text" value="10" />
  <input type="submit" value="submit" />
</form>
<input type="submit" form="myForm" value="submit" />
<input id="myInput" type="text" form="myForm" />

and with that HTML I have the following JS:

document.addEventListener('submit', function(e) {
  console.log(e, 'addEventListener');
});

document.getElementById('myInput').addEventListener('keyup', function(e) {
  console.log(e.target.form);
  e.target.form.submit();
});

(Note: this code has been optimized to work in jsfiddle and thus uses /echo/html/. The docs on this are here)

There are three parts to the above code:

The <form> (id="myForm"), which has a text input and a submit input.
The submit input outside myForm, but, using the attribute form="myForm" will submit the data inside myForm.
The text input which when registers a keyup, will fire myForm by using e.target.form.submit(). This does not, however, fire the submit event attached to the document.

My question is:

How do I simulate/trigger/etc. a submit event, which actually fires a submit event which is currently being listened by the document, using the 3rd method I describe above (on a keyup for a text input).

P.S. I could not get a snippet working as it was erroring in stackoverflow, so the jsfiddle is here.

eithed · Accepted Answer · 2016-09-22 07:25:13Z

1

I think this happens because you're triggering the event on the form, without it bubbling to document. I'm sadly unable to find out any links to the documentation about it (as, on why it happens). If anybody is able to provide such link, I'll be interested to read about it as well.

To get around this, I've created a submit Event which actually bubbles, that is captured by document as well:

document.addEventListener('submit', function(e) {
    console.log(e, 'documentEventListener');
});

document.getElementById('myForm').addEventListener('submit', function(e){
    console.log(e, 'myFormEventListener');
})

document.getElementById('myInput').addEventListener('keyup', function(e) {
    var event = new Event("submit", { bubbles: true });
    this.form.dispatchEvent(event);
});

https://jsfiddle.net/c1vnjjxr/3/

answered Sep 22, 2016 at 7:25

eithed

4,3996 gold badges46 silver badges63 bronze badges

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

3 Comments

4lackof Over a year ago

interesting! well this works and does what I need it to do. Weird on .submit() (maybe) no properly bubbling to document.

eithed Over a year ago

I think that the explanation here is that programatically triggered events do not bubble (unlike mouse events), but I failed to find reference for that.

4lackof Over a year ago

Makes sense. It would be cool if .submit() took a bubble param, almost like new Event. I'm guessing something like: this.form.submit({ bubbles: true }); but your way works (just realized you could even one line it like this: this.form.dispatchEvent(new Event("submit", { bubbles: true }));

Gian Lorenzo Abaño · Accepted Answer · 2016-09-22 06:46:05Z

0

The problem is the "myInput" input field is outside the form tag already. To submit the form using the outside input is to get the form and use the .submit() method.

document.addEventListener('submit', function(e) {
  console.log(e, 'addEventListener');
});

document.getElementById('myInput').addEventListener('keyup', function(e) {
  // console.log(e.target.form); <-- what is this for??
  document.getElementById("myForm").submit();
});

edited Sep 22, 2016 at 6:46

answered Sep 22, 2016 at 6:40

Gian Lorenzo Abaño

6727 silver badges21 bronze badges

1 Comment

eithed Over a year ago

HTML5 allows you for placing input elements outside the form they belong to - that's what form attribute is for. You can access the form by accessing .form property - so, either e.target.form (e.target is target of keyup event, in this case #myInput) or this.form is fine

bestafubana · Accepted Answer · 2016-09-22 06:59:16Z

0

Why would you need this?

document.addEventListener('submit', function(e) {
  console.log(e, 'addEventListener');
});

Just put the inputs inside the form, so they'll be able to submit it.

answered Sep 22, 2016 at 6:59

bestafubana

1024 bronze badges

1 Comment

4lackof Over a year ago

my idea was to use the form attribute on the text input (<input form="myForm") so that I can place the text input elsewhere on the page but still have it connected to myForm

Collectives™ on Stack Overflow

JS - Simulate form submit with "form attribute" on text input

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related