Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

How To Make Image Buttons Act As Submit Button

Started by SaNJ, Aug 15 2008 11:44 PM

17 replies to this topic

#1 SaNJ

    Member [Level 1]

  • Kontributors
  • PipPipPipPip
  • 71 posts
  • Gender:Male
  • myCENT:58.14

Posted 15 August 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

<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 by electriic ink, 15 September 2009 - 05:30 PM.

#2 Nabb

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 244 posts
  • Gender:Male
  • Location:Australia
  • myCENT:58.68
  • Spam Patrol

Posted 16 August 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
java script:document.nameoftheform.submit()

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

Edited by Nabb, 16 August 2008 - 05:31 AM.

#3 Erdemir

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 223 posts
  • Gender:Male
  • Location:Istanbul, Turkey
  • Interests:Interested in Mechanical Engineering

Posted 16 August 2008 - 07:24 AM

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 by Erdemir, 16 August 2008 - 07:27 AM.

#4 hitmanblood

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 788 posts
  • Gender:Male
  • Location:mreža

Posted 18 August 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.

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

#5 Erdemir

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 223 posts
  • Gender:Male
  • Location:Istanbul, Turkey
  • Interests:Interested in Mechanical Engineering

Posted 18 August 2008 - 11:54 AM

View Posthitmanblood, on Aug 18 2008, 02:50 PM, said:

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

#6 SaNJ

    Member [Level 1]

  • Kontributors
  • PipPipPipPip
  • 71 posts
  • Gender:Male
  • myCENT:58.14

Posted 19 August 2008 - 02:09 PM

View Posthitmanblood, on Aug 18 2008, 05:20 PM, said:

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.

#7 hitmanblood

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 788 posts
  • Gender:Male
  • Location:mreža

Posted 19 August 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.

<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

#8 PhyberOptycs

    Newbie [Level 2]

  • Kontributors
  • PipPip
  • 37 posts

Posted 19 August 2008 - 04:24 PM

View Posthitmanblood, on Aug 19 2008, 11:36 AM, said:

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">
<!--
<input type="submit" value="submit">
-->
.......

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!

#9 hitmanblood

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 788 posts
  • Gender:Male
  • Location:mreža

Posted 19 August 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

#10 iGuest

    Hail Caesar!

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,876 posts
  • Interests:Trap17 Free Web Hosting, No Ads

Posted 04 September 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
Back to your Secret HideOut · Next Unread Topic →

Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Xisto Network Sites
  3. → your Secret HideOut
  4. Welcome - Start here! - Free Web Hosting