How do I make a form Submit Button a picture

kpetsche20 · March 23, 2009

How do I make a form Submit Button a picture with the value/name of calculate?

Floydian · March 23, 2009

Well, since this is the javascript forum, I'll skip over using a <button> tag and go straight to the <img> tag.

Put an onclick="" dealy on that img tag and in your event handler function, use

document.getElementById('myForm').submit();

and bam!

kpetsche20 · March 23, 2009

Hey thanks for the reply, I'm new when it comes to javascript (I only know PHP), so I'm not really sure how to write the code, is there anyway you can write it here so I can copy paste it into my code.

<?php
if($_POST['calculate'])
{
$total = $_POST['required'] + $_POST['one'] + $_POST['two'] + $_POST['three'] + $_POST['four'] + $_POST['five'] + $_POST['six'] + $_POST['seven'] + 
$_POST['eight'] + $_POST['nine'] + $_POST['ten'] + $_POST['eleven'] + $_POST['tweleve'];
}

if($_POST['submit'])
{
  if($_POST['one'])
  {
  $one = 'Statistik';
  }
  if($_POST['two'])
  {
  $two = 'Gastbok';
  }
  if($_POST['three'])
  {
  $three = 'Mediemskap';
  }
  if($_POST['four'])
  {
  $four = 'Sokfunktion';
  }
  if($_POST['five'])
  {
  $five = 'Produkter';
  }
  if($_POST['six'])
  {
  $six = 'Fotogalleri';
  }
  if($_POST['seven'])
  {
  $seven = 'Kop och Salj';
  }
  if($_POST['eight'])
  {
  $eight = 'Blogg';
  }
  if($_POST['nine'])
  {
  $nine = 'Nyhetsbrevutskick';
  }
  if($_POST['ten'])
  {
  $ten = 'Forum';
  }
  if($_POST['eleven'])
  {
  $eleven = 'Community';
  }
  if($_POST['tweleve'])
  {
  $tweleve = 'Bokningssystem';
  }

$to = '[email protected]';

// subject
$subject = 'Beställning';

// message
$message = "
<html>
<head>
  <title></title>
</head>
<body>

Namn: ".$_POST['name']."
Företagsnamn: ".$_POST['for']."
E-post: ".$_POST['epost']."
Telefonnummer: ".$_POST['phone']."
Övrigt: ".$_POST['textarea']."
Products: 
".$_POST['required']."
$one
$two
$three
$four
$five
$six
$seven
$eight
$nine
$ten
$eleven
$tweleve
</body>
</html>
";

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers

$headers .= 'From:  <[email protected]>' . "\r\n";
$headers .= 'Cc: [email protected]' . "\r\n";
$headers .= 'Bcc: [email protected]' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);

