@ -11,7 +11,7 @@
placeholder="Tell us your travel requirements here: anniversary, honeymoon, family trip, birthday travel, beach, food... (optional)"
placeholder="Tell us your travel requirements here: anniversary, honeymoon, family trip, birthday travel, beach, food... (optional)"
style="height:80px;">< / textarea >
style="height:80px;">< / textarea >
< div class = "selectionBlock" >
< div class = "selectionBlock" style = "margin-bottom: 0;" >
< h4 style = "margin-top: 0; margin-bottom: 0px;" >
< h4 style = "margin-top: 0; margin-bottom: 0px;" >
Number in your group
Number in your group
< / h4 >
< / h4 >
@ -147,7 +147,41 @@
< / div >
< / div >
< / div >
< / div >
< div class = "selectionBlock" >
< h4 >
When would you travel?
< / h4 >
< div id = "date_error_msg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Select your travel data.< / div >
< / div >
< div class = "travel_group date_select" >
< input type = "radio" value = "exact travel dates" id = "exact" name = "trip_date" >
< label for = "exact" class = "family" >
I have exact travel dates.
< / label >
< / div >
< div class = "travel_group date_select" >
< input type = "radio" value = "approximate travel dates" id = "approximate" name = "trip_date" >
< label for = "approximate" class = "couple" >
I have approximate travel dates.
< / label >
< / div >
< div class = "travel_group date_select" >
< input type = "radio" value = "haven't decided travel dates" id = "yet" name = "trip_date" >
< label for = "yet" class = "solo" >
I haven't decided my travel dates.
< / label >
< / div >
< div class = "trip_date_length" id = "tripDateBlock" style = "display: none" >
< p style = "clear: both;margin-bottom: 10px;" id = "trip_date_tip" > Select your travel date.< / p >
< div id = "dateSelectionBlock" >
< div id = 'flatpickrBlock' >
< input class = "InquiryCalendar datepicker" id = "starting_date" name = "date_start" placeholder = "Starting date *" readonly = "readonly" type = "text" value = "" / >
< / div >
< input type = "month" id = "expectedMonth" name = "expected_month" placeholder = "Select your expected travel date." >
< / div >
< / div >
< / div >
< input class = "FullName" id = "realname" name = "name" placeholder = "Your name *" required = "" type = "text"
< input class = "FullName" id = "realname" name = "name" placeholder = "Your name *" required = "" type = "text"
value="" />
value="" />
< div id = "realname_errmsg" style = "display: none" >
< div id = "realname_errmsg" style = "display: none" >
@ -162,11 +196,11 @@
< div id = "email_verify_errmsg" style = "display: none" >
< div id = "email_verify_errmsg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Please verify your email< / div >
< div class = "requiredArea" style = "margin-top:-10px;" > Please verify your email< / div >
< / div >
< / div >
< input class = "InquiryCalendar" id = "starting_date" name = "date_start" placeholder = "Starting date *"
<!-- <input class="InquiryCalendar" id="starting_date" name="date_start" placeholder="Starting date *"
readonly="readonly" />
readonly="readonly" />
< div id = "starting_date_errmsg" style = "display: none" >
< div id = "starting_date_errmsg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Please enter your starting date< / div >
< div class = "requiredArea" style = "margin-top:-10px;" > Please enter your starting date< / div >
< / div >
< / div > -->
< p style = "font-size: 17px ;
< p style = "font-size: 17px ;
color: #555;
color: #555;
margin-top: -5px;
margin-top: -5px;
@ -475,16 +509,18 @@
< script src = "https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js" > < / script >
< script src = "https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js" > < / script >
< script >
< script >
document.addEventListener('DOMContentLoaded', () => {
flatpickr("#starting_date", {
dateFormat: "Y-m-d",
altInput: true,
altFormat: "F j, Y",
disableMobile: true,
minDate: "today"
});
var tour_list_button = document.getElementById("tour_list_button");
var selectedExpectedDate = '';
document.addEventListener('DOMContentLoaded', () => {
flatpickr("#starting_date", {
dateFormat: "Y-m-d",
altInput: true,
altFormat: "F j, Y",
disableMobile: true,
minDate: "today"
});
var tour_list_button = document.getElementById("tour_list_button");
var tour_list_form = document.getElementById("tour_list_form");
var tour_list_form = document.getElementById("tour_list_form");
tour_list_button.addEventListener('click', function (event) {
tour_list_button.addEventListener('click', function (event) {
@ -507,146 +543,195 @@
}
}
}
}
});
});
});
});
function validateQuickInquiryForm() {
var result = true;
var realnameVal = document.getElementById("realname").value;
var emailVal = document.getElementById("email").value;
var expectedDateVal = document.getElementById("starting_date").value;
var expectedMonthVal = document.getElementById("expectedMonth").value;
var contactVal = document.getElementById("PhoneNo").value;
function validateQuickInquiryForm() {
var realnameErrEl = document.getElementById("realname_errmsg");
var result = true;
var emailErrEl = document.getElementById("email_errmsg") ;
var realnameVal = document.getElementById("realname").value;
var emailVerifyErrEl = document.getElementById("email_verify_errmsg") ;
var emailVal = document.getElementById("email").value;
var startingDateErrEl = document.getElementById("date_error_msg") ;
var startingDateVal = document.getElementById("starting_date").value;
var contactErrEl = document.getElementById("contact_errmsg") ;
var contactVal = document.getElementById("PhoneNo").value ;
var groupErrEl = document.getElementById("group_error_msg") ;
var realnameErrEl = document.getElementById("realname_errmsg") ;
realnameErrEl.style.display = 'none' ;
var emailErrEl = document.getElementById("email_errmsg") ;
emailErrEl.style.display = 'none' ;
var emailVerifyErrEl = document.getElementById("email_verify_errmsg") ;
emailVerifyErrEl.style.display = 'none' ;
var startingDateErrEl = document.getElementById("starting_date_errmsg") ;
startingDateErrEl.style.display = 'none' ;
var contactErrEl = document.getElementById("contact_errmsg") ;
contactErrEl.style.display = 'none' ;
var groupErrEl = document.getElementById("group_error_msg") ;
groupErrEl.style.display = 'none' ;
realnameErrEl.style.display = 'none' ;
var travel_group_is_checked = false ;
emailErrEl.style.display = 'none';
document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
emailVerifyErrEl.style.display = 'none';
if (groupNode.checked) {
startingDateErrEl.style.display = 'none' ;
travel_group_is_checked = true ;
contactErrEl.style.display = 'none';
}
groupErrEl.style.display = 'none' ;
}) ;
var travel_group_is_checked = false;
if (travel_group_is_checked === false) {
document.querySelectorAll('input[name="travel_group"]').forEach(function (groupNode) {
groupErrEl.style.display = '';
if (groupNode.checked) {
result = false;
travel_group_is_checked = true;
}
}
});
if (travel_group_is_checked === false) {
var tripDate_is_checked = false;
groupErrEl.style.display = '';
if (selectedExpectedDate === 'exact') {
result = false;
tripDate_is_checked = expectedDateVal !== '';
}
} else if (selectedExpectedDate === 'approximate') {
tripDate_is_checked = expectedMonthVal !== '';
} else if (selectedExpectedDate === 'yet') {
tripDate_is_checked = true;
}
if (realnameVal === '') {
//时间选择
realnameErrEl.style.display = '';
if (!tripDate_is_checked) {
result = false;
startingDateErrEl.style.display = '';
}
result = false;
if (emailVal === '') {
emailErrEl.style.display = '';
result = false;
} else {
var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
if (!emailPattern.test(emailVal)) {
emailVerifyErrEl.style.display = '';
result = false;
}
}
}
if (startingDateVal === '') {
if (realnameVal === '') {
startingDateErrEl.style.display = '';
realnameErrEl.style.display = '';
result = false;
result = false;
}
}
if (contactVal === '') {
if (emailVal === '') {
contactErrEl.style.display = '';
emailErrEl.style.display = '';
result = false;
result = false;
}
} else {
return result;
var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
}
if (!emailPattern.test(emailVal)) {
emailVerifyErrEl.style.display = '';
result = false;
}
}
if (contactVal === '') {
contactErrEl.style.display = '';
result = false;
}
return result;
}
< / script >
< / script >
< script >
$(function () {
var $adultBlock = $('#adultBlock');
var $childrenBlock = $('#childrenBlock');
var $adultNumberInput = $('#adultNumber');
var adultNumber = $adultNumberInput.val();
var $teenagerNumberInput = $('#teenagerNumber');
var teenagerNumber = $teenagerNumberInput.val();
var $childrenNumberInput = $('#childrenNumber');
var childrenNumber = $childrenNumberInput.val();
var $infantNumberInput = $('#infantNumber');
var infantNumber = $infantNumberInput.val();
$('input[name="travel_group"]').each((i, groupEle) => {
$(groupEle).click(function (e) {
< script >
$teenagerNumberInput.val(0);
var $adultBlock = $('#adultBlock');
$childrenNumberInput.val(0);
var $childrenBlock = $('#childrenBlock');
$infantNumberInput.val(0);
var $adultNumberInput = $('#adultNumber');
var adultNumber = $adultNumberInput.val();
var $teenagerNumberInput = $('#teenagerNumber');
var teenagerNumber = $teenagerNumberInput.val();
var $childrenNumberInput = $('#childrenNumber');
var childrenNumber = $childrenNumberInput.val();
var $infantNumberInput = $('#infantNumber');
var infantNumber = $infantNumberInput.val();
$('input[name="travel_group"]').each((i, groupEle) => {
$(groupEle).click(function (e) {
$teenagerNumberInput.val(0);
var currentTarget = e.currentTarget;
$childrenNumberInput.val(0);
if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
$infantNumberInput.val(0);
$adultBlock.show();
$childrenBlock.show();
} else {
$adultBlock.show();
$childrenBlock.hide();
}
if (currentTarget.id === 'Couple') {
$adultNumberInput.val(2);
} else if (currentTarget.id === 'Solo') {
$adultNumberInput.val(1);
}
})
});
var currentTarget = e.currentTarget;
var $tripDateBlock = $('#tripDateBlock');
if (currentTarget.id === 'Family' || currentTarget.id === 'Other') {
var $expectedDate = $('#flatpickrBlock');
$adultBlock.show();
var $expectedMonth = $('#expectedMonth');
$childrenBlock.show();
var $dateSelectionBlock = $('#dateSelectionBlock');
} else {
var $tripDateTip = $('#trip_date_tip');
$adultBlock.show();
$childrenBlock.hide();
}
if (currentTarget.id === 'Couple') {
$adultNumberInput.val(2);
} else if (currentTarget.id === 'Solo') {
$adultNumberInput.val(1);
}
})
});
$('input[name="trip_date"]').each((i, tripDateEle) => {
$(tripDateEle).click(function (e) {
$expectedDate.val('');
$expectedMonth.val('');
$tripDateBlock.show();
var selectedTripDate = e.currentTarget;
selectedExpectedDate = selectedTripDate.id;
if (selectedTripDate.id === 'exact') {
$dateSelectionBlock.show();
$expectedMonth.hide();
$expectedDate.show();
$tripDateTip.show();
} else if (selectedTripDate.id === 'approximate') {
$dateSelectionBlock.show();
$expectedDate.hide();
$expectedMonth.show();
$tripDateTip.show();
} else if (selectedTripDate.id === 'yet') {
$dateSelectionBlock.hide();
$tripDateTip.hide();
}
})
});
//成人
//成人
$('#plusAdult').click(function () {
$('#plusAdult').click(function () {
adultNumber++;
adultNumber++;
$adultNumberInput.val(adultNumber);
});
$('#minusAdult').click(function () {
if (adultNumber > 1) {
adultNumber--;
$adultNumberInput.val(adultNumber);
$adultNumberInput.val(adultNumber);
}
});
});
$('#minusAdult').click(function () {
// 青少年
if (adultNumber > 1) {
$('#plusTeenager').click(function () {
adultNumber--;
teenagerNumber++;
$adultNumberInput.val(adultNumber) ;
$teenagerNumberInput.val(teenagerNumber);
}
});
});
$('#minusTeenager').click(function () {
// 青少年
if (teenagerNumber > 0) {
$('#plusTeenager').click(function ( ) {
teenagerNumber--;
teenagerNumber++ ;
$teenagerNumberInput.val(teenagerNumber);
$teenagerNumberInput.val(teenagerNumber);
}
});
});
$('#minusTeenager').click(function () {
// 儿童
if (teenagerNumber > 0) {
$('#plusChildren').click(function () {
teenagerNumber--;
childrenNumber++ ;
$teenagerNumberInput.val(teenagerNumber) ;
$childrenNumberInput.val(childrenNumber);
}
});
});
$('#minusChildren').click(function () {
// 儿童
if (childrenNumber > 0 ) {
$('#plusChildren').click(function ( ) {
childrenNumber-- ;
childrenNumber++ ;
$childrenNumberInput.val(childrenNumber);
$childrenNumberInput.val(childrenNumber);
}
});
});
$('#minusChildren').click(function () {
// 婴儿
if (childrenNumber > 0) {
$('#plusInfant').click(function () {
childrenNumber--;
infantNumber++ ;
$childrenNumberInput.val(childrenNumber) ;
$infantNumberInput.val(infantNumber);
}
});
});
$('#minusInfant').click(function () {
// 婴儿
if (infantNumber > 0 ) {
$('#plusInfant').click(function ( ) {
infantNumber-- ;
infantNumber++ ;
$infantNumberInput.val(infantNumber);
$infantNumberInput.val(infantNumber);
});
$('#minusInfant').click(function () {
if (infantNumber > 0) {
infantNumber--;
$infantNumberInput.val(infantNumber);
}
});
})
< / script >
< style >
.date_select {width: 28% !important;}
@media (max-width: 750px){
.date_select {
width: 93% !important;
}
}
});
}
< / script >
< / s tyle >