document.forms['myform'].submit() is not a function?

.submit()

You want to submit the form by clicking on a link or some other element on the page and this is a simple task. You know that by simply adding something like document.forms['the-form-name'].submit() this will work.

<form method="post" name="myform">
    <input type="text" name="user" />
    <a href="#" onclick="document.forms['myform'].submit();return false">Submit</a>
</form>

However you’d like to submit the form not only by clicking on that particular element, but also by clicking on the Enter while the focus is on a input field, and this wont work! That’s because you don’t have a input type=”submit”.

OK, first thing is to add a hidden input type=”submit” – than by clicking both on the Enter keyboard button and on the link with the onclick=”document.blah.blah.blah” will submit the form.

<form method="post" name="myform">
    <input type="text" name="user" />
    <input type="submit" name="submit" value="submit" style="display:hidden" />
    <a href="#" onclick="document.forms['myform'].submit();return false">Submit</a>
</form>

But this is not true!

Than you’ll receive the following message:

document.forms['myform'].submit() is not a function

Why? This isn’t working, but ever line seems to be OK. The answer is – don’t name the input type=”submit” with the trivial – “submit”. Just give it another name:

<form method="post" name="myform">
    <input type="text" name="user" />
    <input type="submit" name="something" value="something" style="display:hidden" />
    <a href="#" onclick="document.forms['myform'].submit();return false">Submit</a>
</form>

Related posts:

1. Secure Forms with Zend Framework
2. One Form – Multiple DB Records
3. Detecting POST Requests in Zend Framework