echo "Message sent";

}
else
{
?>
<form name="name" method="POST">
<table width="700" height="600" border="0" cellpadding="6" cellspacing="0">
  <tr>
    <td valign="top" background="images/background.png"><table width="99%" border="0" align="center" cellpadding="6" cellspacing="0">
      <tr>
        <td width="34%">
	<input name="required" type="radio" value="199" checked>
	<img src="images/hemsidepaket.199.png" width="179" height="129"></td>
        <td width="32%" valign="top">asdfasfasfsadfasdfasfasf</td>
        <td width="34%" valign="top">
	<input type="image" src="images/calculate.png" value="calculate" alt="calculate" name="calculate"><br>
          <br>
          Total: <?php echo $total; ?></td>
      </tr>
      <tr>
       
    <td><p>
      <label>
      
      </label>
      
	   <?php 
	   if($_POST['one'])
	   { 
	   ?>
        <input name="one" type="checkbox" value="1.49" checked>
	   <?php
	   }
	   else
	   {
	   ?>
	   <input type="checkbox" name="one" value="1.49">
	   <?php
	   }
	   ?>
        
	  <img src="images/1.49.png" width="162" height="42"></p>
      <p>
	   <?php 
	   if($_POST['two'])
	   { 
	   ?>
        <input name="two" type="checkbox" value="3.19" checked>
	   <?php
	   }
	   else
	   {
	   ?>
	   <input type="checkbox" name="two" value="3.19">
	   <?php
	   }
	   ?>
        <img src="images/3.19.png" width="162" height="42"></p>
      <p>
	  <?php
	  if($_POST['three'])
	  {
	  ?>
        <input type="checkbox" name="three" value="4.39" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	  <input type="checkbox" name="three" value="4.39" checked>
	  <?php
	  }
	  ?>
        <img src="images/4.39.png" width="162" height="42"></p>
      <p>
       <?php
	  if($_POST['four'])
	  {
	  ?>
	  <input type="checkbox" name="four" value="5.10" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	  <input type="checkbox" name="four" value="5.10">
	  <?php
	  }
	  ?>
        <img src="images/5.10.png" width="162" height="42"><br>
        <br>
      </p></td>
        <td valign="top"><p>
       <?php
	  if($_POST['five'])
	  {
	  ?>
	  <input type="checkbox" name="five" value="6.19" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	  <input type="checkbox" name="five" value="6.19">
	  <?php
	  }
	  ?>
          <img src="images/6.199.png" width="162" height="42"></p>
          <p>
            <?php
	  if($_POST['six'])
	  {
	  ?>
		<input type="checkbox" name="six" value="7.19" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	  <input type="checkbox" name="six" value="7.19">
	  <?php
	  }
	  ?>
            <img src="images/7.19.png" width="162" height="42"></p>
          <p>
            <?php
	  if($_POST['seven'])
	  {
	  ?>
		<input type="checkbox" name="seven" value="8.14" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	  <input type="checkbox" name="seven" value="8.14">
	  <?php 
	  }
	  ?>
            <img src="images/8.149.png" width="162" height="42"></p>
          <p>
            <?php
	  if($_POST['eight'])
	  {
	  ?>
		<input type="checkbox" name="eight" value="9.79" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	  <input type="checkbox" name="eight" value="9.79">
	  <?php
	  }
	  ?>
            <img src="images/9.79.png" width="162" height="42"></p></td>
        <td valign="top"><p>
          <?php
	  if($_POST['nine'])
	  {
	  ?>
	  <input type="checkbox" name="nine" value="2.79" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	  <input type="checkbox" name="nine" value="2.79">
	  <?php
	  }
	  ?>
          <img src="images/2.79.png" width="193" height="42"></p>
          <p>
            <?php
	  if($_POST['ten'])
	  {
	  ?>
		<input type="checkbox" name="ten" value="10.19" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	    <input type="checkbox" name="ten" value="10.19">
	  <?php
	  }
	  ?>
            <img src="images/10.199.png" width="162" height="42"></p>
          <p>
            <?php
	  if($_POST['eleven'])
	  {
	  ?>
		<input type="checkbox" name="eleven" value="11.19" checked>
	  <?php
	  }
	  else
	  {
	  ?>
	   <input type="checkbox" name="eleven" value="11.19" checked>
	  <?php
	  }
	  ?>
            <img src="images/11.199.png" width="162" height="42"></p>
          <p>
             <?php
	  if($_POST['tweleve'])
	  {
	  ?>
		<input type="checkbox" name="tweleve" value="12.19" checked>
	   <?php
	   }
	   else
	   {
	   ?>
	   <input type="checkbox" name="tweleve" value="12.19" >
	   <?php
	   }
	   ?>
            <img src="images/12.199.png" width="182" height="42">

		</p></td>


      </tr>
    </table>
      <br>
      <table width="99%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="17%" valign="top">Namn: </td>
          <td width="28%" valign="top"><input type="text" name="namn"></td>
          <td width="55%" rowspan="5" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="6">
              <tr>
                <td valign="top">Övrigt:
                  <textarea name="textarea" cols="30" rows="5"></textarea>
                  <input type="image" src="images/Submit.png" value="submit" name="submit"></td>
              </tr>
            </table>            </td>
        </tr>
        <tr>
          <td valign="top">Företagsnamn:</td>
          <td width="28%" valign="top"><input type="text" name="for"></td>
        </tr>
        <tr>
          <td valign="top">E-post: </td>
          <td width="28%" valign="top"><input type="text" name="epost"></td>
        </tr>
        <tr>
          <td valign="top">Telefonnummer: </td>
          <td width="28%" valign="top"><input type="text" name="phone"></td>
        </tr>
        <tr>
          <td valign="top"> </td>
          <td valign="top"> </td>
        </tr>
      </table></td>
  </tr>
</table>
</form>
<?php
}
?>

kpetsche20 · March 23, 2009

can anyone help with this

Adam · March 23, 2009

Some new comers may not realize there's a standard HTML tag for this...

<input type="image" src="img/submit.gif" />

If you wish to run any kind of JavaScript validation on the form before submitting, add:

<form action="..." method="..." onsubmit="validateTheForm();">

Hope this helps!

Adam

Sign In

How do I make a form Submit Button a picture

Recommended Posts

kpetsche20

Link to comment

Share on other sites

Floydian

Link to comment

Share on other sites

kpetsche20

Link to comment

Share on other sites

kpetsche20

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information