Submitting form with image as button does not work, standard button does?

[TGP]

In the head of my page:

<script type="text/JavaScript">
<!--
function Login(){
var done=0;
var keyword=document.enter_keyword.keyword.value;
//keyword=keyword.toLowerCase();
if (keyword=="r4ds") { window.location="http://www.google.co.uk"; done=1; }
if (done==0) { alert("Sorry, no products match your search."); }
}
//-->
</script>

In the body:

<form name=enter_keyword>
<tr>
<td><input type="text" name=keyword value="Search Products" onfocus="if
(this.value==this.defaultValue) this.value='';" size="13">
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="image" name="search" Value="search" src="NDSCardStore_files/search2.gif" onClick="Login()">
</td>
</tr>
</table>
</form>

The form works fine 100% when I have the input type as="button" but when changed to image it does not work, and this is added to the url in the address bar when you click the search2.gif image:

?keyword=r4ds&Login%21.x=16&Login%21.y=8&Login%21=search

Please help!

[diltony]

Corrected version:


<script type="text/JavaScript">
<!--
function Login(){
var done=0;
var keyword=document.enter_keyword.keyword.value;
//keyword=keyword.toLowerCase();
if (keyword=="r4ds") { window.location="http://www.google.co.uk"; done=1; }
if (done==0) { alert("Sorry, no products match your search."); }
}
//-->
</script>

In the body:

<form name=enter_keyword onsubmit="Login(); return false;">
<tr>
<td><input type="text" name=keyword value="Search Products" onfocus="if
(this.value==this.defaultValue) this.value='';" size="13">
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="image" name="search" Value="search" src="NDSCardStore_files/search2.gif">
</td>
</tr>
</table>
</form>

?keyword=r4ds&Login%21.x=16&Login%21.y=8&Login%21=search meant that the form submitted as it should. You were tryin to run your login function by putting onclick...that will not work because the form would have submitted by then.

The legal thing to do was to stop the form from submitting and executing your function - that is why i used the onsubmit event - which is triggered anytime a form is about to be submitted - returnin false will prevent it from executing, then it also gets to run your function.
I think that should solve your problem.

[Schmoopy]

By default, when the form is submitted and you have the type selected as image, the URL will display where the mouse cursor was when it was submitted so that is why you have x=16 and y=8 as they symbolise coordinates:

http://www.w3schools.com/TAGS/att_input_type.asp

[TGP]

Perfect thanks a lot!!