i am making an order form . and using pics for that i have writtn code it works proprly but pics are displayed in one column i want to convert it in 3 columns. can any1 help me. my code is as follow:
PHP Code:
<?php session_start();
error_reporting(~E_NOTICE);?>
<!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>
<title>FAQ</title>
<meta charset="utf-8">
<title>FAQ</title>
<style type="text/css">
*{ padding:0px; margin:0px;}
.clear{ clear:both; float:none; height:0px; line-height:none;}
body{}
#main_area{ width:1000px; height:auto; margin:0px auto;}
#products, #cart-container {float:left;width:300px;}
#sum { width:270px;}
.qtybox { width:20px; margin-left:10px;margin-right:10px;}
.addqty{margin-left:10px;margin-right:10px;background-image:url('http://www.medgrill.ca/images/Buttons/PlusButton.jpg');background-repeat:no-repeat;border: none;width:24px;height:21px;cursor:pointer;}
.button {background-image:url('http://www.medgrill.ca/images/Buttons/AddButton.jpg');background-repeat:no-repeat;border: none;width:48px;height:21px;cursor:pointer;}
.qtyresult {border:1px solid grey;width:40px;margin-left:10px;}
#sumbited_data{ display:none;}
#last_page{display:none;}
#second_page{ width:450px; height:auto; float:right;margin-right: 220px;}
#third_page{width:450px; height:auto; float:right;margin-right: 220px;}
#third_page label { width:150px; height:25px; line-height:20px; text-align:left; display:inline-block; margin:0px 10px 5px 0px;}
#third_page input[type="text"]{ width:200px; height:20px; line-height:20px;}
textarea {visibility:hidden;}
</style>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Dynalight_400.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var json= [
{ "id": "1", "name": "Ground beef with salad", "price": "8.93", "image": "images/1.jpg" },
{ "id": "2", "name": "Ground beef with rice and salad", "price": "8.93", "image": "images/page2-img2.jpg" },
{ "id": "3", "name": "Mixed beef and chicken", "price": "8.93", "image": "images/page2-img3.jpg" },
{ "id": "4", "name": "Chicken with rice and salad", "price": "8.93", "image": "images/page2-img4.jpg" },
{ "id": "5", "name": "Beef steak with rice and salad", "price": "9.95", "image": "images/page2-img5.jpg" },
{ "id": "6", "name": "Boneless lamb kbab with rice and salad", "price": "9.95", "image": "images/page2-img6.jpg" },
{ "id": "7", "name": "Lamb chops with salad", "price": "12.95", "image": "images/page2-img7.jpg" },
{ "id": "8", "name": "Lamb chops with rice and salad", "price": "12.95", "image": "images/page2-img8.jpg" },
{ "id": "9", "name": "Chicken and ground beef with salad", "price": "10.95", "image": "images/page2-img9.jpg" },
{ "id": "10", "name": "Chicken and ground beef with rice and salad", "price": "10.95", "image": "images/page2-img10.jpg" },
{ "id": "11", "name": "Mixed beef, chicken and ground beef", "price": "11.95", "image": "images/page3-img1.jpg" },
{ "id": "12", "name": "Beef steak and ground beef", "price": "11.95", "image": "images/Originals/12.jpg" },
{ "id": "13", "name": "2Chicken with rice and salad", "price": "12.95", "image": "images/Originals/13.jpg" },
{ "id": "14", "name": "Boneless lamb and ground beef", "price": "12.95", "image": "images/Originals/14.jpg" },
{ "id": "15", "name": "Lamb chops and ground beef", "price": "14.95", "image": "images/Originals/15.jpg" },
{ "id": "16", "name": "Lamb chops with ground beef with rice and salad", "price": "14.95", "image": "images/Originals/16.jpg" },
{ "id": "17", "name": "Beef steak and chicken with rice and salad", "price": "14.95", "image": "images/Originals/17.jpg" },
{ "id": "18", "name": "Chicken plates", "price": "7.95", "image": "images/Originals/18.jpg" },
{ "id": "19", "name": "Lamb shank plates", "price": "8.93", "image": "images/Originals/19.jpg" },
{ "id": "20", "name": "Falafel plates", "price": "6.95", "image": "images/Originals/20.jpg" },
{ "id": "21", "name": "Beef plates", "price": "7.95", "image": "images/Originals/21.jpg" },
{ "id": "22", "name": "Chicken leg plate", "price": "7.95", "image": "images/Originals/22.jpg" },
{ "id": "23", "name": "Spinache plate with rice and salad", "price": "7.95", "image": "images/Originals/23.jpg" },
{ "id": "24", "name": "Chicken donair", "price": "5.94", "image": "images/Originals/24.jpg" },
{ "id": "25", "name": "falafel donair", "price": "4.94", "image": "images/Originals/25.jpg" },
{ "id": "26", "name": "Chicken salad", "price": "6.95", "image": "images/Originals/26.jpg" },
{ "id": "27", "name": "Beef donair", "price": "5.94", "image": "images/Originals/27.jpg" },
{ "id": "28", "name": "Ground beef wrap", "price": "5.94", "image": "images/Originals/28.jpg" },
{ "id": "29", "name": "Chicken special", "price": "5.94", "image": "images/Originals/29.jpg" },
{ "id": "30", "name": "sherazy salad", "price": "3.95", "image": "images/Originals/30.jpg" },
{ "id": "31", "name": "Pasta salad", "price": "3.95", "image": "images/Originals/31.jpg" },
{ "id": "32", "name": "Tabouli salad", "price": "3.95", "image": "images/Originals/32.jpg" },
{ "id": "33", "name": "Greek salad", "price": "3.95", "image": "images/Originals/33.jpg" }
];
$(document).ready(function () {
$.each(json, function (i, el) {
// alert(el.name+' - '+el.price);
$("#products").append(
el.name + '<br/>' +
'<img src=' + el.image + ' />' + '<br/>' +
el.price + '<br/>' +
'<input class="button" type="button" data-name=' + el.name + ' data-price=' + el.price + ' data-id=' + el.id + ' />' + '<br/><br/>'
);
});
$(".button").click(function () {
$(this).attr('disabled', 'disabled');
$("#cart").append(
'<div style="clear:both;margin-bottom:10px;">' +
'<span style="width:80px;display:block;float:left;">' + $(this).data('name') + '</span>' +
// HIDDEN Textbox
'<input type="hidden" name=' + $(this).data('id') + ' value=' + $(this).data('name') + ' />' +
'<input type="hidden" name=' + $(this).data('id')+'_price' + ' value=' + $(this).data('price') + ' />' +
'<input readonly="true" class="qtybox" type="text" id=' + $(this).data('id') + '_qty' + ' name=' + $(this).data('id') + '_qty' + ' value=0 />' +
'<input class="addqty" type="button" data-qtyboxid=' + $(this).data('id') + '_qty' + ' data-price=' + $(this).data('price') + ' />' +
'<label style="width:50px;display:inline-block;">' + $(this).data('price') + '</label>' +
'<input readonly="true" class="qtyresult" type="text" id=' + $(this).data('id') + '_qtyresult' + ' name=' + $(this).data('id') + '_qtyresult' + ' value=0 />' +
'</div>'
);
var countloop=parseInt($("#countloop").val());
$("#countloop").val(countloop+1);
$("#submit-btn").css("display","block");
// alert($(this).data('price'));
});
$(document).on('click', '.addqty', function (ev) {
// alert($(this).data('qtyboxid'));
// do stuff
var qtyboxid = '#' + $(this).data('qtyboxid');
var qtyboxid_result = '#' + $(this).data('qtyboxid') + 'result';
//alert(qtyboxid);
var qtyboxid_val = parseInt($(qtyboxid).val());
$(qtyboxid).val(qtyboxid_val + 1)
$(qtyboxid_result).val(parseInt($(qtyboxid).val()) * $(this).data('price'))
//alert($(qtyboxid).val(qtyboxid_val+1));
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".qtyresult").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
</head>
<body id="page5">
<!--==============================header=================================-->
<header>
<div class="row-top">
<div class="main">
<div class="wrapper">
<h1 align="right"><a href="index.html">DT Donair & Kebab</a> </h1>
<nav>
<ul class="menu">
<li><a class="active" href="index.html">
<font size="3" style="font-size: 13pt">About</font></a></li>
<li><a href="menu.html">
<font size="3" style="font-size: 13pt">Menu</font></a></li>
<li><a href="catalogue.html">
<font size="3" style="font-size: 13pt">Hot Deals
</font></a></li>
<li></li>
<li><a href="contact.html">
<font size="3" style="font-size: 13pt">Contact</font></a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="row-bot">
<div class="row-bot-bg">
<div class="main">
<h2>Impressive Selection <span>for any Occasion</span></h2>
</div>
</div>
</div>
</header>
<!--==============================content================================-->
<div id="main_area">
<form method="POST" action="">
<div id="products"></div>
<div id="cart-container">
<div id="cart"></div>
<div class="clear" style="text-align:right;">
<input style="width:50px;border:none;" readonly="readonly" id="sum" name="sum" value="" />
<input style="display:none;padding:3px;" type="submit" value="submit" name="submit" id="submit-btn" />
</div>
</div>
<input type="hidden" name="countloop" id="countloop" value="0"/>
<input type="hidden" name="page" value="page1"/>
</form>
<div id="second_page">
<?php
if($_POST['submit']) {
if($_POST['page'] == 'page1') {
$countloop=$_POST['countloop'];
//echo $countloop;
$body='<h2 style="text-align:center;margin-bottom:10px;">YOU HAVE ORDERED</h2>';
$body=$body.'<table>';
$body =$body.'<th>DISH</th><th>Qty.</th><th>Price</th><th>Total</th>';
for ($i=1; $i<=$countloop; $i++)
{
$body = $body. '<tr>';
$body=$body. '<td width="100px;" align="center">'.$_POST[$i].'</td>';
$body=$body.'<td width="100px;" align="center">'.$_POST[$i.'_qty'].'</td>';
$body=$body.'<td width="100px;" align="center">'.$_POST[$i.'_price'].'</td>';
$body=$body.'<td width="100px;" align="center">'.$_POST[$i.'_qtyresult'].'</td>';
$body=$body. '</tr>';
}
$body=$body.'<tr style="margin:10px 0px 10px 0px">';
$body=$body. '</tr>';
$body=$body.'<tr style="margin:10px 0px 10px 0px">';
$body=$body. '<td width="100px;" align="center" style="font-weight:bold;">Total:</td><td></td><td></td><td align="right">$'.$_POST['sum'].'</td>';
$body=$body.'</tr>';
$body =$body.'</table>';
echo $body;
$_SESSION['body'] = $body;
}
?>
<form id="form1" name="form1" method="POST" action="">
<input type="hidden" name="pages" value="true"/>
<p style="margin: 15px 0px 0px 30px;">
<label><input type="radio" name="Radio" value="radio1" /> I want to get delivery at home</label><br/>
<label><input type="radio" name="Radio" value="radio2" /> I want to get order at restaurant</label><br />
<input type="submit" name="submit2" value="Submit" style="margin-top: 5px; padding:5px;"/>
</p>
</form>
<?php } ?>
</div>
<div id="third_page">
<?php
if(isset($_POST['pages']) and ($_POST['pages']) == 'true') {
echo '<input type="hidden" name="pages" value="false"/>';
$body=$_SESSION['body'];
echo $body;
if($_POST['Radio'] == 'radio2') {
$body = $_SESSION['body'];
echo $body;
$headers = array(
'MIME-Version: 1.0',
'Content-Type: text/html; charset="UTF-8";',
'Content-Transfer-Encoding: 7bit',
'Date: ' . date('r', $_SERVER['REQUEST_TIME']),
'Message-ID: <' . $_SERVER['REQUEST_TIME'].md5($_SERVER['REQUEST_TIME']).'@'.$_SERVER['SERVER_NAME'] . '>',
'X-Mailer: PHP v' . phpversion(),
'X-Originating-IP: ' . $_SERVER['SERVER_ADDR'],
);
$message = '<b>Will take from Resturant</b>'.'<br>';
$message .= $body;
$to = 'ghrehman@gmail.com, nescafe.pk@gmail.com, burnhall.1@hotmail.com';
$subject = 'you have NEW ORDER';
$email = mail($to, $subject, $message, implode("\n", $headers)); // this is email function..
if($email == true) {
$_SESSION['body'] = '';
echo 'Your order has been sent to Company'.'<br>';
echo "You can collect your order from".'<br>';
echo " ADRESS: abc road".'<br>';
echo "Canada".'<br>';
}
}
else if($_POST['Radio'] == 'radio1') {
echo '<form name="" method="post" action="">';
echo "<label>Enter the address:</label>";
echo '<input type="text" name="address">';
echo "<label>Enter the phone num:</label>";
echo '<input type="text" name="phone">';
echo "<label>Enter the email address:</label>";
echo '<input type="text" name="email">';
echo "<label></label>";
echo '<input type="submit" name="checkout" value="Submit">';
echo "</p>";
echo '<input type="hidden" name="end_page" value="page3"/>';
echo "</form>";
}
}
if(isset($_POST['end_page']) and ($_POST['end_page']) == 'page3') {
$body = $_SESSION['body'];
echo $body;
$add=$_POST['address'];
$phone=$_POST['phone'];
$from=$_POST['email'];
$headers = array(
'MIME-Version: 1.0',
'Content-Type: text/html; charset="UTF-8";',
'Content-Transfer-Encoding: 7bit',
'Date: ' . date('r', $_SERVER['REQUEST_TIME']),
'Message-ID: <' . $_SERVER['REQUEST_TIME'].md5($_SERVER['REQUEST_TIME']).'@'.$_SERVER['SERVER_NAME'] . '>',
'From: ' . $from,
//'Reply-To: ' . $from,
//'Return-Path: ' . $from,
'X-Mailer: PHP v' . phpversion(),
'X-Originating-IP: ' . $_SERVER['SERVER_ADDR'],
);
$message = '<b>Address:</b> '. $add.'<br/>';
$message .= '<b>Phone:</b> '.$phone.'<br/>';
$message .= '<b>Email:</b> '.$from.'<br/>';
$message .= $body;
//$add.'<br/>'.$from.'<br/>'.$body;
$to = 'ghrehman@gmail.com, nescafe.pk@gmail.com, burnhall.1@hotmail.com';
$subject = 'you have NEW ORDER';
$email = mail($to, $subject, $message, implode("\n", $headers)); // this is email function..
if($email == true) {
$_SESSION['body'] = '';
echo 'Your order has been sent to Company'.'<br>';
echo "You can collect your order from".'<br>';
echo " ADRESS: abc road".'<br>';
echo "Canada".'<br>';
}
}
?>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="aligncenter">
<span>DT D&K © 2012</span> Developed by: 9Sixty Solutions.
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>