@ -6,13 +6,15 @@
< h3 style = "text-align: center; font-size: 20px; line-height: 22px;" > Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.< / h3 >
< h3 style = "text-align: center; font-size: 20px; line-height: 22px;" > Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.< / h3 >
< form action = "/orders/quick_inquiry_save" method = "post" novalidate = "" id = "info_page_form" >
< form action = "/orders/quick_inquiry_save" method = "post" novalidate = "" id = "info_page_form" >
< textarea id = "form_additionalrequirements" name = "additional_requirements" placeholder = "E.g.:
< textarea id = "form_additionalrequirements" name = "additional_requirements" placeholder = "E.g. This is a big trip for my birthday , anniversary , honeymoon , retirement , kid ' s graduation , bucket list …
This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's graduation, bucket list..." style="height:70px;">< / textarea >
Our must-dos/must-sees are…" style="height:90px;">< / textarea >
<!--
< div class = "selectionBlock" >
< div class = "selectionBlock" style = "margin-bottom: 10px;" >
< h4 >
< p style = "
Number in your group
margin-bottom: 0px;
< / h4 >
">
< strong > Number in your group< / strong >
< / p >
< div id = "group_error_msg" style = "display: none" >
< div id = "group_error_msg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Please select number in your group.< / div >
< div class = "requiredArea" style = "margin-top:-10px;" > Please select number in your group.< / div >
< / div >
< / div >
@ -42,13 +44,10 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
< / div >
< / div >
< div id = "adultBlock" style = "display: none" >
< div id = "adultBlock" style = "display: none" >
< p style = "
margin-bottom: 0;
font-size: 22px;
margin-top: 20px;
">When you plan to take the trip:< / p >
< div class = "peopleSelect" >
< div class = "peopleSelect" >
< p style = "margin-top: 20px;" > < strong >
< p style = " margin-top: 10px ;
margin-bottom: 10px;">< strong >
Adults (≥18 years old)
Adults (≥18 years old)
< / strong > < / p >
< / strong > < / p >
< button class = "minaddBtn reduceadult" id = "minusAdult" type = "button"
< button class = "minaddBtn reduceadult" id = "minusAdult" type = "button"
@ -89,7 +88,7 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
< / div >
< / div >
< div class = "clear" > < / div >
< div class = "clear" > < / div >
< div id = "childrenBlock" style = "display: none" >
< div id = "childrenBlock" style = "display: none" >
< p style = " margin-top: 0;"> < strong > Children< / strong > < / p >
< p style = " margin-top: -1 0px; margin-bottom: 5px ;"> < strong > Children (age of children at time of trip) < / strong > < / p >
< div class = "kids_age" >
< div class = "kids_age" >
< p style = "margin-bottom: 5px;" > 10-17 yrs old< / p >
< p style = "margin-bottom: 5px;" > 10-17 yrs old< / p >
< select class = "kids_number" id = "teenagerNumber" name = "teenager_10_17_yrs" >
< select class = "kids_number" id = "teenagerNumber" name = "teenager_10_17_yrs" >
@ -139,7 +138,48 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
< / div >
< / div >
< / div >
< / div >
-->
< div class = "selectionBlock" >
< p style = " margin-top: 10px ;
margin-bottom: 0;">< strong >
When would you travel?
< / strong > < / p >
< div class = "travel_group date_select" >
< input type = "radio" value = "exact travel dates" id = "exact" name = "trip_date" >
< label for = "exact" class = "updatedestination" style = "font-size: 18px;" >
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 = "updatedestination" style = "font-size: 18px;" >
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 = "updatedestination" style = "font-size: 18px;" >
Not decided travel dates
< / label >
< / div >
< div class = "trip_date_length" id = "tripDateBlock" style = "display: none" >
< p style = "margin-bottom: 10px;" > Select your travel date and trip length (days).< / p >
< div id = 'dateSelectionBlock' >
< input type = "text" class = "arrivalDate datepicker" id = "Date_Start" name = "date_start" value = "" placeholder = "mm/dd/yyyy" autocomplete = "off" style = "width: auto; float: left; margin-right: 15px;" >
< input type = "month" id = "expectedMonth" name = "expected_month" placeholder = "Select your expected travel date." style = "width: auto; float: left; margin-right: 15px;" >
< / div >
< div class = "peopleSelect" >
< div class = "numberBtn" >
< input class = "minaddBtn" id = "tripLengthMinus" type = "button" value = "-" >
< input class = "number" type = "text" value = "14" id = "tripLengthNumber" name = "trip_length" >
< input class = "minaddBtn" id = "tripLengthPlus" type = "button" value = "+" >
< / div >
< / div >
< / div >
< / div >
< input class = "FullName" id = "realname" name = "name" placeholder = "Your name *" required = "" type = "text" value = "" / >
< input class = "FullName" id = "realname" name = "name" placeholder = "Your name *" required = "" type = "text" value = "" / >
< div id = "realname_errmsg" style = "display: none" >
< div id = "realname_errmsg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Please enter your name< / div >
< div class = "requiredArea" style = "margin-top:-10px;" > Please enter your name< / div >
@ -152,12 +192,7 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
< 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 *" readonly = "readonly" / >
< div id = "starting_date_errmsg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Please enter your starting date< / div >
< / div >
-->
< select name = "country_code" class = "country_code" >
< select name = "country_code" class = "country_code" >
< option style = "font-weight: 600;" value = "United States +1" > United States +1< / option >
< option style = "font-weight: 600;" value = "United States +1" > United States +1< / option >
< option style = "font-weight: 600;" value = "United Kingdom +44" > United Kingdom +44< / option >
< option style = "font-weight: 600;" value = "United Kingdom +44" > United Kingdom +44< / option >
@ -456,180 +491,235 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
-->
-->
< / div >
< / div >
< 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", {
var selectedExpectedDate = '';
dateFormat: "Y-m-d",
document.addEventListener('DOMContentLoaded', () => {
altInput: true,
flatpickr("#starting_date", {
altFormat: "F j, Y",
dateFormat: "Y-m-d",
disableMobile: true,
altInput: true,
minDate: "today"
altFormat: "F j, Y",
disableMobile: true,
minDate: "today"
});
var quick_inquiry_button = document.getElementById("quick_inquiry_button");
var quick_inquiry_form = document.getElementById("quick_inquiry_form");
quick_inquiry_button.addEventListener('click', function(event) {
var validateResult = validateQuickInquiryForm();
if (validateResult) {
if (typeof(grecaptcha) === "undefined") {
console.warn('grecaptcha is disabled.');
quick_inquiry_form.submit();
} else {
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
var el = document.createElement("input");
el.type = "hidden";
el.name = "__grecaptcha_token__";
el.value = token;
quick_inquiry_form.appendChild(el);
quick_inquiry_form.submit();
quick_inquiry_button.innerText = "Submitted successfully";
});
}
}
});
});
});
var info_page_button = document.getElementById("info_page_button");
var info_page_form = document.getElementById("info_page_form");
info_page_button.addEventListener('click', function(event) {
function validateQuickInquiryForm() {
var validateResult = validateQuickInquiryForm();
var result = true;
if (validateResult) {
var realnameVal = document.getElementById("realname").value;
if (typeof(grecaptcha) === "undefined") {
var emailVal = document.getElementById("email").value;
console.warn('grecaptcha is disabled.');
var expectedDateVal = document.getElementById("starting_date").value;
info_page_form.submit();
var expectedMonthVal = document.getElementById("expectedMonth").value;
} else {
var contactVal = document.getElementById("PhoneNo").value;
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
var realnameErrEl = document.getElementById("realname_errmsg");
var el = document.createElement("input");
var emailErrEl = document.getElementById("email_errmsg");
el.type = "hidden";
var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
el.name = "__grecaptcha_token__";
var startingDateErrEl = document.getElementById("date_error_msg");
el.value = token;
var contactErrEl = document.getElementById("contact_errmsg");
info_page_form.appendChild(el);
var groupErrEl = document.getElementById("group_error_msg");
info_page_form.submit();
info_page_button.innerText = "Submitted successfully";
realnameErrEl.style.display = 'none';
});
emailErrEl.style.display = 'none';
emailVerifyErrEl.style.display = 'none';
startingDateErrEl.style.display = 'none';
contactErrEl.style.display = 'none';
groupErrEl.style.display = 'none';
var travel_group_is_checked = false;
document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
if (groupNode.checked) {
travel_group_is_checked = true;
}
}
});
if (travel_group_is_checked === false) {
groupErrEl.style.display = '';
result = false;
}
}
});
var tripDate_is_checked = false;
});
if (selectedExpectedDate === 'exact') {
tripDate_is_checked = expectedDateVal !== '';
function validateQuickInquiryForm() {
} else if (selectedExpectedDate === 'approximate') {
var result = true;
tripDate_is_checked = expectedMonthVal !== '';
var realnameVal = document.getElementById("realname").value;
} else if (selectedExpectedDate === 'yet') {
var emailVal = document.getElementById("email").value;
tripDate_is_checked = true;
// var startingDateVal = document.getElementById("starting_date").value;
}
var contactVal = document.getElementById("PhoneNo").value;
//时间选择
var realnameErrEl = document.getElementById("realname_errmsg");
if (!tripDate_is_checked) {
var emailErrEl = document.getElementById("email_errmsg");
startingDateErrEl.style.display = '';
var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
result = false;
// var startingDateErrEl = document.getElementById("starting_date_errmsg");
}
var contactErrEl = document.getElementById("contact_errmsg");
// var groupErrEl = document.getElementById("group_error_msg");
if (realnameVal === '') {
realnameErrEl.style.display = '';
realnameErrEl.style.display = 'none';
emailErrEl.style.display = 'none';
emailVerifyErrEl.style.display = 'none';
// startingDateErrEl.style.display = 'none';
contactErrEl.style.display = 'none';
// groupErrEl.style.display = 'none';
// var travel_group_is_checked = false;
// document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
// if (groupNode.checked) {
// travel_group_is_checked = true;
// }
// });
// if (travel_group_is_checked === false) {
// groupErrEl.style.display = '';
// result = false;
// }
if (realnameVal === '') {
realnameErrEl.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;
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 (contactVal === '') {
contactErrEl.style.display = '';
result = false;
}
return result;
}
}
// if (startingDateVal === '') {
< / script >
// startingDateErrEl.style.display = '';
< script >
// result = false;
// }
$(function () {
if (contactVal === '') {
var $adultBlock = $('#adultBlock');
contactErrEl.style.display = '';
var $childrenBlock = $('#childrenBlock');
result = false;
var $adultNumberInput = $('#adultNumber');
}
var adultNumber = $adultNumberInput.val();
return result;
var $teenagerNumberInput = $('#teenagerNumber');
}
var teenagerNumber = $teenagerNumberInput.val();
< / script >
var $childrenNumberInput = $('#childrenNumber');
var childrenNumber = $childrenNumberInput.val();
var $infantNumberInput = $('#infantNumber');
< script >
var infantNumber = $infantNumberInput.val();
// var $adultBlock = $('#adultBlock');
$('input[name="travel_group"]').each((i, groupEle) => {
// var $childrenBlock = $('#childrenBlock');
$(groupEle).click(function (e) {
// var $adultNumberInput = $('#adultNumber');
// var adultNumber = $adultNumberInput.val();
$teenagerNumberInput.val(0);
// var $teenagerNumberInput = $('#teenagerNumber');
$childrenNumberInput.val(0);
// var teenagerNumber = $teenagerNumberInput.val();
$infantNumberInput.val(0);
// var $childrenNumberInput = $('#childrenNumber');
// var childrenNumber = $childrenNumberInput.val();
var currentTarget = e.currentTarget;
// var $infantNumberInput = $('#infantNumber');
if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
// var infantNumber = $infantNumberInput.val();
$adultBlock.show();
// $('input[name="travel_group"]').each((i, groupEle) => {
$childrenBlock.show();
// $(groupEle).click(function (e) {
} else {
$adultBlock.show();
// $teenagerNumberInput.val(0);
$childrenBlock.hide();
// $childrenNumberInput.val(0);
}
// $infantNumberInput.val(0);
if (currentTarget.id === 'Couple') {
$adultNumberInput.val(2);
// var currentTarget = e.currentTarget;
} else if (currentTarget.id === 'Solo') {
// if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
$adultNumberInput.val(1);
// $adultBlock.show();
}
// $childrenBlock.show();
})
// } else {
});
// $adultBlock.show();
// $childrenBlock.hide();
var $tripDateBlock = $('#tripDateBlock');
// }
var $expectedDate = $('#Date_Start');
// if (currentTarget.id === 'Couple') {
var $expectedMonth = $('#expectedMonth');
// $adultNumberInput.val(2);
var $dateSelectionBlock = $('#dateSelectionBlock');
// } else if (currentTarget.id === 'Solo') {
var $expectedTravelDateBlock = $('#expectedTravelDateBlock');
// $adultNumberInput.val(1);
var selectedExpectedDate = '';
// }
$('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();
$expectedTravelDateBlock.hide();
$expectedMonth.hide();
$expectedDate.show();
} else if (selectedTripDate.id === 'approximate') {
$dateSelectionBlock.show();
$expectedTravelDateBlock.hide();
$expectedDate.hide();
$expectedMonth.show();
} else if (selectedTripDate.id === 'yet') {
$dateSelectionBlock.hide();
$expectedTravelDateBlock.show();
}
})
});
// //成人
var tripLength = $('#tripLengthNumber').val();
// $('#plusAdult').click(function () {
// adultNumber++;
//成人
// $adultNumberInput.val(adultNumber);
$('#plusAdult').click(function () {
// });
adultNumber++;
// $('#minusAdult').click(function () {
$adultNumberInput.val(adultNumber);
// if (adultNumber > 1) {
});
// adultNumber--;
$('#minusAdult').click(function () {
// $adultNumberInput.val(adultNumber);
if (adultNumber > 1) {
// }
adultNumber--;
// });
$adultNumberInput.val(adultNumber);
// // 青少年
}
// $('#plusTeenager').click(function () {
});
// teenagerNumber++;
// 青少年
// $teenagerNumberInput.val(teenagerNumber);
$('#plusTeenager').click(function () {
// });
teenagerNumber++;
// $('#minusTeenager').click(function () {
$teenagerNumberInput.val(teenagerNumber);
// if (teenagerNumber > 0) {
});
// teenagerNumber--;
$('#minusTeenager').click(function () {
// $teenagerNumberInput.val(teenagerNumber);
if (teenagerNumber > 0) {
// }
teenagerNumber--;
// });
$teenagerNumberInput.val(teenagerNumber);
// // 儿童
}
// $('#plusChildren').click(function () {
});
// childrenNumber++;
// 儿童
// $childrenNumberInput.val(childrenNumber);
$('#plusChildren').click(function () {
// });
childrenNumber++;
// $('#minusChildren').click(function () {
$childrenNumberInput.val(childrenNumber);
// if (childrenNumber > 0) {
});
// childrenNumber--;
$('#minusChildren').click(function () {
// $childrenNumberInput.val(childrenNumber);
if (childrenNumber > 0) {
// }
childrenNumber--;
// });
$childrenNumberInput.val(childrenNumber);
// // 婴儿
}
// $('#plusInfant').click(function () {
});
// infantNumber++;
// 婴儿
// $infantNumberInput.val(infantNumber);
$('#plusInfant').click(function () {
// });
infantNumber++;
// $('#minusInfant').click(function () {
$infantNumberInput.val(infantNumber);
// if (infantNumber > 0) {
});
// infantNumber--;
$('#minusInfant').click(function () {
// $infantNumberInput.val(infantNumber);
if (infantNumber > 0) {
// }
infantNumber--;
// });
$infantNumberInput.val(infantNumber);
< / script >
}
});
})
< / script >
< style >
.date_select {width: 27.5% !important;}
.age_range { margin-top: 45px;}
@media (max-width: 750px){
.date_select {
width: 93% !important;
}
.age_range { margin-top: 0;}
}
< / style >