Need help with an img button submitting

originaly, my button was working good as it was like this <input type="submit" name="save" etc.>

im was looking to give it exaclty this new style, but since i replace type="submit" to type="image" it wont login, it only redirect to login.php page

the new button code:

<input name="save" type="image" value="submit" onmouseover="this.src='images/connexionover.gif'" onmouseout="this.src='images/connexion.png'" src="images/connexion.png" style="width: 75px;height: 20px;vertical-align:middle;" />

this is the complete snippet login code


<form name="frm" action="login.php" method="post">
<p style="font-family : Arial;font-size : 15px;font-weight : normal;color:#f0ff00"><a href="/login.php"><font style="font-family : Arial;font-size : 15px;font-weight : bold;color:#d20000">Espace client</font></a>&nbsp;
<input class="default-value" type="text" name="username" style="width:120px;height:20px;font-family : Arial;font-size : 13px;font-weight : normal;color:#000000" value="Nom d'utilisateur" size="14" />
<input name="password" id="password-clear" type="text" style="width:120px;height:20px;font-family : Arial;font-size : 13px;font-weight : normal;color:#000000" value="Mot de passe" autocomplete="off" size="14" />
<input name="password" type="password" style="width:120px;height:20px;font-family : Arial;font-size : 13px;font-weight : normal;color:#000000" id="password-password" autocomplete="off" value="" size="14" />
<input name="save" type="image" value="submit" onmouseover="this.src='images/connexionover.gif'" onmouseout="this.src='images/connexion.png'" src="images/connexion.png" style="width: 75px;height: 20px;vertical-align:middle;" />
</p>
</form>


login.php code


<?php
include("include/config.php");

if(isset($_POST['save']))
{
if($_POST['username'] == "")
{

$msg=$language['user'][$curr_lang]['user_error'];
}
elseif($_POST['password'] == "")
{

$msg=$language['user'][$curr_lang]['pass_error'];
}
else
{ blablabla


you can see what it look likes right now at http://new.frankwebstudio.com

Stangly, this code works well on chrome and safari, but dont work on firefox and IE...

in those, it only redirect to the login.php page without login thanks for your help

 

hello. it is very easy.
just put your image and then add an onclick event and then submit the form . for example:

<img onclick="document.frm.submit();" src="yourimage.jpg">

since the name of your form is frm, this code will submit your frm form when you CLICK on the image. i hope that helps

 

it is not working

 

please be sure the name of the form matches the one in the code. as i see, it is:
<form name="frm" action="login.php" method="post">

so the name of the form is frm

ok, can you try this:

<img onclick="javascript:document.frm.submit();" src="yourimage.jpg">

 

unfortunatly, no luck with that one too

 

can you open your website in firefox. when you are in firefox, go to tools> there must be webmaster tools > error console (something like this, sorry, my firefox is not english)

when you see the error console, click on the image , and see what error console brings. so we cna understand the reason of the problem

 

ok i got those error --
[11:05:12,687] POST http://new.frankwebstudio.com/login.php [HTTP/1.1 200 OK 195ms]
[11:05:12,993] GET http://new.frankwebstudio.com/js/jquery-1.3.2.min.js [HTTP/1.1 404 Not Found 142ms]

 

are you putting the image between <form .... and </form> can you check it .. it should be before the </form> (in other words, your image must belong to the form, so it can see the frm form that needs to be submitted)

 

yes, it is inside of the form

 

can you replace this:
<p><input name="save" type="image" value="submit"

with this one:
<p><input onclick="document.frm.submit();return false;" name="save" type="image" value="submit"

 

still not working in IE firefox, and when adding this line "onclick" it stop working in chrome

 

can you replace
<form name="frm" action="login.php" method="post">

with this one
<form name="frm" action="http://www.frankwebstudio.com/login.php" method="post">

 

For input name there is no type="image" variable as I know.

 

http://www.w3schools.com/tags/att_input_type.asp yes there is

 

Hmmm... I missed it, thanks to let me know about that. It must be "HTML 5", I haven't updated my HTML skill.

 

I am out of ideas, let 's wait for other's solutions.

 

ok thanks alot for your time

 

try the image source with full URL, like: http:/

 

devon, i think it is not the problem. because if it was not correct, image should not even be displayed. but let's try it. maybe it works

 

maybe the problem is not in that input button, lets see this;
with a normal input button like this;
<input type="submit" name="save" value="submit"/>
it works, the page login us, in all browser (tested).

with this input;
<input name="save" type="image" value="submit" onmouseover="this.src='images/connexionover.gif'" onmouseout="this.src='images/connexion.png'" src="images/connexion.png" style="width: 75px;height: 20px;vertical-align:middle;" />
it works, the page login us, in chrome & safari only (not in FF and IE)
but if you remove value="submit" it no longer work, and if you add onclick"whatever" it no longer work too

so i can make it work in chrome and safari only.. weird

maybe could the problem be in php code? or the input button is not right?