How To Make Image Buttons Act As Submit Button

SaNJ · August 15, 2008

Hi guys I m making a personal website ....
I asked in the forum how to create and use images as buttons...thanks for your help..
I can make them work as links....give some hovering effects etc...they work very well..untill I use them in forms and use them as SUBMIT or RESET button...when I do this nothing happens on clicking the image button...
the code I use is like

<input type='image' src='image.png' onmouseover='this.src='imag1.png'' onmouseout='this.src='image.png'' name ='cmd';

but there is problem in making them act as SUBMIT or RESET button.
I have tried very hard to make it work, but didn't succeed ....
I know html and CSS quite well but , don't know....Javascript...
Is there any way to achieve this..please....help

If u have code it will be very helpful...
thanks in advance.
Edited September 15, 2009 by electriic ink (see edit history)

Nabb · August 16, 2008

If I recall correctly, there's a submit() function associated with forms. You could thus link (with an anchor tag) the image to

java script:document.nameoftheform.submit()

edit) ..except without the space between java and script, the tags keep putting it there

Edited August 16, 2008 by Nabb (see edit history)

Erdemir · August 16, 2008

Try this one,

<form name="form1" action="target_file.php" method="GET or POST"> //Your form fields//Here is the submit button<a href="java script:document.form1.submit();" title="Submit the Form"><img src="image.png" onmouseover="this.src='image2.png';" onmouseout="this.src='image.png';" border="0"></a></form>

Edited August 16, 2008 by Erdemir (see edit history)

hitmanblood · August 18, 2008

Well since there are a lot of people that don\t like using javascript predominantly the beginners.

Here is the same thing just without javascript understandable to everyone with basic html knowledge.

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">

Important thing is to notice that type of input has been changed. And good programing is to write alt so that if image doesn't load your users would be able to find and of course be able to use this submit button.

On the other hand royalties for this example go to codetoad.

Erdemir · August 18, 2008

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">

Sanj, want to make a hover effect submit button. I don't think that can make a hover effect.

SaNJ · August 19, 2008

Well since there are a lot of people that don\t like using javascript predominantly the beginners.
Here is the same thing just without javascript understandable to everyone with basic html knowledge.
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Important thing is to notice that type of input has been changed. And good programing is to write alt so that if image doesn't load your users would be able to find and of course be able to use this submit button.

On the other hand royalties for this example go to codetoad.

hey hitmanblood
I u notice that u have written the same code as I have written....
I told u ...that its not working ...It is acting as a button but not as a submit button.

hitmanblood · August 19, 2008

After you told that it doesn't work I was intrigued why the hell this wouldn't work. And wrote small script to check it out whether it works or not. Now it works and you may have any image as submit button.

<html><head></head><body><form method="post" action="test.php" target="_self"><?if(empty($_POST['tester'])){		echo 'doesn\'t work';	echo 'lol '.$_POST['tester'];	}else{		echo 'works<br>';	echo $_POST['tester'];	}?><input type="text" name="tester"><!--<input type="submit" value="submit">--><INPUT TYPE="image" SRC="http://localhost/awesomemetalcamp.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form" value="submit"></form></body></html>

The main difference from the previous one is that there is added value="submit" this is obligatory in order to work.

Best Regards hopefully I may have helped you,

Hitman

PhyberOptycs · August 19, 2008

After you told that it doesn't work I was intrigued why the hell this wouldn't work. And wrote small script to check it out whether it works or not. Now it works and you may have any image as submit button.
......?><input type="text" name="tester">.......
The main difference from the previous one is that there is added value="submit" this is obligatory in order to work.

Best Regards hopefully I may have helped you,

Hitman

Man, you beat me by a couple of minutes. I was also gonna say that the type='submit' was missing from all of these. Oh well, good job!

hitmanblood · August 19, 2008

no man you've got it all wrong it is not type submit it is value="submit". Type submit is for the very basic submit button value submit means that the following picture will be used instead of submit button that is as submit button.Best Regards

iGuest · September 4, 2009

To get the image to work as a submit button on my form I also had to use name="submit". So my line looks like this:

<input type="image" src="images/submit.Gif" alt="Submit" name="submit" value="Submit">

Just posting in case someone else needs help. Got here with Google, thanks everyone before!

-reply by John

iGuest · September 16, 2009

using image to busmitt a form (I wanted to make a 2 line submitt button)How To Make Image Buttons Act As Submit Button

<form  name="form_%variable%" action="f_update_appointment.Cfm" method="post"><select>loop through options</select><img src="/begincentral/includes/images/sap_mout.Jpg"  title="Submit the Form" onclick="form_%variable%.Submit();" onmouseover="this.Src='/begincentral/includes/images/sap_mover.Jpg';" onmouseout="this.Src='/begincentral/includes/images/sap_mout.Jpg';" border="0"></form>

worked for me. Ie 6 corporate intranet

-reply by This worked for me

iGuest · November 25, 2009

Try this.

<div id="buttons">    <form method="post" action="sendsomewhere">	    <button type="submit">	    <img src="images/gallnk.Png" height="170" width="205" alt="Gallery link" align="left">	    </button>    </form></div>

iGuest · December 24, 2009

I have created image button for search, its working in firefox but not working in IEKindly suggest.

<td>	  <input type="image" src="../Mahendi Matrimonial/btnsearch.Gif" alt="Matrimonial Search" height="19" width="49" name="Submit" value="Search" onClick="document.Frm_search.Action='search_mprofile.Php?mode=search';this.Form.Action.Submit();" tabindex="11"/></td>

mem · May 12, 2010

...

The main difference from the previous one is that there is added value="submit" this is obligatory in order to work.

Best Regards hopefully I may have helped you,

Hitman

Thanks for this test case Hitman, I was struggling why my image submit button that didn't work. And the required value attribute is quite weird.

It doesn't need to have "submit" anything should do, but I'm still not getting why value attribute is required on this type of input field.

Just a note to all who have been posting before: the alt attribute is not supported on <input> element at this time. It doesn't validate.

Kind Regards,

Márcio

iGuest · April 25, 2011

Try this one,

<form name="form1" action="target_file.php" method="GET or POST"> //Your form fields//Here is the submit button<a href="java script:document.form1.submit();" title="Submit the Form"><img src="image.png" onmouseover="this.src='image2.png';" onmouseout="this.src='image.png';" border="0"></a></form>

thanks this worked out for me

Sign In

How To Make Image Buttons Act As Submit Button

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information