I'm trying to get a script to work similar to this one on the Sitepoint website:
http://articles.sitepoint.com/article/ajax-jquery
I have the following HTML:
Code:
<!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" />
<link href="script/jquery-datepicker/datePicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/jquery-datepicker/date.js"></script>
<script type="text/javascript" src="script/jquery-datepicker/jquery.datePicker.js"></script>
<script type="text/javascript" src="script/jquery-datepicker/call.js"></script>
<script type="text/javascript" src="script/jquery-datepicker/call-2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#bookNowCalculate').click(function() {
$('#bookNowCost').load('frm-book-now.php');
})
})
</script>
<title>Price Calculator</title>
<style type="text/css">
#col-1 {
float: left;
width: 45%;
}
#col-2 {
float: right;
width: 150%;
}
/* temp */
div {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<h2 id="bookNowCost"></h2>
<form method="post" action="#" id="frm-book-now">
<div id="col-1">
<div>
<label>Full Name*</label>
<div><input type="text" name="bookNowName" id="bookNowName" value="<?php echo $_POST['bookNowName']; ?>" /></div>
</div>
<div>
<label>Telephone*</label>
<div><input type="text" name="bookNowTel" id="bookNowTel" value="<?php echo $_POST['bookNowTel']; ?>" /></div>
</div>
<div>
<label>Mobile</label>
<div><input type="text" name="bookNowMob" id="bookNowMob" value="<?php echo $_POST['bookNowMob']; ?>" /></div>
</div>
<div>
<label>Email Address*</label>
<div><input type="text" name="bookNowEmail" id="bookNowEmail" value="<?php echo $_POST['bookNowEmail']; ?>" /></div>
</div>
<div>
<label for="fromDay">Check-in Date*</label>
<select id="fromDay" name="fromDay">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="fromMonth" name="fromMonth">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="fromYear" name="fromYear">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<a id="date-pick" href="#" class="dp-applied"><img src="image/frm-date.gif" /></a>
</div>
<div>
<label for="toDay">Check-out Date*</label>
<select id="toDay" name="toDay">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="toMonth" name="toMonth">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="toYear" name="toYear">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<a id="date-pick-2" href="#" class="dp-applied"><img src="image/frm-date.gif" /></a>
</div>
<div>
<label>Room Type*</label>
<div>
<select name="bookNowRoom">
<option value="single" <?php if ($_POST['bookNowRoom'] == 'single') { echo ' selected="selected"'; } ?>>Single Room (£50)</option>
<option value="double" <?php if ($_POST['bookNowRoom'] == 'double') { echo ' selected="selected"'; } ?>>Double / Twin Rooms (£65)</option>
<option value="family" <?php if ($_POST['bookNowRoom'] == 'family') { echo ' selected="selected"'; } ?>>Family Room (£75)</option>
</select>
</div>
</div>
<div>
<label>How Many Adults?*</label>
<div><input type="text" name="bookNowAdult" id="bookNowAdult" value="<?php echo $_POST['bookNowAdult']; ?>" /></div>
</div>
<div>
<label>How Many Children?*</label>
<div><input type="text" name="bookNowChild" id="bookNowChild" value="<?php echo $_POST['bookNowChild']; ?>" /></div>
</div>
<div>
<label>Special Requirements / Comments</label><br />
<textarea rows="4" cols="20" name="bookNowComment" value="<?php echo $_POST['bookNowComment']; ?>"></textarea>
</div>
<div>
<input type="submit" name="bookNowCalculate" id="bookNowCalculate" value="Calculate Cost" />
</div>
</div>
<div id="col-2">
</div>
</form>
</div>
</body>
</html>
The only bit of jQuery I'm using to execute some Ajax is this bit:
Code:
$(document).ready(function() {
$('#bookNowCalculate').click(function() {
$('#bookNowCost').load('frm-book-now.php');
})
})
But I assume that's completely wrong as it's not working! I've read about the Ajax method on the jQuery website, should I be using this instead? I have a feeling it might be because I need to specify the data sent as POST.
I'm thinking I need to use a similar script to those on here:
http://api.jquery.com/jQuery.ajax/
But I don't know what to do with the $.ajax variable, is the output of the server-side script simply inserted into this so that I can alert it or add it to an HTML element?
Here is my PHP too if that helps:
PHP Code:
<?php
// calculate cost of stay
// declare form fields
$bookNow = array('name' => $_POST['bookNowName'],
'tel' => $_POST['bookNowTel'],
'mobile' => $_POST['bookNowMob'],
'email' => $_POST['bookNowEmail'],
'fromDay' => $_POST['fromDay'],
'fromMonth' => $_POST['fromMonth'],
'fromYear' => $_POST['fromYear'],
'toDay' => $_POST['toDay'],
'toMonth' => $_POST['toMonth'],
'toYear' => $_POST['toYear'],
'room' => $_POST['bookNowRoom'],
'numAdult' => $_POST['bookNowAdult'],
'numChild' => $_POST['bookNowChild'],
'comment' => $_POST['bookNowComment']);
// confirm room type and cost
if ($_POST['bookNowCalculate']) {
switch ($bookNow['room']) {
case 'single':
$bookNow['room'] = 50;
break;
case 'double':
$bookNow['room'] = 65;
break;
case 'family':
$bookNow['room'] = 75;
break;
}
// confirm number of nights
$dateFrom = mktime(0, 0, 0, $bookNow['fromMonth'], $bookNow['fromDay'], $bookNow['fromYear']);
$dateTo = mktime(0, 0, 0, $bookNow['toMonth'], $bookNow['toDay'], $bookNow['toYear']);
$numNight = ($dateTo - $dateFrom) / 86400; // 86400 == 1 day
// total cost
$cost = ($numNight * $bookNow['room']) * ($bookNow['numAdult'] + $bookNow['numChild']);
echo '£' . $cost;
}
?>
Thanks
