Update reservation form

This update for the reservation form is for the form to function with
their reservation system.

diff --git a/Toolkit/Page.php b/Toolkit/Page.php
index 6c6ff72..f8e3a52 100755 (executable)
--- a/Toolkit/Page.php
+++ b/Toolkit/Page.php
@@ -151,6 +151,7 @@ class Toolkit_Page
         $GLOBALS['styleSheets'][]   = JQUERY_UI_CDN_CSS;
                $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'fancybox/jquery.fancybox.css';
         $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . "fancybox/jquery.fancybox.js";
+        $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . 'js/reservation.js';
     }
 
     private function _video()
@@ -489,7 +490,7 @@ class Toolkit_Page
         ) {
             $this->_video();
         }
-        
+
 
         // check if define for GLM_SEARCH is set
         if (defined("GLM_SEARCH")

diff --git a/js/reservation.js b/js/reservation.js
new file mode 100644 (file)
index 0000000..72e2b3a
--- /dev/null
+++ b/js/reservation.js
@@ -0,0 +1,53 @@
+function resValidate(f) {
+        var fullMonth =['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        var dateValue = new String(f.date.value);
+        var dateParts = dateValue.split("/");
+ //f.arrival_month = fullMonth[parseInt(dateParts[0] - 1)];
+ f.arrival_month.value = dateParts[0];
+ f.arrival_day.value   = dateParts[1];
+ f.arrival_year.value  = dateParts[2];
+
+  var d;
+  var x;
+  var today;
+  var enddate;
+
+  if (f.Nites.value == "") {
+    alert("Please enter the number of nights.");
+    f.Nites.focus();
+    f.Nites.blur();
+    f.Nites.select();
+    return false;
+  }
+
+  if (f.Nites.value > 365) {
+    alert("We do not accept reservations for more than 365 days in the future.");
+    f.Nites.focus();
+    f.Nites.blur();
+    f.Nites.select();
+    return false;
+  }
+
+  today = new Date();
+
+  // parse date here
+
+
+  d = new Date(f.arrival_year.value, f.arrival_month.value - 1, f.arrival_day.value, 23, 59, 59);
+  if (d < today) {
+    alert("Arrival is before today, please choose another.")
+    return false;
+  }
+  d = new Date(f.arrival_year.value, f.arrival_month.value - 1, f.arrival_day.value, 0, 0, 0);
+  if (f.AllowToday.value != "True") {
+       if (d < today) {
+               alert("Reservations are not allowed for TODAY.");
+           f.arrival_day.focus();
+           f.arrival_day.blur();
+           f.arrival_day.select();
+               return false;
+       }
+  }
+  enddate = new Date() + 365;
+//window.open('Step2.target','scrollbars=0, resizable=0, menubar=0,toolbar=0,location=0,status=0,height=380, width=600');return false;
+}
\ No newline at end of file

diff --git a/styles.css b/styles.css
index d01973d..c8baaa3 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -460,6 +460,12 @@ aside.right-off-canvas-menu ul.off-canvas-list li ul.dropdown.open {
   font-size: 12px;
   text-align: center;
 }
+.reservations form .columns input[type="number"] {
+    width: 50px;
+    height: 1.5rem;
+    padding: 0 0.5rem;
+    margin: 3px auto 5px auto;
+}
 @media only screen and (max-width: 570px) {
   .reservations form .columns label {
     width: auto;
@@ -475,7 +481,9 @@ aside.right-off-canvas-menu ul.off-canvas-list li ul.dropdown.open {
   width: 110px;
 }
 @media only screen and (max-width: 570px) {
-  .reservations form .columns input[type="text"], .reservations form .columns select {
+  .reservations form .columns input[type="text"],
+  .reservations form .columns select,
+  .reservations form .columns input[type="number"]{
     margin-left: 0;
   }
 }
@@ -514,9 +522,12 @@ aside.right-off-canvas-menu ul.off-canvas-list li ul.dropdown.open {
     float: none;
   }
 }
-.reservations form .check-in, .reservations form .check-out {
+.reservations form .check-in {
   width: 19%;
 }
+.reservations form .check-out {
+    width: 10%;
+}
 @media only screen and (max-width: 795px) {
   .reservations form .check-in, .reservations form .check-out {
     width: 25%;
@@ -776,7 +787,7 @@ footer ul.images li img.latterns {
     box-shadow:         1px 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.imgBorderMe img { 
+.imgBorderMe img {
      margin-bottom: 8px !important;
 }
 
@@ -1091,3 +1102,6 @@ li:hover .play {
 #videoGallery li a:hover span.vTitle {
     color: #3fac46;
 }
+#ui-datepicker-div {
+    z-index: 999 !important;
+}
\ No newline at end of file

diff --git a/templates/template.html b/templates/template.html
index f6ef89b..279ea64 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -85,39 +85,62 @@
             <!-- Reservations form -->
             <div class="row">
               <div class="small-11 small-centered columns reservations">
-                <form action="#" method="POST" class="row">
+                <form action="https://www.nitelink.com/nitelink21/step2.asp?p=1133"
+                      method="POST" class="row" onsubmit="return(resValidate(this));">
+                    <input type="hidden" name="arrival_month">
+                    <input type="hidden" name="arrival_day">
+                    <input type="hidden" name="arrival_year">
+                    <input type="hidden" name="p" value="1133">
+                    <input type="hidden" name="AllowToday" value="False">
+                    <input type="hidden" name="iDays" value="365">
                     <div class="title columns">
                       <h3>Reservations</h3>
                     </div>
                     <div class="check-in columns">
-                      <label for="check-in-date">Check-Out Date</label>
-                      <input type="text" name="check-in-date" class="datepicker" placeholder="MM/DD/YYYY" tabindex="1" />
+                      <label for="check-in-date">Check-In Date</label>
+                      <input
+                          required
+                          type="text"
+                          name="date"
+                          class="datepicker"
+                          placeholder="MM/DD/YYYY"
+                          tabindex="1" />
                     </div>
                     <div class="check-out columns">
-                      <label for="check-out-date">Check-Out Date</label>
-                      <input type="text" name="check-out-date" class="datepicker" placeholder="MM/DD/YYYY" tabindex="2" />
+                      <label for="Nites">Nights:</label>
+                      <input
+                          required
+                          patten="[0-9]"
+                          type="number"
+                          min="1"
+                          max="365"
+                          name="Nites"
+                          value="1"
+                          tabindex="2" />
                     </div>
                     <div class="adults columns">
                       <label for="adults">Adults:</label>
-                      <select name="adults"  tabindex="3">
-                        <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>
-                      </select>
+                      <input
+                          required
+                          pattern="[0-9]"
+                          type="number"
+                          min="1"
+                          max="6"
+                          name="adults"
+                          value="1"
+                          tabindex="3">
                     </div>
                     <div class="children columns">
                       <label for="children">Children:</label>
-                      <select name="children" tabindex="4">
-                        <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>
-                      </select>
+                      <input
+                          required
+                          pattern="[0-9]"
+                          type="number"
+                          min="1"
+                          max="6"
+                          name="children"
+                          value="1"
+                          tabindex="4">
                     </div>
                     <div class="submit columns">
                       <input type="submit" class="button" value="Book Now" tabindex="5" />