Buddha Belly
HTML
<form>
Date & Time:
<input type="text" id="date" placeholder="Choose a date..." value="" />
<select name="times" id="times">
<option value="12pm" selected="selected">12pm</option>
<option value="1pm">1pm</option>
<option value="2pm">2pm</option>
<option value="3pm">3pm</option>
<option value="4pm">4pm</option>
<option value="5pm">5pm</option>
<option value="6pm">6pm</option>
<option value="7pm">7pm</option>
<option value="8pm">8pm</option>
<option value="9pm">9pm</option>
<option value="10pm">10pm</option>
<option value="11pm">11pm</option>
</select>
<br />Name:
<input type="text" name="name" placeholder="Your Name" id="name" />
<br />Number in group:
<input type="text" name="group_number" placeholder="Group Size" id="group_number" />
<br />E-Mail Address:
<input type="text" name="e-mail" placeholder="Your E-Mail Address" id="e-mail" />
<br />Phone Number:
<input type="text" name="phone" placeholder="Your Phone Number" id="phone" />
<br />Additional Information:
<textarea name="additional_info" placeholder="Additional Information" id="additional_info"></textarea>
<br />
<input type="hidden" id="selected_day" value="" />
<div id="confirm"></div>
<input type="submit" value="Send" name="submit">
</form>
CSS
#times {
display: none;
}
#confirm {
display: none;
}
JavaScript
$(document).ready(function () {
var selectedDay = '#selected_day';
$(function () {
$("#date").datepicker({
minDate: 0,
dateFormat: "DD, d M yy",
altField: selectedDay,
altFormat: "DD",
onSelect: function () {
$(selectedDay).change()
}
});
function onchange() {
if ($(selectedDay).val() === '') {
$('#times').fadeOut(500);
} else {
$('#times').fadeIn(500);
}
if ($(selectedDay).val() === 'Friday' || $(selectedDay).val() === 'Saturday') {
$('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').attr('disabled', 'disabled');
} else {
$('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').removeAttr('disabled');
}
$('#confirm').text('You have chosen ' + $('#date').val() + ' at ' + $('#times').val() + '. This will be booked under the name of ' + $('#name').val() + ' for ' + $('#group_number').val() + ' people. We will contact you on either your phone number (' + $('#phone').val() + ') or your e-mail address (' + $('#e-mail').val() + ') to confirm your booking with us. Thank you for choosing Buddha Belly');
}
$('#selected_day, #times, #name, #group_number, #e-mail, #phone, #additional_info').on('change', onchange);
$('#phone').on('keyup', function () {
onchange();
$('#confirm').fadeIn(500);
});
});
});