I have a sample reservation form that should display the total price and number of days after the user enters dates and clicks submit. However, the submit button is disabled and does not respond when clicking. I am using rails/ajax/javascript in this example. I am expecting values to be populated in the "message" and "preview" div ids, but nothing.
<%= form_for([@post, @post.reservations.new]) do |f| %>
<div class="row">
<div class="col-md-6">
<label>Begin Date</label>
<%= f.text_field :start_date, readonly: 'true', placeholder: 'Start Date', class: 'form-control' %>
</div>
<div class="col-md-6">
<label>Return Date</label>
<%= f.text_field :end_date, readonly: 'true', placeholder: 'End Date', class: 'form-control', disabled: true %>
</div>
</div>
<%= f.hidden_field :post_id, value: @post.id %>
<%= f.hidden_field :price, value: @post.price %>
<%= f.hidden_field :total, id: 'reservation_total' %>
<h4><span id="message"></span></h4>
<div id="preview" style="display: none">
<table class="reservation-table">
<tbody>
<tr>
<td>Day(s)</td>
<td><span id="reservation_days"></span></td>
</tr>
<tr>
<td>Total</td>
<td><span id="reservation_sum"></span></td>
</tr>
</tbody>
</table><br>
</div>
<br>
<%= f.submit "Book Now", id: "btn_book", class: "btn btn-primary wide", disabled: 'true' %>
<% end %>
<script>
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
return [$.inArray(dmy, unavailableDates) == -1];
}
$(function() {
unavailableDates = [];
$.ajax({
url: '/preload',
data: {'post_id': <%= @post.id %>},
dataType: 'json',
success: function(data) {
$.each(data, function(arrID, arrValue) {
for(var d = new Date(arrValue.start_date); d <= new Date(arrValue.end_date); d.setDate(d.getDate() + 1)) {
unavailableDates.push($.datepicker.formatDate('d-m-yy',d));
console.log(d);
}
});
$('#reservation_start_date').datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
maxDate: '3m',
beforeShowDay: unavailable,
onSelect: function(selected) {
$('#reservation_end_date').datepicker("option", "minDate", selected);
$('#reservation_end_date').attr('disabled', false);
}
});
$('#reservation_end_date').datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
maxDate: '3m',
beforeShowDay: unavailable,
onSelect: function(selected) {
$('#reservation_start_date').datepicker("option", "maxDate", selected);
var start_date = $('#reservation_start_date').datepicker('getDate');
var end_date = $(this).datepicker('getDate');
var days = (end_date - start_date)/1000/60/60/24 + 1;
var input = {
'start_date': start_date,
'end_date': end_date,
'post_id': <%= @post.id %>
}
$.ajax({
url: "/preview",
data: input,
sucess: function(data) {
if (data.conflict) {
$('#message').text("This date range is not available.");
$('#preview').hide();
$('#btn_book').attr('disabled', true);
} else {
$('#message').text("This date range is OK.");
$('#preview').show();
$('#btn_book').attr('disabled', false);
}
}
}); // end ajax
} // end onSelect
}); // end reservation_end_date
}
});
});
</script>