asked on

Why does my form submit twice?

Hi Folks,

I have this form that submits twice for some crazy reason. I just can't work out *why*. The submit is done via an image button that fires a javascript function with onClick() event.

When I watch this action with fiddler tool, I see that the browser posts twice. I can make it post just once if I remove the line

//document.login.submit();

but why does it submit at all? I am assuming that 'image' form field behaves like 'button' - perhaps it realy behaves like 'submit' type?

Any clues will be gratefully accepted!

Thanks and regards, Mike.

<script language="javascript">
var clicked = false;
function do_login()
{
	if (! clicked )
	{
		clicked = true;
		document.login.submit();
	}
	else return false;
}
</script>
 
<form name="login" action="http://login.host/login" method="post">
username: <input style="width: 240px" name="username" type="text" value="" /><br>
password: <input style="width: 240px" name="password" type="password" /><br>
<a onClick="return do_login()" target="_top" onMouseDown="" onMouseUp="">
<input type="image" name="loginbutt" src="templates/loginbutt.gif" alt="Log into system" value="LOGON">
</a>
</form>

Open in new window

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

meverest

ASKER

ahah,

>> input type="image" IS a submit button

OK, so i can get rid of the anchor tag, and put onClick="do_login()" for the image tag instead?

Cheers.

hielo

>>onClick="do_login()" for the image tag instead
Yes, but you don't need the onclick at all. The input type="image" will submit when clicked.

meverest

ASKER

OK,

>> The input type="image" will submit when clicked.

yes, but I also want to prevent a double-click causing multiple submit events, so I am thinking that this would do it:

onClick="return do_login()"

how ironic that I wanted to prevent a double click to cause duplicate POST events, and ended up causing duplicate POST every time! ;-D

Cheers.

hielo

>>onClick="return do_login()"
OK, them make sure you return false in your function always.

function do_login()
{
        if (! clicked )
        {
                clicked = true;
                document.login.submit();
        }
return false;
}
 
when this is executed:
 document.login.submit();
 
the form will be submitted regardless of what's the return value. But if you return false always, you are making sure that the submission is NOT triggered by the input element, which is what you want since you are doing the submission via javascript.

Open in new window

meverest

ASKER

OK, thanks!

This is what I have settled on. I know that the 'return true;' is probably technically not required, but I figure that it is worth putting it in there for 'readability'.

Your assistance is very much appreciated!

Cheers.

function do_login()
{
        if (! clicked )
        {
                clicked = true;
                return true;
        }
return false;
}
 
<form name="login" action="http://login.host/login" method="post">
username: <input style="width: 240px" name="username" type="text" value="" /><br>
password: <input style="width: 240px" name="password" type="password" /><br>
<input onClick="return do_login()" type="image" name="loginbutt" src="templates/loginbutt.gif" alt="Log into system" value="LOGON">
</form>

Open in new window

meverest

ASKER

Thanks!