Why Does Naming Your HTML Form Submit Button "Submit" Break Things

Why does naming your HTML form submit button submit break things?

The form element has a method named submit, but also has the form elements in the form as members.

If you have a button in the form named submit, you could access it using document.form1.submit. However, as that is the same name as the submit method, there is no longer any way of accessing that method. If you use the method to submit the form, that will no longer work.

For example, if you have a button that submits the form using Javascript, that doesn't work:

<input type="button" name="submit" onclick="this.form.submit();" value="try" />

When the button tries to use the submit method, it will instead get a reference to itself (and an error message when trying to call it, as the button is not a function).

Submit button doesn't work

If you are not using any JavaScript for form validation then a simple layout for your form would look like this:

<form action="formHandler.php" method="post">    
 <input name="fname" id="fname" type="text" value="example" />    
 <input type="submit" value="submit" />
</form>

You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.

For a more direct answer, provide the code you are working with.

You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html

jQuery append breaks my HTML form (with submit button)

With:

out.append('<form name="input" action="/createuser" method="get">');

the form DOM element is automatically closed by the browser so everything else is added as new DOM elements but not inside the form.

Here's an alternative method which I like for working with the DOM tree:

out.append($('<form/>', {
    name: 'input',
    action: '/createuser',
    method: 'get',
    html:
        $('<span/>', {
            html: 'Username: '
        })
        .after(
            $('<input/>', { type: 'text', name: 'user' })
            .after(
                $('<input/>', { type: 'submit', value: 'Submit' })
            )
        )
}));

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

---

Related Topics