8 Replies - 3729 Views - Last Post: 02 August 2010 - 04:11 AM

#1 ArcticFox  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 83
  • Joined: 05-April 09

Submit button with image

Posted 01 August 2010 - 05:55 AM

Long time since i haven't posted on these forums but back to topic, recently I tried to make my submit button to use an image instead of the default grey button but after doing so it doesn't work only redirects you, I have searched google for a fix but no luck this is the code I got for now
<input type="image" src="images/loginbutton.gif" border="0" alt="Submit Form" value="submit">

Any help would be appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Submit button with image

#2 rmccarter721  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 139
  • Joined: 10-September 07

Re: Submit button with image

Posted 01 August 2010 - 06:30 AM

According to http://pactumweb.com.../formbutton.php

<input type="image" src="images/loginbutton.gif" alt="submit button" />

Was This Post Helpful? 1
  • +
  • -

#3 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3069
  • View blog
  • Posts: 10,765
  • Joined: 08-August 08

Re: Submit button with image

Posted 01 August 2010 - 07:29 AM

If you want to get really fancy, you can style a button and onclick run a Javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing</title>
<link href="shadebutton.css" rel="stylesheet" type="text/css" />
<LINK REL="SHORTCUT ICON" HREF="faviconT.ico">
<script type="text/javascript">
function validate_submit()
{
	alert("This code could validate the input before calling ajax routines to submit the data. Be sure to validate again on the server, since Javascript can only be used to aid the user and is not secure.");
}
</script>
</head>
<body>
<input type="button" class="mybutton" onclick="validate_submit();" value ="submit">
</body>
</html>


shadebutton.css
@charset "UTF-8";
/* CSS Document */

input.mybutton {
	margin: 0 auto;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	text-align: center;
	background-color: #ffaa99;
}

input.mybutton:hover {
	font-size: 15px;
	text-align: center;
	background-color: #994433;

}



Oh, and since this is really more an html & css question than php, I'm moving it there.
Was This Post Helpful? 0
  • +
  • -

#4 ArcticFox  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 83
  • Joined: 05-April 09

Re: Submit button with image

Posted 01 August 2010 - 08:36 AM

Furnfield it's still the same, CTphpnwb I don't know how to use java so I try to keep it in php but I will give it a shot
edit: I won't change anything only a popup when I click submit also using the default submit button works

This post has been edited by ArcticFox: 01 August 2010 - 09:06 AM

Was This Post Helpful? 0
  • +
  • -

#5 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3069
  • View blog
  • Posts: 10,765
  • Joined: 08-August 08

Re: Submit button with image

Posted 01 August 2010 - 10:25 AM

  • Javascript != Java. They're completely different languages.
  • There is no php anywhere in this topic to this point. It's all html, css and javascript.
  • If you're going to learn php or javascript you really should learn to use functions and the one I provided is an easy example to follow.

Was This Post Helpful? 0
  • +
  • -

#6 ArcticFox  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 83
  • Joined: 05-April 09

Re: Submit button with image

Posted 01 August 2010 - 12:59 PM

yes true I'm sorry, I do know how to use functions in php but simply no idea in javascript, you're code only changed the background color to the button I will try to add the image, and again sorry for not expressing myself well.
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Submit button with image

Posted 01 August 2010 - 03:02 PM

plain and simple (without text though)
<button>
	<img src="…" width="…" height="…" alt="submit">
</button>

This post has been edited by Dormilich: 01 August 2010 - 03:03 PM

Was This Post Helpful? 0
  • +
  • -

#8 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3069
  • View blog
  • Posts: 10,765
  • Joined: 08-August 08

Re: Submit button with image

Posted 01 August 2010 - 03:54 PM

Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing</title>
<link href="shadebutton.css" rel="stylesheet" type="text/css" />
<LINK REL="SHORTCUT ICON" HREF="faviconT.ico">
<script type="text/javascript">
function validate_submit()
{
	alert("This code could validate the input before calling ajax routines to submit the data. Be sure to validate again on the server, since Javascript can only be used to aid the user and is not secure.");
}

function changeimage()
{
	var mybutton = document.getElementById('myimage');
	mybutton.src="red.png";
}
function changeback()
{
	var mybutton = document.getElementById('myimage');
	mybutton.src="yellow.png";
}
</script>
</head>
<body>
<input type="button" class="mybutton" onclick="validate_submit();" value ="submit"><br><br>
<img id="myimage" src="yellow.png" onmouseover="changeimage();" onmouseout="changeback();" onclick="validate_submit();">
</body>
</html>

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#9 ArcticFox  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 83
  • Joined: 05-April 09

Re: Submit button with image

Posted 02 August 2010 - 04:11 AM

well I did a little more research and I found the issue
if ( isset( $_POST['submit_x'] ) )


the _x makes all the difference, anyway thanks for the help guys
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1