?
Solved

Why does my form submit twice?

Posted on 2009-02-08
7
Medium Priority
?
1,497 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:meverest
  • 4
  • 3
7 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 23587181
input type="image" IS a submit button. So you are submitting via the image and via the onclick on the "a" tag. Get rid of the "a" tag.
0
 
LVL 37

Author Comment

by:meverest
ID: 23587196
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.
0
 
LVL 82

Expert Comment

by:hielo
ID: 23587240
>>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.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 37

Author Comment

by:meverest
ID: 23587261
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.
0
 
LVL 82

Expert Comment

by:hielo
ID: 23587363
>>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

0
 
LVL 37

Author Comment

by:meverest
ID: 23587561
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

0
 
LVL 37

Author Closing Comment

by:meverest
ID: 31544386
Thanks!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is about the challenges faced by Android app developers.
Now many of you may wonder how you can reach great design with least number of essentials. Isn’t stuffing ‘more and more number of elements that speak for the purpose’ the right way to do it? Erm, not always, and in this write-up, you will see why.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question