Link to home
Start Free TrialLog in
Avatar of natsully
natsullyFlag for United States of America

asked on

Adding Images in Form Fieldsets

Currently I have a order form to streamline some internal orders.

It works correctly but I want to add thumbnails of the products above the checkbox.
As of right now when I try and insert any sort of picture it messed the form up or does not show up!

Can images be placed inside fieldsets?
How can I add thumbnails of my products?
<?php
if( !empty($_POST['Name']) && !empty($_POST['Email']) && !empty($_POST['Site']) )
{
	header("Content-type: text/plain"); 
	//if you set this to false you will get "No Worries Posters". 
	//When true, you just get "Posters"
	$RemoveNoWorriesPrefix=true; 
	//list or regional managers to be cc
	$RegionalManager=array();
	$RegionalManager['A']="PersonA@company.com";
	$RegionalManager['B']="PersonB@company.com";
	$RegionalManager['C']="PersonC@company.com";
	$RegionalManager['D']="PersonD@company.com";
	$RegionalManager['E']="PersonE@company.com";
	$RegionalManager['F']="PersonF@company.com"; 
	
      $submittedData="";
	 
      $submittedData.="\nName:" . $_POST['Name'];
      $submittedData.="\nEmail:" . $_POST['Email'];
      $submittedData.="\nSite:" . $_POST['Site'];
      $submittedData.="\nRegional Manager:" . $_POST['regional_manager'];
	 
	 $fields=array('Standard_Supplies','No_Worries_Flyers','No_Worries_Posters','No_Worries_Banners','No_Worries_Postcards');
	foreach($fields as $arrName)
	{
		 if(isset($_POST[$arrName]))
		 {
		 	if($RemoveNoWorriesPrefix)
				$submittedData.="\n\n" . str_replace("No Worries ","",str_replace("_"," ",$arrName));
			else
				$submittedData.="\n\n" . str_replace("_"," ",$arrName); 
		      foreach($_POST[$arrName] as $value)
		      {
		            $k=$value."_quantity";
		            if(!empty($_POST[$k]))
		                  $submittedData .= "\n\t".str_replace("_"," ",$value) . ": " . $_POST[$k];
		      }
		 }
	}
	 $headers="";
	 if(!empty($_POST['regional_manager']))
	 	$headers="CC:". $RegionalManager[ $_POST['regional_manager'] ];
      if(!empty($submittedData))
      {
            //mail("natalie.teinert@company.com","Order details",$submittedData,$headers);
		 echo $submittedData;
            echo "\n\nThank you!";
      }
      exit;
}
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<style type="text/css">
.row1{float:left;width:24%;}
.row2{float:left;width:20%;}
fieldset{padding:5px;}
fieldset div select{display:block;}
legend{font-weight:bold;background-color:white;}
fieldset fieldset{border:0px; border-top:1px dashed black;margin-top:1em;}
</style>
 
</head>
<body>
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF']?>">
  <label><strong>* Name:</strong></label>
  <input name="Name" type="text" id="Name" size="27">
  <br><br>
  <label><strong>* Email:</strong></label>
  <input name="Email" type="text" id="Email" size="27">
  <br><br>
<label><strong>* Site:</strong></label>
<input name="Site" type="text" id="Site" size="29">
<br>
<br>
<label>Regional Manager
<select name="regional_manager" id="regional_manager">
  <option  value="">-</option>
  <option value="A">Person A</option>
  <option value="B">Person B</option>
  <option value="C">Person C</option>
  <option value="D">Person D</option>
  <option value="E">Person E</option>
  <option value="F">Person F</option>
</select>
</label>
<br>
<br>
  <fieldset><legend>Standard Supplies</legend> 
            <div class="row1"><input type="checkbox" name="Standard_Supplies[]" value="RateSheet" />Ratesheet <select name="RateSheet_quantity"><option value="0"  >-</option>
		  <option value="500">500</option>
		  <option value="1000">1000</option>
		  <option value="1500">1500</option>
		  <option value="2000">2000</option>
            <option value="2500">2500</option>
            <option value="3000">3000</option>
            <option value="3500">3500</option>
            <option value="4000">4000</option>
            <option value="4500">4500</option>
            <option value="5000">5000</option>
            </select></div>
            <div class="row1"><input type="checkbox" name="Standard_Supplies[]" value="Table_Drape" />Table Drape <select name="Table_Drape_quantity"><option value="0"  >-</option>
                <option value="1 - 6 ft.">1 - 6 ft.</option>
                <option value="2 - 6 ft.">2 - 6 ft.</option>
                <option value="3 - 6 ft.">3 - 6 ft.</option>
                <option value="1 - 8 ft.">1 - 8 ft.</option>
                <option value="2 - 8 ft.">2 - 8 ft.</option>
                <option value="3 - 8 ft.">3 - 8 ft.</option>
            </select></div> 
            <div class="row1"><input type="checkbox" name="Standard_Supplies[]" value="Banner_Stands" />Banner Stands <select name="Banner_Stands_quantity"><option value="0" >-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select></div>
  <div class="row1"><input type="checkbox" name="Standard_Supplies[]" value="T_Shirts" />T-Shirts <select name="T_Shirts_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
      <option value="2500">2500</option>
      <option value="3000">3000</option>
      <option value="3500">3500</option>
      <option value="4000">4000</option>
      <option value="4500">4500</option>
      <option value="5000">5000</option>
  </select></div>
  </fieldset>
