document.getElementById('form_name').submit() not working properly

Question

Ok, I will try to give the most details I can.

The site is not suposed to work with IE6. It would be nice if it worked with IE8 and Chrome, but that can be done later.

The site is in PHP. The form where the submit is in another PHP file that is included in position on the index.php inside of a DIV tag.

If I open the form solely, the submit works correcly, but when I try to submit on the index page, the Firefox error console says that document is undefined. The form code is echoed line by line via PHP. Save the text fields for username and password, the form code is the following:

<form id="entrar" action="entrar.php" method="post" onsubmit="javascript:checkvalues();">
  <a href="javascript:document.getElementById('entrar').submit();">ENTRAR</a>
</form>

What's the big deal? What am I missing here? I know it is something very silly but I can't figure it out.

Answer 1

In before jQuery answers.

<form id="entrar" action="entrar.php" method="post" onsubmit="javascript:checkvalues();">
  <a id="entrar-link" href="#">ENTRAR</a>
</form>

<script>
(function() {
var entrar = document.getElementById('entrar'),
link = document.getElementById('entrar-link');

link.onclick=function() {  entrar.submit() }

})();
</script>

Bottom line is dont use href to execute javascript. Do it unobtrusively ( within a script element ). Make sure the script comes after the markup or if you do plan to put it in the head make the function invoke on window load / dom ready.

Though I honestly don't know why you just did:

<input type=submit value=go>

Unless you're doing this for some bizarre stylistic purpose, which you can also probably use input type=image for if you aren't sure how to properly style submits.