Datepicker and execute Ajax after selecting a date

Datepicker and execute Ajax after selecting a date

I'm not sure if it is possible and if how can I handle it - execute Ajax on date select from datepicker. I have try to add Ajax code below code where calculated days are returned, but it made code not working at all. Goal is to get prorated subscription price based on selected date and days left for selected month.

Current code looks like and is calculating days left for selected month:

  1. <script>
  2. jQuery(document).ready(function() {
  3.      jQuery("#dataStart").datepicker({
  4.          
  5.         minDate: '+2d',
  6.         changeMonth: true,
  7.         changeYear: true,
  8.         dateFormat: 'mm/dd/yy',
  9.         onSelect: function(date){
  10.             var dates = date.split('/');
  11.             var lastDate = new Date(dates[2], dates[0], 0);
  12.             var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
  13.             m = ('0'+ (m+1)).slice(-2);
  14.            
  15.             jQuery('#dataEnd').val(m+'/'+d+'/'+y);
  16.             var start = jQuery('#dataStart').datepicker('getDate');
  17.             jQuery('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
  18.             var end = jQuery('#dataEnd').datepicker('getDate');
  19.             var days   = ((end - start)/1000/60/60/24)+1;
  20.            
  21.             jQuery('#calculated').text(days);      
  22.            
  23.               jQuery.ajax({
                         url:"prorated.php",
                         type: "POST",
                         data: {prorated_days: days, prorated_subscription: 25, prorated_package: "basic"},
                         success:function(data, result){
                           $("#prorated").html(result);
                         }
                      });
                     
  24.         }
  25.     });
  26. });
  27. </script>
  28. <label for="dataStart">Start Date:</label>
  29. <input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" data-role="date" />
  30. <label for="dataEnd">End Date:</label>
  31. <input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly />
Thanks for any help

-- Adam