<br>
   <fieldset><legend>No Worries - Flyers</legend>
            <div class="row1"><input type="checkbox" name="No_Worries_Flyers[]" value="ClassFlyer" />Class In Ten Minutes? <select name="ClassFlyer_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row1"><input type="checkbox" name="No_Worries_Flyers[]" value="ApartmentFlyer" />Apartment Hunting? <select name="ApartmentFlyer_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row1"><input type="checkbox" name="No_Worries_Flyers[]" value="RoommateFlyer" />Roommate Hasn't Paid Up? <select name="RoommateFlyer_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
  <div class="row1"><input type="checkbox" name="No_Worries_Flyers[]" value="RentsFlyer" />'Rents Cramping Your Style? <select name="RentsFlyer_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
      <option value="2500">2500</option>
      <option value="3000">3000</option>
      <option value="3500">3500</option>
      <option value="4000">4000</option>
      <option value="4500">4500</option>
      <option value="5000">5000</option>
  </select></div>
  </fieldset>
<br>
   <fieldset><legend>No Worries - Posters</legend>
            <div class="row1"><input type="checkbox" name="No_Worries_Posters[]" value="ClassPoster" />Class In Ten Minutes? <select name="ClassPoster_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row1"><input type="checkbox" name="No_Worries_Posters[]" value="ApartmentPoster" />Apartment Hunting? <select name="ApartmentPoster_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row1"><input type="checkbox" name="No_Worries_Posters[]" value="RoommatePoster" />Roommate Hasn't Paid Up? <select name="RoommatePoster_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
  <div class="row1"><input type="checkbox" name="No_Worries_Posters[]" value="RentsPoster" />'Rents Cramping Your Style? <select name="RentsPoster_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
      <option value="2500">2500</option>
      <option value="3000">3000</option>
      <option value="3500">3500</option>
      <option value="4000">4000</option>
      <option value="4500">4500</option>
      <option value="5000">5000</option>
  </select></div>
  </fieldset>
<br>
   <fieldset><legend>No Worries - Banners</legend>
            <div class="row1"><input type="checkbox" name="No_Worries_Banners[]" value="ClassBanner" />Class In Ten Minutes? <select name="ClassBanner_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row1"><input type="checkbox" name="No_Worries_Banners[]" value="ApartmentBanner" />Apartment Hunting? <select name="ApartmentBanner_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row1"><input type="checkbox" name="No_Worries_Banners[]" value="RoommateBanner" />Roommate Hasn't Paid Up? <select name="RoommateBanner_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
  <div class="row1"><input type="checkbox" name="No_Worries_Banners[]" value="RentsBanner" />'Rents Cramping Your Style? <select name="RentsBanner_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
      <option value="2500">2500</option>
      <option value="3000">3000</option>
      <option value="3500">3500</option>
      <option value="4000">4000</option>
      <option value="4500">4500</option>
      <option value="5000">5000</option>
  </select></div>
  </fieldset>
<br>
   <fieldset><legend>No Worries - Postcards</legend>
            <div class="row2"><input type="checkbox" name="No_Worries_Postcards[]" value="ClassPostcard" />Class In Ten Minutes? <select name="ClassPostcard_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row2"><input type="checkbox" name="No_Worries_Postcards[]" value="ApartmentPostcard" />Apartment Hunting? <select name="ApartmentPostcard_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
            <div class="row2"><input type="checkbox" name="No_Worries_Postcards[]" value="RoommatePostcard" />Roommate Hasn't Paid Up? <select name="RoommatePostcard_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
                <option value="2500">2500</option>
                <option value="3000">3000</option>
                <option value="3500">3500</option>
                <option value="4000">4000</option>
                <option value="4500">4500</option>
                <option value="5000">5000</option>
            </select></div>
  <div class="row2"><input type="checkbox" name="No_Worries_Postcards[]" value="RentsPostcard" />'Rents Cramping Your Style? <select name="RentsBanner_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
      <option value="2500">2500</option>
      <option value="3000">3000</option>
      <option value="3500">3500</option>
      <option value="4000">4000</option>
      <option value="4500">4500</option>
      <option value="5000">5000</option>
  </select></div>
  <div class="row2"><input type="checkbox" name="No_Worries_Postcards[]" value="ForeignPostcard" />Foreign City?<select name="ForeignPostcard_quantity"><option value="0" >-</option><option value="500">500</option><option value="1000">1000</option><option value="1500">1500</option><option value="2000">2000</option>
      <option value="2500">2500</option>
      <option value="3000">3000</option>
      <option value="3500">3500</option>
      <option value="4000">4000</option>
      <option value="4500">4500</option>
      <option value="5000">5000</option>
  </select></div>
  </fieldset>
<br>
<br>
<input type="submit" name="Submit" id="Submit" value="Submit"> 
</form>
</body>
</html>

Open in new window

Avatar of hielo
hielo
Flag of Wallis and Futuna image
>>Can images be placed inside fieldsets?
Yes

>>How can I add thumbnails of my products?

<div><input ...><br/>
<img src="yourimage.gif" widh="50" height="50"/><br/>
<select>...</select></div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of natsully
natsully
Flag of United States of America image

ASKER

that's the code I was using, I guess I just didn't have it in the right spot?
Thanks again!
Avatar of natsully
natsully
Flag of United States of America image

ASKER

Thanks again!
Avatar of hielo
hielo
Flag of Wallis and Futuna image
you are welcome