Form is not submitting via javascript on a button

Question

My website has been created with a CSS/HTML frame work that has been integrated into an ASP.NET website.

Inside of a ContentPlaceHolder, I have a simple login form. The catch is that I am using the onclick event of an image to submit the form. It normally works pretty straight forward, but this time I am having an issue.

<div id="login">
    <form action="index.aspx" method="post" id="nothingForm" name="nothingForm">
    </form>
    <form action="https://google.com.au" method="post" id="loginform" name="loginform">
        <input type="text" name="uname" value="username" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
        <input type="password" name="pword" value="password" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
    </form>
    <br /><img src="images/login.gif" alt="" onclick="document['loginform'].submit()" />    </div>

I have to stick another form before the real form to make onclick="document['loginform'].submit()" actually work. This should not be the case, of course, but I was unable to find any solutions to it on the web.

Has anyone else come across this before?

Answer 1

Did you try out document.getElementById("loginform").submit()? I would think this is better, since I have never seen anyone access elements on the document itself like that before. May be some kind of strange side effect.

Answer 2

Your problem is that the page already has a form around all the code. Forms can not be nested, so your first form tag will be ignored, and it's end tag will end the outer form.

You have to place your form outside the already existing form.