Let’s say you have a simple contact form on your website, like this:
But when we run this, it generates an error:
TypeError: form.submit is not a function
Wait, what? How is
form.submit not a function? MDN says its a function, WHAT IS EVEN GOING ON? Then we see, hidden in the text is this really important and interesting line:
If a form control has a name or id of submit it will mask the form's submit method.
Any named form control can be accessed as a property on the form object. In the example above
form.name would reference the Name input and
form.email would reference the Email input. Unfortunately, we gave our submit button a name too, so rather than being the
submit() function we want, it gives us a reference to the submit input.
HTMLFormElement is just trying to be helpful, but this is really weird. What happens if we do other important properties, like
That feels like a bug waiting to happen. Even more weird, if we set the properties, like
form.id = "foo";, that still works, even though we cannot get the value because it has been hidden by the input control.
UPDATE Our friend Philip Tellis pointed out how that to get to the real attributes of the form, you need to use
getAttribute(). To submit the form, you need to use
HTMLFormElement.prototype.submit.call(form). Both of these strategies bypass the form control helper weirdness.
When you’re building form controls, take care to not hide default properties with your names. It might even be worth considering prefixing your names to avoid the many cases of bugs that could arise from this weird behavior of the
HTMLFormElement. Speaking of bugs, try TrackJS today, free for 30 days, and we’ll help you know when these bugs impact your visitors.