Making live total update after jquery datepicker field is updated
<p>I have five fields on my site. One is a jquery datepicker check in date and the second one is a checkout date. The next two are a "total nights" field (that is the calculation of the total days between the date fields) and the 4th field is a dropdown caled "Rates" that provides the rate per night for the room selected. My script (below) calculates the proper TOTAL by multiplying the number in the "total nights" field by the "rates" field, giving me an answer in the TOTAL price field (which is my 5th field), but I'm running into a problem.</p>

<p>When I go back and change the checkout date to be a later date, the 'total nights' field updates accordingly, but my TOTAL input field doesn't budge, it just stays the same unless I change the selection in the drop down menu. Is there any way to make it so that a change in the checkout date (jquery datepicker) field either RESETS the "rate" field or properly updates the total field?</p>

<p>Here's my code to provide the proper calculation for the TOTAL price (total nights * rate).</p>

<pre><code>//Now let's calculat the total price
$('#publishForm').bind('keypress keydown keyup change',function(){
    var value = $('input[name=totaldays]').attr("value");
        value2 = $('#select option:selected').attr("title");

    total_suite = parseInt(value2);
    total_days = parseInt(value);

    var total = '';
    total = total_suite * total_days;

/* output */

    $(".pTotal").replaceWith('&lt;span class="pTotal"&gt;' + total + '&lt;/span&gt;');
    $(".pTotal").formatCurrency();
    $("#price").replaceWith('&lt;input type="hidden" id="price" value="' + total +'" name="price" style="border:none;font-size:14px;margin-top:10px;" readonly="readonly" /&gt;');
});
});
</code></pre>

<p>Here is my datepicker script (linked below), if necessary. I got it working last night thanks to the help of another stackoverflow user. Not sure if it's relevant, but wanted to include it anyway.</p>

<p>EDIT: Here is the script that does all my datepicker magic and also updates the total nights field accordingly.</p>

<pre><code>// Calendar Dates
/* create an array of days which need to be disabled */
var disabledDays = ["11-13-2012","11-14-2012","11-15-2012","11-29-2012","11-30-2012"];

/* utility functions */
function nationalDays(date) {
  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
  for (i = 0; i &lt; disabledDays.length; i++) {
    if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() &gt; date) {
      return [false];
    }
  }
  return [true];
}


//Block the Weekends
function noWeekendsOrHolidays(date) {
   var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
}




function days() {
            var a = $("#datepicker_start").datepicker('getDate').getTime(),
                b = $("#datepicker_end").datepicker('getDate').getTime(),
                c = 24*60*60*1000,
                diffDays = Math.round(Math.abs((a - b)/(c)));
            $("#totaldays").val(diffDays)
}


$(document).ready(function () {
$.datepicker.setDefaults({dateFormat: 'mm/dd/yy',minDate: +1,changeMonth: true,changeYear: true,numberOfMonths: 2,constrainInput:true,beforeShowDay:nationalDays,});
        var selector = function (dateStr) {
            var d1 = $('#datepicker_start').datepicker('getDate');
            var d2 = $('#datepicker_end').datepicker('getDate');
            var diff = 0;
            if (d1 &amp;&amp; d2) {
                diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
            }
            $('#totaldays').val(diff);
        }
$('#datepicker_start').datepicker({
            onSelect: function(selectedDate) {
    var minDate = $(this).datepicker('getDate');
    if (minDate) {minDate.setDate(minDate.getDate() + 3);}//min days requires
    $('#datepicker_end').datepicker('option', 'minDate', minDate || 1); // Date + 1 or tomorrow by default
    days();
}});
$('#datepicker_end').datepicker({minDate: 1, onSelect: function(selectedDate) {
    var maxDate = $(this).datepicker('getDate');    
    if (maxDate) {maxDate.setDate(maxDate.getDate() - 1);}
    $('#datepicker_start').datepicker('option', 'maxDate', maxDate); // Date - 1    
    days();
}});
    $('#datepicker_start,#datepicker_end').change(selector)
        });
</code></pre>
