Using a picture as a submit button in an input tag

spiceydog · June 27, 2008

I am trying to get a simple input tag using a photo to submit some stuff.

Here is what I have:

I think that should work... so maby it's something else? But when I change type="image" to type="submit" it works then... but that's not what i want...

PFMaBiSmAd · June 27, 2008

Read this on using an image for a submit button - http://www.php.net/manual/en/faq.html.php#faq.html.form-image

spiceydog · June 27, 2008

thats exactly what I used to make this one. just isn't posting...

PFMaBiSmAd · June 27, 2008

Then you would need to post your code for anyone in a Forum to be able to tell why it is not working.

TheFilmGod · June 27, 2008

Why use <input type="image" /> ? ???

Use <button type="submit"></button> instead....

If you'd like I can post my whole code (html/css) to help you implement it properly.

spiceydog · June 27, 2008

Ok here is the entire script:

<?php
include 'input';
if(isset($_COOKIE['ID_my_site'])) 
{ 
$username = $_COOKIE['ID_my_site']; 
$pass = $_COOKIE['Key_my_site']; 
$check = mysql_query("SELECT * FROM users WHERE username = '$username'")or die(mysql_error()); 
while($info = mysql_fetch_array( $check )) 
{ 
if ($pass != $info['password']) 
{
header("Location: mainpage.php");
}
else
{
?>
<?php
if(isset($_POST['btnSubmit'])){

  $_COOKIE['ID_my_site'] = mysql_real_escape_string(trim($_POST['user']));
  $details    = mysql_real_escape_string(trim($_POST['details']));
  $dl         = mysql_real_escape_string(trim($_POST['dl']));
  $rarpass    = mysql_real_escape_string(trim($_POST['rarpass']));
  $trackn     = mysql_real_escape_string(trim($_POST['trackn']));
  $genre      = mysql_real_escape_string(trim($_POST['genre']));
  $theyear    = mysql_real_escape_string(trim($_POST['theyear']));
  $art        = mysql_real_escape_string(trim($_POST['art']));
  $artist     = mysql_real_escape_string(trim($_POST['artist']));
  $albumname  = mysql_real_escape_string(trim($_POST['albumname']));
  if ($albumname == '')
    die("You forgot the name of the album");
  if ($dl == '')
    die("Download Linkz field is empty");
  if ($artist == '')
    die("You forgot the to fill in the artist field");
  if(!is_array($_POST['tracks']))
    die("You need to fill out atleast one track");
  $inserts = array();
  foreach($_POST['tracks'] as $track){
    $track = mysql_real_escape_string(trim($track));
    if(empty($track)) continue;
    $inserts[] = "('$track', '$details', '$dl', '$trackn',
'$genre', '$theyear', '$art', '$artist', '$albumname', '$username')";
  }
  if(count($inserts)){
    $query = "INSERT INTO
albuminfo(track,details,dl,trackn,genre,theyear,art,artist,albumname,user) VALUES " . implode(',',$inserts);
    mysql_query($query) or die(mysql_error());
  }else
    die("Only empty tracks found");
}
?>
<html>
<head>
<title>Muzic - Upload Albums</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<? include("bigheader.php"); ?>
<style type="text/css">
<!--
.style4 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>
<script language="Javascript" type="text/javascript"> 
<!-- 
function addTrack(area,field,limit) { 
  var list = document.getElementById('tracks_area');
  var item = document.createElement('LI');
  item.innerHTML = '<input type="text" name="tracks[]" />';
  list.appendChild(item);
} 
//--> 
</script> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (other.psd) -->
<center><? include("bigpremenu.php"); ?><? include("usernav.php"); ?><? include("bigprecontent.php"); ?>
          <table width="100%" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td width="70"> </td>
    <td><span class="style3">Share an Album Download</span><br>
          <ul class="style1 style4">
          <li>Must be hosted on Rapidshare</li>
          <li>Must be compressed in .rar or .zip format</li>
          <li>You may only upload albums, NOT  individual tracks.</li>
          </ul>
          
<form name="albuminfo" method="POST" action="upload.php"> 
<span class="style2">Artist Name: </span><br>
<input name="artist" type="text" size="20" maxlength="50"><br>
<span class="style2">Album Name:</span><br>
<input name="albumname" type="text" size="20" maxlength="50"><br>  
<span class="style2">Download Links:</span><br> 
<textarea name="dl" cols="40" rows="3"></textarea><br>
<span class="style2">Password (If Applicable):</span><br> 
<input name="rarpass" type="text" size="20" maxlength="50"><br>  
<span class="style2">Genre:</span><br> 
<select name="genre"> 
<option value="" selected>--Select Your Genre--</option> 
<option value="metal">Metal</option> 
<option value="rock">Rock</option>
<option value="raphop">Alternative</option> 
<option value="raphop">Rap/Hip-Hop</option> 
<option value="country">Country</option> 
<option value="folk">Folk</option> 
<option value="classical">Classical</option> 
<option value="techtrance">Techno/Trance</option>
<option value="Industrial">Industrial</option>
<option value="Indie">Indie</option>
<option value="Pop">Pop</option>
<option value="Other">Other</option> 
</select><br> 
<span class="style2">Year: </span><br>
<input name="theyear" type="text" size="4" maxlength="4"><br> 
<span class="style2">Artwork (Image URL): </span><br>
<input name="art" type="text" size="20" maxlength="50"><br>
<span class="style2">Track List: <br>
<ol id="tracks_area"> 
<li><input type="text" name="tracks[]" /></li> 
<li><input type="text" name="tracks[]" /></li> 
<li><input type="text" name="tracks[]" /></li> 
<li><input type="text" name="tracks[]" /></li> 
<li><input type="text" name="tracks[]" /></li> 
</ol> </span>
<input type="button" value="Add track Field" onClick="addTrack();" /><br><br>
<span class="style2">Extra Details:</span><br>
<textarea name="details" cols="19" rows="2"></textarea><br><br>
<input name="btnSubmit" type="image" value="Post Muzic" src="images/upload.jpg"> 
</form> </td>
  </tr>
</table>
  <? include("bigfooter.php"); ?>
<?php
} 
} 
} 
else 

