Hiding input when radio checked not working

Hiding input when radio checked not working

Hi,

I have this page:

  1. <script type="text/javascript">
  2. modalExtra = '';
  3. maxModalHt = '';
  4. $(document).ready(function() {
  5. $('select, input[type="checkbox"], input[type="radio"], input[type="file"]').not('.productOptionPickListSwatch input, .productOptionViewRectangle input').uniform();
  6. modalExtra = $('#ModalTitle').outerHeight(true) + $('#ModalButtonRow').outerHeight(true) + 60;
  7.  
  8.  
  9. maxModalHt =  $(window).height() - modalExtra;
  10. $('#ModalContent').css('max-height', maxModalHt);
  11. });
  12. $('#giftwrapping_all').change(function() {
  13. modalExtra = $('#ModalTitle').outerHeight(true) + $('#ModalButtonRow').outerHeight(true) + 30;
  14. maxModalHt =  $(window).height() - modalExtra;
  15. $('#ModalContent').css('max-height', maxModalHt);
  16. });

  18. $(window).load(function(){
  19.     modalExtra = $('#ModalTitle').outerHeight(true) + $('#ModalButtonRow').outerHeight(true) + 30;
  20. maxModalHt =  $(window).height() - modalExtra;
  21. $('#ModalContent').css('max-height', maxModalHt);
  22. });

  24. $(window).bind( 'orientationchange', function(e){
  25.     modalExtra = $('#ModalTitle').outerHeight(true) + $('#ModalButtonRow').outerHeight(true) + 30;
  26. maxModalHt =  $(window).height() - modalExtra;
  27. $('#ModalContent').css('max-height', maxModalHt);
  28. });

  30. $(window).load(function() {
  31. $('#datepicker').datepicker();
  32. });               
  33. </script>
  34. <div id="ModalTitle">Choose Your Options</div> 
  35. <form id="CartEditProductFieldsForm" method="post" action="cart.php" onsubmit="return Cart.saveItemCustomizations();"  enctype="multipart/form-data">
  36. <input type="hidden" name="action" value="EditProductFieldsInCart" />
  37. <div id="ModalContent" style="overflow: auto;">
  39. <!--- Standard Shipping --->
  40. <label for="Standard">
  41. <input id="Standard" type="radio" value="86" checked="checked" onclick="javascript:ShipDate();" />
  42. Standard Shipping<br />
  43. <p><small>Earliest Date of Delivery: 
  44. <span id="delivery-date"></span></small></p>
  45. </label><br />
  47. <!--- Delivery Date Field --->
  48. <div id="cartDatepickerDiv" class="ml25">       
  49. <label id="datepickerLabel" for="datepicker" class="rl-m">Desired Delivery Date: </label>
  50. <input class="input-small" id="datepicker" type="text" placeholder="ex. 01/01/2013" readonly />               
  51. <hr>
  52. </div>  
  54. <!--- 2 Day Express --->
  55. <label for="2DayExpress">
  56. <input id="2DayExpress" type="radio" value="89" onclick="javascript:ShipDate();" />
  57. Delivery by&nbsp;<span id="datepicker2"></span>
  58. <p class="rl-m"><small><span class="name">2 Day Express Shipping. Additional $27.00.</span></small></p>                                                
  59. </label>
  60. <br />
  62. <!--- 3 Day Express --->
  63. <label for="3DayExpress">
  64. <input id="3DayExpress" type="radio" value="90" onclick="javascript:ShipDate();" />
  65. Delivery by&nbsp;<span id="datepicker3"></span>
  66. <p class="rl-m"><small><span class="name">3 Day Express Shipping. Additional $17.00.</span></small></p>            
  67. </label>
  68. <br />
  69. <!--- Gift Message --->
  70. <h8>Gift Message</h8>                    
  71. <label for="giftMsg">
  72. <small>Please type your desired message (optional)</small>:<br />
  73. </label>                       
  74. <textarea id="giftMsg" value=""></textarea>                   
  75. <br />        
  76. </div>
  77. <div id="ModalButtonRow">
  78. <a href="#" onclick="$.modal.close();" class="Button btn-small FloatLeft">Cancel</a>
  79. <input class="Button btn-small FloatRight" class="Submit" type="submit" value="Save" />
  80. </div>
  81. <!--- Datepicker Script --->
  82. <script>
  83. $(document).ready(function() {

  85. var natDays = [
  86. [1, 1, 'New Year'], //2014
  87. [1, 20, 'Martin Luther King'], //2014
  88. [2, 17, 'Washingtons Birthday'], //2014       
  89. [5, 26, 'Memorial Day'], //2014
  90. [7, 4, 'Independence Day'], //2014
  91. [9, 1, 'Labour Day'], //2014
  92. [10, 14, 'Columbus Day'], //2013
  93. [11, 11, 'Veterans Day'], //2013
  94. [11, 28, 'Thanksgiving Day'], //2013 
  95. [12, 25, 'Christmas'] //2013     
  96. ];

  98. // dateMin is the minimum delivery date
  99. var dateMin = new Date();
  100. dateMin.setDate(dateMin.getDate() + (dateMin.getHours() >= 14 ? 1 : 0));

  102. function AddBusinessDays(curdate, weekDaysToAdd) {
  103. var offset = (weekDaysToAdd > 0 ? +1 : -1);
  104. weekDaysToAdd = Math.abs(weekDaysToAdd);
  105. var date = new Date(curdate.getTime());
  106. while (weekDaysToAdd > 0) {
  107. date.setDate(date.getDate() + offset);
  108. //check if current day is business day
  109. if (noWeekendsOrHolidays(date)) {
  110. weekDaysToAdd--;
  111. }
  112. }
  113. return date;
  114. }

  116. function noWeekendsOrHolidays(date) {
  117. var noWeekend = $.datepicker.noWeekends(date);
  118. return (noWeekend[0] ? nationalDays(date) : noWeekend);
  119. }

  121. function nationalDays(date) {
  122. for (i = 0; i < natDays.length; i++) {
  123. if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
  124. return [false, natDays[i][2] + '_day'];
  125. }
  126. }
  127. return [true, ''];
  128. }

  130. function setDeliveryDate(date) {
  131. $('#delivery-date').text($.datepicker.formatDate('DD, MM d, yy', date));
  132. $('#datepicker3').text($.datepicker.formatDate('DD, MM d, yy',
  133. AddBusinessDays(date, -1)));
  134. $('#datepicker2').text($.datepicker.formatDate('DD, MM d, yy',
  135. AddBusinessDays(date, -2)));
  136. }

  138. setDeliveryDate(AddBusinessDays(dateMin, 4));

  140. $.datepicker.setDefaults({
  141. beforeShowDay: noWeekendsOrHolidays,
  142. showOn: 'both',
  143. firstDay: 0,
  144. dateFormat: 'mm/dd/yy',
  145. changeFirstDay: false,
  146. showButtonPanel: true
  147. });
  148. // use datepicker to choose a different delivery date    
  149. $('#datepicker').datepicker({
  150. minDate: AddBusinessDays(dateMin, 4),
  151. onSelect: function(datestring) {
  152. setDeliveryDate($(this).datepicker('getDate'));
  153. }
  154. });
  155. });
  156. //formats dates in modal
  157. var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
  159. var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
  161. var d = new Date();
  162. var curr_day = d.getDay();
  163. var curr_date = d.getDate();
  164. var sup = "";
  165. if (curr_date == 1 || curr_date == 21 || curr_date ==31)
  166. {
  167. sup = "st";
  168. }
  169. else if (curr_date == 2 || curr_date == 22)
  170. {
  171. sup = "nd";
  172. }
  173. else if (curr_date == 3 || curr_date == 23)
  174. {
  175. sup = "rd";
  176. }
  177. else
  178. {
  179. sup = "th";
  180. }
  181. var curr_month = d.getMonth();
  182. var curr_year = d.getFullYear();    

  185.     /* collect all the inputs, radio, textarea and select */
  186.     var originalInputs=$('.productAttributeList :input');
  187.     
  188.     var newElArray=[
  189.     /* selector , index of original input*/
  190.     ['#Standard',1],     
  191.     ['#2DayExpress',2],
  192.     ['#3DayExpress',3],
  193.     ['#giftMsg',4], 
  194.     ['#datepicker',5],
  195.     ['#age_verification',7]
  196.     ]
  197.     
  198.     /* index of original input to match to modal fields */
  199.     $.each(  newElArray,function(i,arr){
  200.     var newName= getInputName( arr[1])
  201.     $(arr[0]).attr('name', newName);     
  202.     })

  204.     function getInputName( index){
  205.     return originalInputs.eq(index).attr('name');
  206.     }
  207. </script>
  208. </form>​
  209. <script>  
  210. //hides unnecessary fields on modal
  211.     $(".productOptionViewRadio span.name:contains('(None)')").parents('li').hide(); 
  212.     $('.productAttributeConfigurableEntryCheckbox').hide();
  213.     $("label span.name:contains('Date')").parents('.productAttributeRow').hide();  
  215. //hide date field when standard shipping is checked
  216.     $("input[type="radio"]").click(function() {
  217.     if ($(this).is(":checked")) $("#cartDatepickerDiv").hide();
  218.         else $("#cartDatepickerDiv").show();
  219.     });
  220. });
  221. </script>


I'm new so I'm sure there's a million issues with it...but what I'm posting about is the last function which isn't working at all. It's supposed to hide #cartDatepickerDiv when the radio id="Standard" is checked but it's doing nothing.

Any help or advice is very much appreciated.
Susan