How To Make Image Buttons Act As Submit Button

SaNJ

Aug 15 2008, 11:44 PM

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

CODE

<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.

Comment/Reply (w/o sign-up)

Nabb

Aug 16 2008, 05:31 AM

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

CODE

java script:document.nameoftheform.submit()

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

Comment/Reply (w/o sign-up)

Erdemir

Aug 16 2008, 07:24 AM

Try this one,

CODE

<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>

Comment/Reply (w/o sign-up)

hitmanblood

Aug 18 2008, 11:50 AM

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.

CODE

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.

Comment/Reply (w/o sign-up)

Erdemir

Aug 18 2008, 11:54 AM

QUOTE(hitmanblood @ Aug 18 2008, 02:50 PM)

CODE

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

Comment/Reply (w/o sign-up)

SaNJ

Aug 19 2008, 02:09 PM

QUOTE(hitmanblood @ Aug 18 2008, 05:20 PM)

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.

CODE

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.

Comment/Reply (w/o sign-up)

hitmanblood

Aug 19 2008, 03:36 PM

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.

CODE

<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="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

Comment/Reply (w/o sign-up)

PhyberOptycs

Aug 19 2008, 04:24 PM

QUOTE(hitmanblood @ Aug 19 2008, 11:36 AM)

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.

CODE

......

?>
<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!

Comment/Reply (w/o sign-up)

hitmanblood

Aug 19 2008, 05:18 PM

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

Comment/Reply (w/o sign-up)

(G)John

Sep 4 2009, 03:04 AM

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

Comment/Reply (w/o sign-up)