CODEWITHSUNDEEP
javascript
cusman
cusman

Reputation: 1767

Why Form Elements should not be named submit?

I figured out through debugging that I should not name any Form Elements name="submit", but even after searching I didn't find any good explanation of why?

See simple code example below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form action="javascript:alert('submitted');" method="post" id="test-form">
            <label>Name</label>
            <input type="text" name="name-field" value="" />
            <input type="submit" name="submit" value="Submit Button" /> <!-- name should not be "submit" -->
            <p><a href="javascript: document.getElementById('test-form').submit();">Submit Link</a></p>
        </form>
    </body>
</html>

If you simply rename your Submit Button to anything other than name="submit" (even if you just capitalize some part of it) or just remove the name="submit" attribute, then both the Submit Button and Submit Link will work.

I tried this in the latest version of Internet Explorer, Firefox, Opera, Chrome, and Safari. All of them have consistent behavior with regards to this.

As you can see in my code example, there is no involvement of jQuery or any other JavaScript library.

I would appreciate the explanation. Thanks

Upvotes: 3

Views: 1038

Answers (3)

Dave Newton
Dave Newton

Reputation: 160261

Say your form is named "foo" and you have a field "firstName".

foo.firstName is that field in the form.

foo.submit() will submit that form, because submit is a method on forms.

If you redefine submit to be a form field you overwrite the submit method.

Upvotes: 2

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

If you check the Mozilla docs here : https://developer.mozilla.org/en-US/docs/DOM/HTMLFormElement

You will see that forms have a .submit() method.

In addition, forms are also populated with the fields within the form.

(Here is one example: http://www.devbay.com/articles/javascript/accessing-form-elements-array-with-javascript/ I can't find any reference that it should happen, only that it does.)

So, when you make an element called submit it over-rides the forms built-in submit() method -- and since the element is, well, not a function, you get that error message.

Upvotes: 5

Brandon Miller
Brandon Miller

Reputation: 2297

submit would be the form input type and i think is also used as an identifier in javascript. So naming a submit button "submit" makes the use of "submit" in javascript ambiguous

Upvotes: 1

Related Questions