Adding for child ages

diff --git a/js/app.js b/js/app.js
index 0cd5e49..1582362 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -167,6 +167,38 @@ $('.All_Check').bind('click', function(e){
 
 
 });
+;    $(document).ready(function() {
+        $('.child_ages').hide();
+        var max_children = 5;
+        var minimum_child_age = 0;
+        var maximum_child_age = 17;
+        var child_ages_div = $('.child_ages');
+        var child_age_input = $('<select class="child_age" name="opt_child_0" style="margin-top:1em;width:50px;float:left;"></select>');
+        for (var i=minimum_child_age;i<=maximum_child_age;i++) {
+            var option = $('<option>'+i+'</option>');
+            child_age_input.append(option);
+        }
+        var child_age_hidden = child_ages_div.children().slice(0,1);
+        $('.no_child').change(function() {
+            var n_children = $(this).val();
+            var parent = $(this).closest('form');
+            child_ages_div = $(parent).find('.child_ages');
+            child_ages_div.html('');
+            for (var i=0;i<n_children;i++) {
+                input = child_age_input.clone();
+                input.attr('name','opt_child_'+i);
+                child_ages_div.append(input);
+            }
+            for (var i=n_children;i<max_children;i++) {
+                input = child_age_hidden.clone();
+                input.attr('name','opt_child_'+i);
+                child_ages_div.append(input);
+            }
+            child_ages_div.hide();
+            child_ages_div.fadeIn("fast");
+        });
+
+    });
 ;/*global $, document, window, alert, console, require*/
 // Load foundation
 $(document).foundation();

diff --git a/js/custom/child.age.js b/js/custom/child.age.js
new file mode 100644 (file)
index 0000000..72cc97a
--- /dev/null
+++ b/js/custom/child.age.js
@@ -0,0 +1,32 @@
+    $(document).ready(function() {
+        $('.child_ages').hide();
+        var max_children = 5;
+        var minimum_child_age = 0;
+        var maximum_child_age = 17;
+        var child_ages_div = $('.child_ages');
+        var child_age_input = $('<select class="child_age" name="opt_child_0" style="margin-top:1em;width:50px;float:left;"></select>');
+        for (var i=minimum_child_age;i<=maximum_child_age;i++) {
+            var option = $('<option>'+i+'</option>');
+            child_age_input.append(option);
+        }
+        var child_age_hidden = child_ages_div.children().slice(0,1);
+        $('.no_child').change(function() {
+            var n_children = $(this).val();
+            var parent = $(this).closest('form');
+            child_ages_div = $(parent).find('.child_ages');
+            child_ages_div.html('');
+            for (var i=0;i<n_children;i++) {
+                input = child_age_input.clone();
+                input.attr('name','opt_child_'+i);
+                child_ages_div.append(input);
+            }
+            for (var i=n_children;i<max_children;i++) {
+                input = child_age_hidden.clone();
+                input.attr('name','opt_child_'+i);
+                child_ages_div.append(input);
+            }
+            child_ages_div.hide();
+            child_ages_div.fadeIn("fast");
+        });
+
+    });

diff --git a/parts/reservation-form-content.php b/parts/reservation-form-content.php
index 241c5d4..4526cff 100644 (file)
--- a/parts/reservation-form-content.php
+++ b/parts/reservation-form-content.php
@@ -1,51 +1,59 @@
 <div id="resContent">
     <form id="form" method="post" action="https://saultstemarie.reservationsystems.com/English/Availability_Check.asp">
         <div class="row resDropdown">
-            <div class="small-2 res-date columns resInput">
-                <input id="arrive" type="text" placeholder="Arrive" name="txtArrival_Date" required="required"><img id="arriveCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
-            </div>
-            <div class="small-2 res-date columns resInput">
-                <input id="depart" type="text" placeholder="Depart" name="txtReturnDate" required="required"><img id="departCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
-            </div>
-            
-            <div id="resForm">
-                <div class="small-2 guest columns adults">
-                    <!-- <input type="text" placeholder="Adults" > -->
-                    <select id="adults" name="no_adult">
-                        <option value="" disabled selected>Adults</option>
-                        <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>
+            <div id="resForm" class="small-12 column">
+                <div class="row">
+                    <div class="small-2 res-date columns resInput">
+                        <input id="arrive" type="text" placeholder="Arrive" name="txtArrival_Date" required="required"><img id="arriveCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                    </div>
+                    <div class="small-2 res-date columns resInput">
+                        <input id="depart" type="text" placeholder="Depart" name="txtReturnDate" required="required"><img id="departCal" src="<?php echo get_template_directory_uri(); ?>/assets/calendar-icon.jpg">
+                    </div>
+                    <div class="small-2 guest columns adults">
+                        <!-- <input type="text" placeholder="Adults" > -->
+                        <select id="adults" name="no_adult">
+                            <option value="" disabled selected>Adults</option>
+                            <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>
+                        </select>
+                    </div>
+                    <div class="small-2 guest columns kids">
+                        <select id="kids" name="no_child" class="no_child">
+                            <option value="" disabled selected>Kids</option>
+                            <option value="0">0</option>
+                            <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>
 
-                    </select>                 
+                        </select><span class="smtxt">Ages <span class="downarrow">&#9660</span></span>
+                    </div>
+                    <div class="small-2 columns resInput">
+                        <select id="rate" name="PegsMeta_SearchType">
+                            <option value="RatePlan_0" disabled selected>Best Rate</option>
+                            <option value="RatePlan_1">AAA/CCA</option>
+                            <option value="RatePlan_2">Senior Rate</option>
+                            <option value="RatePlan_3">Internet Special</option>
+                        </select>
+                    </div>
+                    <div class="small-2 small-centered columns resBtn-header">
+                        <input class="res-button-header" type="submit" value="SEARCH">
+                    </div>
                 </div>
-                <div class="small-2 guest columns kids">
-
-                    <select id="kids" name="no_child">
-                        <option value="" disabled selected>Kids</option>
-                        <option value="0">0</option> 
-                        <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>
-
-                    </select>                    
-                </div>
-                <div class="small-2 columns resInput">
-                    <select id="rate" name="PegsMeta_SearchType">
-                        <option value="RatePlan_0" disabled selected>Best Rate</option>
-                        <option value="RatePlan_1">AAA/CCA</option> 
-                        <option value="RatePlan_2">Senior Rate</option>
-                        <option value="RatePlan_3">Internet Special</option>
-                    </select>                    
-                </div>
-                <div class="small-2 small-centered columns resBtn-header">
-                    <input class="res-button-header" type="submit" value="SEARCH">
+            </div>
+            <div class="row">
+                <div class="child_ages small-4 small-centered columns">
+                    <input type="hidden" name="opt_child_0" value="-1" />
+                    <input type="hidden" name="opt_child_1" value="-1" />
+                    <input type="hidden" name="opt_child_2" value="-1" />
+                    <input type="hidden" name="opt_child_3" value="-1" />
+                    <input type="hidden" name="opt_child_4" value="-1" />
                 </div>
             </div>
         </div>
     </form>
-</div>
\ No newline at end of file
+</div>