In short: change the id of your submit button to something different than submit. Also, don't set the name to this value either.

Now, some deeper insight. The general case is that document.formname.submit is a method that, when called, will submit the form. However, in your example, document.formname.submit is not a method anymore, but the DOM node representing the button.

This happens because elements of a form are available as attributes of its DOM node, via their name and id attributes. This wording is a bit confusing, so here comes an example:

<form name=example id=example action=/>

  <input type=text name=exampleField />

  <button type=button name=submit onclick=document.example.submit(); return false;>Submit</button>

</form>

On this example, document.forms.example.exampleField is a DOM node representing the field with name exampleField. You can use JS to access its properties such as its value: document.forms.example.exampleField.value.

However, on this example there is an element of the form called submit, and this is the submit button, which can be accessed with document.forms.example.submit. This overwrites the previous value, which was the function that allows you to submit the form.

EDIT:

If renaming the field isn't good for you, there is another solution. Shortly before writing this, I left the question on the site and got a response in the form of a neat JavaScript hack:

function hack() {

  var form = document.createElement(form);

  var myForm = document.example;

  form.submit.apply(myForm);

}

See How to reliably submit an HTML form with JavaScript? for complete details