//if the cookie does not exist, they are taken to the login screen 
{ 
header("Location: login.php");
} 
?>

ToonMariner · June 27, 2008

button type="submit" is apparently not as widely supported as you'd think...

use a normal input type=submit and style it well.....

spiceydog · June 27, 2008

err really? hmm... well i guess i'll look around a little more and make sure thats 100% true and then just style my buttons like crazy

anyone else here got any ideas?

haku · June 28, 2008

I have never found any particular problems with button type submit. I agree with TheFilmGod on using them. They are just a better solution.

TheFilmGod · June 28, 2008

button type="submit" is apparently not as widely supported as you'd think...

use a normal input type=submit and style it well.....

Um... if you aren't using IE7, or the latest versions of FF/Opera, then you are probably already used to things not working or having things screwed up. ha ha.

Here is my <button></button> code.

HTML:

<div class="button">
   <button class="submit" type="submit"><span>Register</span></button>
</div>

CSS:

#info .button {
margin: 15px auto 0 auto;
width: 100px;
padding: 5px 20px;
}
#info .submit {
background: url(../images/form/register.png) no-repeat;
border: 0;
color: #ff9600;
font-weight: bold;
width: 100px;
height: 22px;
margin: 0;
padding: 0;
}
#info .submit span {
visibility: hidden;
}
#info .submit:hover {
background: url(../images/form/register2.png) no-repeat;
cursor: pointer;
}

***********

Few things you need to know. The <button> thing is all styled by an image. The <span> are used to make the actual text invisible (this is just for google/search engines to "read" what it says on the image). When hovered, the image changes, and the cursor changes to a pointer.

<button> works better than <input type="image" />.... Think logically, the <input type="image" /> is an input type for IMAGES. It is used to capture where a user clicks on the image with the rectangular coordinate system and by using php. The fact that people use them to "submit" forms became a habit, - a bad habit - and the W3C finally transformed it into a way to submit forms. Which isn't the purpose of it. <button> on the other hand is the sole purpose to submit forms and is just a substitute for the <input type="submit" />

ToonMariner · June 29, 2008

I use all manner of browser to test things on - thats what web developers do...

I can't remember which phone it was it didn't like button type=....

If I do rememerb and that phone (probably a Nokia) is no longer in use then I may switch to button but to be honest I don't have any problems with inputy type="submit" ans its widely supported hence me not changing just yet...

Sign In

Using a picture as a submit button in an input tag

Recommended Posts

spiceydog

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

spiceydog

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

spiceydog

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

spiceydog

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information