Setting up an Ajax call

Setting up an Ajax call

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:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <link href="script/jquery-datepicker/datePicker.css" rel="stylesheet" type="text/css" />
  6. <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
  7. <script type="text/javascript" src="script/jquery-datepicker/date.js"></script>
  8. <script type="text/javascript" src="script/jquery-datepicker/jquery.datePicker.js"></script>
  9. <script type="text/javascript" src="script/jquery-datepicker/call.js"></script>
  10. <script type="text/javascript" src="script/jquery-datepicker/call-2.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13.     $('#bookNowCalculate').click(function() {
  14.         $('#bookNowCost').load('frm-book-now.php');
  15.     })
  16. })
  17. </script>
  18. <title>Price Calculator</title>
  19. <style type="text/css">
  20. #col-1 {
  21.     float: left;
  22.     width: 45%;
  23. }
  24. #col-2 {
  25.     float: right;
  26.     width: 150%;
  27. }
  28. /* temp */
  29. div {
  30.     margin-bottom: 20px;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35.     <div id="wrapper">
  36.         <h2 id="bookNowCost"></h2>
  37.         <form method="post" action="#" id="frm-book-now">
  38.             <div id="col-1">
  39.                 <div>
  40.                     <label>Full Name*</label>
  41.                     <div><input type="text" name="bookNowName" id="bookNowName" value="<?php echo $_POST['bookNowName']; ?>" /></div>
  42.                 </div>
  43.                 <div>
  44.                     <label>Telephone*</label>
  45.                     <div><input type="text" name="bookNowTel" id="bookNowTel" value="<?php echo $_POST['bookNowTel']; ?>" /></div>
  46.                 </div>
  47.                 <div>
  48.                     <label>Mobile</label>
  49.                     <div><input type="text" name="bookNowMob" id="bookNowMob" value="<?php echo $_POST['bookNowMob']; ?>" /></div>
  50.                 </div>
  51.                 <div>
  52.                     <label>Email Address*</label>
  53.                     <div><input type="text" name="bookNowEmail" id="bookNowEmail" value="<?php echo $_POST['bookNowEmail']; ?>" /></div>
  54.                 </div>
  55.                 <div>
  56.                     <label for="fromDay">Check-in Date*</label>
  57.                     <select id="fromDay" name="fromDay">
  58.                         <option value="1">1</option>
  59.                         <option value="2">2</option>
  60.                         <option value="3">3</option>
  61.                         <option value="4">4</option>
  62.                         <option value="5">5</option>
  63.                         <option value="6">6</option>
  64.                         <option value="7">7</option>
  65.                         <option value="8">8</option>
  66.                         <option value="9">9</option>
  67.                         <option value="10">10</option>
  68.                         <option value="11">11</option>
  69.                         <option value="12">12</option>
  70.                         <option value="13">13</option>
  71.                         <option value="14">14</option>
  72.                         <option value="15">15</option>
  73.                         <option value="16">16</option>
  74.                         <option value="17">17</option>
  75.                         <option value="18">18</option>
  76.                         <option value="19">19</option>
  77.                         <option value="20">20</option>
  78.                         <option value="21">21</option>
  79.                         <option value="22">22</option>
  80.                         <option value="23">23</option>
  81.                         <option value="24">24</option>
  82.                         <option value="25">25</option>
  83.                         <option value="26">26</option>
  84.                         <option value="27">27</option>
  85.                         <option value="28">28</option>
  86.                         <option value="29">29</option>
  87.                         <option value="30">30</option>
  88.                         <option value="31">31</option>
  89.                     </select>
  90.                     <select id="fromMonth" name="fromMonth">
  91.                         <option value="1">Jan</option>
  92.                         <option value="2">Feb</option>
  93.                         <option value="3">Mar</option>
  94.                         <option value="4">Apr</option>
  95.                         <option value="5">May</option>
  96.                         <option value="6">Jun</option>
  97.                         <option value="7">Jul</option>
  98.                         <option value="8">Aug</option>
  99.                         <option value="9">Sep</option>
  100.                         <option value="10">Oct</option>
  101.                         <option value="11">Nov</option>
  102.                         <option value="12">Dec</option>
  103.                     </select>
  104.                     <select id="fromYear" name="fromYear">
  105.                         <option value="2010">2010</option>
  106.                         <option value="2011">2011</option>
  107.                         <option value="2012">2012</option>
  108.                         <option value="2013">2013</option>
  109.                         <option value="2014">2014</option>
  110.                         <option value="2015">2015</option>
  111.                     </select>
  112.                     <a id="date-pick" href="#" class="dp-applied"><img src="image/frm-date.gif" /></a>
  113.                 </div>
  114.                 <div>
  115.                     <label for="toDay">Check-out Date*</label>
  116.                     <select id="toDay" name="toDay">
  117.                         <option value="1">1</option>
  118.                         <option value="2">2</option>
  119.                         <option value="3">3</option>
  120.                         <option value="4">4</option>
  121.                         <option value="5">5</option>
  122.                         <option value="6">6</option>
  123.                         <option value="7">7</option>
  124.                         <option value="8">8</option>
  125.                         <option value="9">9</option>
  126.                         <option value="10">10</option>
  127.                         <option value="11">11</option>
  128.                         <option value="12">12</option>
  129.                         <option value="13">13</option>
  130.                         <option value="14">14</option>
  131.                         <option value="15">15</option>
  132.                         <option value="16">16</option>
  133.                         <option value="17">17</option>
  134.                         <option value="18">18</option>
  135.                         <option value="19">19</option>
  136.                         <option value="20">20</option>
  137.                         <option value="21">21</option>
  138.                         <option value="22">22</option>
  139.                         <option value="23">23</option>
  140.                         <option value="24">24</option>
  141.                         <option value="25">25</option>
  142.                         <option value="26">26</option>
  143.                         <option value="27">27</option>
  144.                         <option value="28">28</option>
  145.                         <option value="29">29</option>
  146.                         <option value="30">30</option>
  147.                         <option value="31">31</option>
  148.                     </select>
  149.                     <select id="toMonth" name="toMonth">
  150.                         <option value="1">Jan</option>
  151.                         <option value="2">Feb</option>
  152.                         <option value="3">Mar</option>
  153.                         <option value="4">Apr</option>
  154.                         <option value="5">May</option>
  155.                         <option value="6">Jun</option>
  156.                         <option value="7">Jul</option>
  157.                         <option value="8">Aug</option>
  158.                         <option value="9">Sep</option>
  159.                         <option value="10">Oct</option>
  160.                         <option value="11">Nov</option>
  161.                         <option value="12">Dec</option>
  162.                     </select>
  163.                     <select id="toYear" name="toYear">
  164.                         <option value="2010">2010</option>
  165.                         <option value="2011">2011</option>
  166.                         <option value="2012">2012</option>
  167.                         <option value="2013">2013</option>
  168.                         <option value="2014">2014</option>
  169.                         <option value="2015">2015</option>
  170.                     </select>
  171.                     <a id="date-pick-2" href="#" class="dp-applied"><img src="image/frm-date.gif" /></a>
  172.                 </div>
  173.                 <div>
  174.                     <label>Room Type*</label>
  175.                     <div>
  176.                         <select name="bookNowRoom">
  177.                             <option value="single" <?php if ($_POST['bookNowRoom'] == 'single') { echo ' selected="selected"'; } ?>>Single Room (£50)</option>
  178.                             <option value="double" <?php if ($_POST['bookNowRoom'] == 'double') { echo ' selected="selected"'; } ?>>Double / Twin Rooms (£65)</option>
  179.                             <option value="family" <?php if ($_POST['bookNowRoom'] == 'family') { echo ' selected="selected"'; } ?>>Family Room (£75)</option>
  180.                         </select>
  181.                     </div>
  182.                 </div>
  183.                 <div>
  184.                     <label>How Many Adults?*</label>
  185.                     <div><input type="text" name="bookNowAdult" id="bookNowAdult" value="<?php echo $_POST['bookNowAdult']; ?>" /></div>
  186.                 </div>
  187.                 <div>
  188.                     <label>How Many Children?*</label>
  189.                     <div><input type="text" name="bookNowChild" id="bookNowChild" value="<?php echo $_POST['bookNowChild']; ?>" /></div>
  190.                 </div>
  191.                 <div>
  192.                     <label>Special Requirements / Comments</label><br />
  193.                     <textarea rows="4" cols="20" name="bookNowComment" value="<?php echo $_POST['bookNowComment']; ?>"></textarea>
  194.                 </div>
  195.                 <div>
  196.                     <input type="submit" name="bookNowCalculate" id="bookNowCalculate" value="Calculate Cost" />
  197.                 </div>
  198.             </div>
  199.             <div id="col-2">
  200.            
  201.             </div>
  202.         </form>
  203.     </div>
  204. </body>
  205. </html>

The only bit of jQuery I'm using to execute some Ajax is this bit:
  1. $(document).ready(function() {
  2.     $('#bookNowCalculate').click(function() {
  3.         $('#bookNowCost').load('frm-book-now.php');
  4.     })
  5. })

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:
  1. <?php
  2. // calculate cost of stay
  3. // declare form fields
  4. $bookNow = array('name'     => $_POST['bookNowName'],
  5.                 'tel'       => $_POST['bookNowTel'],
  6.                 'mobile'    => $_POST['bookNowMob'],
  7.                 'email'     => $_POST['bookNowEmail'],
  8.                 'fromDay'   => $_POST['fromDay'],
  9.                 'fromMonth' => $_POST['fromMonth'],
  10.                 'fromYear'  => $_POST['fromYear'],
  11.                 'toDay'     => $_POST['toDay'],
  12.                 'toMonth'   => $_POST['toMonth'],
  13.                 'toYear'    => $_POST['toYear'],
  14.                 'room'      => $_POST['bookNowRoom'],
  15.                 'numAdult'  => $_POST['bookNowAdult'],
  16.                 'numChild'  => $_POST['bookNowChild'],
  17.                 'comment'   => $_POST['bookNowComment']);
  18. // confirm room type and cost
  19. if ($_POST['bookNowCalculate']) {
  20.     switch ($bookNow['room']) {
  21.         case 'single':
  22.             $bookNow['room'] = 50;
  23.             break;
  24.         case 'double':
  25.             $bookNow['room'] = 65;
  26.             break;
  27.         case 'family':
  28.             $bookNow['room'] = 75;
  29.             break;
  30.     }
  31.    
  32.     // confirm number of nights
  33.     $dateFrom = mktime(0, 0, 0, $bookNow['fromMonth'], $bookNow['fromDay'], $bookNow['fromYear']);
  34.     $dateTo   = mktime(0, 0, 0, $bookNow['toMonth'], $bookNow['toDay'], $bookNow['toYear']);
  35.     $numNight = ($dateTo - $dateFrom) / 86400; // 86400 == 1 day
  36.    
  37.     // total cost
  38.     $cost = ($numNight * $bookNow['room']) * ($bookNow['numAdult'] + $bookNow['numChild']);
  39.     echo '£' . $cost;
  40. }
  41. ?>
Thanks