Most browsers have a bug that isn't really a bug. In fact it was purposely put there to make your simpler, but if you (or someone else writing the HTML code) do something in the right (read "WRONG!") way, it could completely blow up. Specifically, if you assign your
input tags a
id attribute of "action" or "submit", you can cause some very well hidden bugs.
Introduction to the "Bug"
input element with an
name attribute within a
form, you will be able to reference that
input directly as a property of the form.
<form id="form" action="url"> <input type="text" id="textboxid" name="textboxname"> </form>
// Grab the form var form = document.getElementById('form'); // Reference the text box directly from the form by its ID or name form.textboxid; // -> The input element form.textboxname; // -> The input element
This is a pretty cool idea, except it's not all that necessary since getting elements by their
name is fairly simple. Also, take note of 1 very important thing: if the form already has a property with the same key as the
name, that property will be overridden by a reference to the
This becomes especially painful if you have
form.action), or if you just want to submit the form programmatically (via
form.submit), you'll either get a very wrong value or an error, respectively.
I never thought I'd run into this issue personally, but I actually did at one point. Probably the simplest way to fix the issue is to rename your
inputs, but sadly I didn't have access to the HTML, and sometimes you won't either. There's also the chance that other code relies on that
name for other purposes. Well, if there's no way for you to fix the HTML, there is another way around it.
This fix only works for properties of the form that are functions. Any properties that aren't functions will be stuck, even if you try to change the
id of the
submit) being overridden, you can grab the function off of the prototype, and call it with a context of the
form you want to use.
<form id="form" action="url"> <input type="text" id="submit"> </form>
// Grab the form var form = document.getElementById('form'); // Try to submit it the normal way form.submit(); // Nope, that's an error // Try to submit using the prototype HTMLFormElement.prototype.submit.call(form); // Yay! It worked!
I haven't tried this out in older browsers, but it should work in any browser that supports good old HTML4 since
HTMLFormElement was initially specified in the DOM Level 1 Specification.
The folks at Webucator went ahead and created a video that talks about this issue and demonstrates the workarounds I pointed out.
I'm a little surprised that a workaround was never suggested in the book. They kinda just blew it off saying that we should avoid the use of these
Luckily, we can avoid this problem in our own markup by avoiding simple id values that can conflict with standard property names, and we can encourage others to do the same. The value submit is especially to be avoided for id and name values, as it’s a common source of frustrating and perplexing buggy behavior.
While that's definitely sound advice, hence the title of this post, it's not always avoidable, so it's nice to have a simple way of getting around some of the issues. In any case, I hope you never need to use this workaround. God bless and happy coding!