Error on either "<button> api" doc, or "the native form widget" doc?

MDN
#1

hi guys,

I was reading mdn docs on “sending forms through js”, and I wonder why the example of that doc works:

in particular, I have following questions:

  1. In that doc, the sendData() is registered as ‘submit’ event handler; but the has no value for “type” attribute. I assume this button is anonymous button? Because that’s what “native form widget” doc says about default type attribute value of button element:

But in " html element" api doc, it says default type is submit type:

Which one is correct?

  1. To double check, would clicking on anonymous button trigger submit event at all?
#2

@jsomedon:

So, if you look carefully here, the handler for the submit event is actually being set on the <form> element itself, not on the button. That’s this code:

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

The lack of a submit handler specifically on the button causes the event to propagate upward to the form controls’ parent element, the <form>.

So there is actually nothing wrong with this code; it’s not trying to set a handler for the submit button, because it knows the event will get handled by the form itself.

Make sense?

#3

@sheppy

thanks sheppy, uhm, that wasn’t what I was confused about, I post this late midnight, so probably what I typed was not matching what was in my mind… So like you said, in this code, submit event handler is registered at that form, thus submit event will be caught by form, only if the submit event ever gets fired. But:

Who fires “submit” event in this code, on what occasion? Is it fired when I click button?

But the doc on “native form widget”(link is on top post) says that, if button elem with no type attr specified then the button is anonymous button by default which does nothing when clicked, and my guess to that “does nothing” at least means it doesn’t trigger submit event. In this code, this button has no type, which is exactly this case.

Then when I searched about “button api” doc(again link on top post) it says default of button’s type attribute is type=submit.

So I tried with example page of

  1. button type=submit
  2. button type=button (the anonymous)
  3. button (with no type)

Then I see both 1 and 3 submit and 2 doesn’t, so it looks like the native form widgets doc wasn’t correct about “default button with no type value is anonymous”. But after all it’s just my guess based on trying on some example pages.

1 Like
#4

Oh! Okay, the “submit” event is being sent whenever an <input type="submit"> or <button type="submit"> is clicked.

And you are correct! That article is in error. Omitting the type on <button> creates a submit button, not an anonymous button. I have corrected this text now.

Thank you for checking in on this, and with being persistent with me!

1 Like
#5

@sheppy
No problem! MDN docs are invaluable for self learning, I am glad I could help. :smile: