jQuery UI Datepicker and execute Ajax after selecting a date

Question

I'm not sure if it is possible and if how can I handle it - execute Ajax on date select from datepicker. I'm not getting any errors from Ajax part in the console. In a div ID 'prorated' I'm getting "success" instead of pro rated subscription value. Do I need to use JSON to get returned values from PHP file?

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:

<script>
jQuery(document).ready(function() {
     jQuery("#dataStart").datepicker({

        minDate: '+2d',
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        onSelect: function(date){
            var dates = date.split('/');
            var lastDate = new Date(dates[2], dates[0], 0);
            var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
            m = ('0'+ (m+1)).slice(-2);

            jQuery('#dataEnd').val(m+'/'+d+'/'+y);
            var start = jQuery('#dataStart').datepicker('getDate');
            jQuery('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
            var end = jQuery('#dataEnd').datepicker('getDate');
            var days   = ((end - start)/1000/60/60/24)+1;

            jQuery('#calculated').text(days);      

              jQuery.ajax({
                 url:"prorated.php",
                 type: "POST",
                 data: {prorated_days: days, prorated_subscription: 25, prorated_package: "basic"},
                 success:function(data, result){
                   $("#prorated").html(result);
                 }
              });

        }
    });
});
</script>
<label for="dataStart">Start Date:</label>
<input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" data-role="date" />
<label for="dataEnd">End Date:</label>
<input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly />

Answer 1

jQuery ajax passes the body of the ajax response in the first parameter passed to the success function. The second parameter, the one you are using, is the textStatus. Since your ajax call was successful, the textStatus is 'success'. In your ajax success function needs to be this:

$('#prorated").html(data);