@ -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,9 +491,11 @@ 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', () => {
var selectedExpectedDate = '';
document.addEventListener('DOMContentLoaded', () => {
flatpickr("#starting_date", {
flatpickr("#starting_date", {
dateFormat: "Y-m-d",
dateFormat: "Y-m-d",
altInput: true,
altInput: true,
@ -467,15 +504,15 @@ document.addEventListener('DOMContentLoaded', () => {
minDate: "today"
minDate: "today"
});
});
var info_page_button = document.getElementById("info_page _button");
var quick_inquiry_button = document.getElementById("quick_inquiry _button");
var info_page_form = document.getElementById("info_page _form");
var quick_inquiry_form = document.getElementById("quick_inquiry _form");
info_page _button.addEventListener('click', function(event) {
quick_inquiry _button.addEventListener('click', function(event) {
var validateResult = validateQuickInquiryForm();
var validateResult = validateQuickInquiryForm();
if (validateResult) {
if (validateResult) {
if (typeof(grecaptcha) === "undefined") {
if (typeof(grecaptcha) === "undefined") {
console.warn('grecaptcha is disabled.');
console.warn('grecaptcha is disabled.');
info_page _form.submit();
quick_inquiry _form.submit();
} else {
} else {
grecaptcha.enterprise.ready(async () => {
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
@ -483,48 +520,63 @@ document.addEventListener('DOMContentLoaded', () => {
el.type = "hidden";
el.type = "hidden";
el.name = "__grecaptcha_token__";
el.name = "__grecaptcha_token__";
el.value = token;
el.value = token;
info_page _form.appendChild(el);
quick_inquiry _form.appendChild(el);
info_page _form.submit();
quick_inquiry _form.submit();
info_page _button.innerText = "Submitted successfully";
quick_inquiry _button.innerText = "Submitted successfully";
});
});
}
}
}
}
});
});
});
});
function validateQuickInquiryForm() {
function validateQuickInquiryForm() {
var result = true;
var result = true;
var realnameVal = document.getElementById("realname").value;
var realnameVal = document.getElementById("realname").value;
var emailVal = document.getElementById("email").value;
var emailVal = document.getElementById("email").value;
// var startingDateVal = document.getElementById("starting_date").value;
var expectedDateVal = document.getElementById("starting_date").value;
var expectedMonthVal = document.getElementById("expectedMonth").value;
var contactVal = document.getElementById("PhoneNo").value;
var contactVal = document.getElementById("PhoneNo").value;
var realnameErrEl = document.getElementById("realname_errmsg");
var realnameErrEl = document.getElementById("realname_errmsg");
var emailErrEl = document.getElementById("email_errmsg");
var emailErrEl = document.getElementById("email_errmsg");
var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
// var startingDateErrEl = document.getElementById("starting_ date_errmsg");
var startingDateErrEl = document.getElementById("date_error_ msg");
var contactErrEl = document.getElementById("contact_errmsg");
var contactErrEl = document.getElementById("contact_errmsg");
// var groupErrEl = document.getElementById("group_error_msg");
var groupErrEl = document.getElementById("group_error_msg");
realnameErrEl.style.display = 'none';
realnameErrEl.style.display = 'none';
emailErrEl.style.display = 'none';
emailErrEl.style.display = 'none';
emailVerifyErrEl.style.display = 'none';
emailVerifyErrEl.style.display = 'none';
// startingDateErrEl.style.display = 'none';
startingDateErrEl.style.display = 'none';
contactErrEl.style.display = 'none';
contactErrEl.style.display = 'none';
// groupErrEl.style.display = 'none';
groupErrEl.style.display = 'none';
// var travel_group_is_checked = false;
var travel_group_is_checked = false;
// document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
// if (groupNode.checked) {
if (groupNode.checked) {
// travel_group_is_checked = true;
travel_group_is_checked = true;
// }
}
// });
});
// if (travel_group_is_checked === false) {
if (travel_group_is_checked === false) {
// groupErrEl.style.display = '';
groupErrEl.style.display = '';
// result = false;
result = false;
// }
}
var tripDate_is_checked = false;
if (selectedExpectedDate === 'exact') {
tripDate_is_checked = expectedDateVal !== '';
} else if (selectedExpectedDate === 'approximate') {
tripDate_is_checked = expectedMonthVal !== '';
} else if (selectedExpectedDate === 'yet') {
tripDate_is_checked = true;
}
//时间选择
if (!tripDate_is_checked) {
startingDateErrEl.style.display = '';
result = false;
}
if (realnameVal === '') {
if (realnameVal === '') {
realnameErrEl.style.display = '';
realnameErrEl.style.display = '';
@ -540,96 +592,134 @@ function validateQuickInquiryForm() {
result = false;
result = false;
}
}
}
}
// if (startingDateVal === '') {
// startingDateErrEl.style.display = '';
// result = false;
// }
if (contactVal === '') {
if (contactVal === '') {
contactErrEl.style.display = '';
contactErrEl.style.display = '';
result = false;
result = false;
}
}
return result;
return result;
}
}
< / script > < / script >
< script >
< script > $(function () {
// var $adultBlock = $('#adultBlock');
var $adultBlock = $('#adultBlock');
// var $childrenBlock = $('#childrenBlock');
var $childrenBlock = $('#childrenBlock');
// var $adultNumberInput = $('#adultNumber');
var $adultNumberInput = $('#adultNumber');
// var adultNumber = $adultNumberInput.val();
var adultNumber = $adultNumberInput.val();
// var $teenagerNumberInput = $('#teenagerNumber');
var $teenagerNumberInput = $('#teenagerNumber');
// var teenagerNumber = $teenagerNumberInput.val();
var teenagerNumber = $teenagerNumberInput.val();
// var $childrenNumberInput = $('#childrenNumber');
var $childrenNumberInput = $('#childrenNumber');
// var childrenNumber = $childrenNumberInput.val();
var childrenNumber = $childrenNumberInput.val();
// var $infantNumberInput = $('#infantNumber');
var $infantNumberInput = $('#infantNumber');
// var infantNumber = $infantNumberInput.val();
var infantNumber = $infantNumberInput.val();
// $('input[name="travel_group"]').each((i, groupEle) => {
$('input[name="travel_group"]').each((i, groupEle) => {
// $(groupEle).click(function (e) {
$(groupEle).click(function (e) {
// $teenagerNumberInput.val(0);
$teenagerNumberInput.val(0);
// $childrenNumberInput.val(0);
$childrenNumberInput.val(0);
// $infantNumberInput.val(0);
$infantNumberInput.val(0);
// var currentTarget = e.currentTarget;
var currentTarget = e.currentTarget;
// if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
// $adultBlock.show();
$adultBlock.show();
// $childrenBlock.show();
$childrenBlock.show();
// } else {
} else {
// $adultBlock.show();
$adultBlock.show();
// $childrenBlock.hide();
$childrenBlock.hide();
// }
}
// if (currentTarget.id === 'Couple') {
if (currentTarget.id === 'Couple') {
// $adultNumberInput.val(2);
$adultNumberInput.val(2);
// } else if (currentTarget.id === 'Solo') {
} else if (currentTarget.id === 'Solo') {
// $adultNumberInput.val(1);
$adultNumberInput.val(1);
// }
}
// })
})
// });
});
var $tripDateBlock = $('#tripDateBlock');
// //成人
var $expectedDate = $('#Date_Start');
// $('#plusAdult').click(function () {
var $expectedMonth = $('#expectedMonth');
// adultNumber++;
var $dateSelectionBlock = $('#dateSelectionBlock');
// $adultNumberInput.val(adultNumber);
var $expectedTravelDateBlock = $('#expectedTravelDateBlock');
// });
var selectedExpectedDate = '';
// $('#minusAdult').click(function () {
$('input[name="trip_date"]').each((i, tripDateEle) => {
// if (adultNumber > 1) {
$(tripDateEle).click(function (e) {
// adultNumber--;
$expectedDate.val('');
// $adultNumberInput.val(adultNumber);
$expectedMonth.val('');
// }
$tripDateBlock.show();
// });
var selectedTripDate = e.currentTarget;
// // 青少年
selectedExpectedDate = selectedTripDate.id;
// $('#plusTeenager').click(function () {
if (selectedTripDate.id === 'exact') {
// teenagerNumber++;
$dateSelectionBlock.show();
// $teenagerNumberInput.val(teenagerNumber);
$expectedTravelDateBlock.hide();
// });
$expectedMonth.hide();
// $('#minusTeenager').click(function () {
$expectedDate.show();
// if (teenagerNumber > 0) {
} else if (selectedTripDate.id === 'approximate') {
// teenagerNumber--;
$dateSelectionBlock.show();
// $teenagerNumberInput.val(teenagerNumber);
$expectedTravelDateBlock.hide();
// }
$expectedDate.hide();
// });
$expectedMonth.show();
// // 儿童
} else if (selectedTripDate.id === 'yet') {
// $('#plusChildren').click(function () {
$dateSelectionBlock.hide();
// childrenNumber++;
$expectedTravelDateBlock.show();
// $childrenNumberInput.val(childrenNumber);
}
// });
})
// $('#minusChildren').click(function () {
});
// if (childrenNumber > 0) {
// childrenNumber--;
var tripLength = $('#tripLengthNumber').val();
// $childrenNumberInput.val(childrenNumber);
// }
//成人
// });
$('#plusAdult').click(function () {
// // 婴儿
adultNumber++;
// $('#plusInfant').click(function () {
$adultNumberInput.val(adultNumber);
// infantNumber++;
});
// $infantNumberInput.val(infantNumber);
$('#minusAdult').click(function () {
// });
if (adultNumber > 1) {
// $('#minusInfant').click(function () {
adultNumber--;
// if (infantNumber > 0) {
$adultNumberInput.val(adultNumber);
// infantNumber--;
}
// $infantNumberInput.val(infantNumber);
});
// }
// 青少年
// });
$('#plusTeenager').click(function () {
teenagerNumber++;
$teenagerNumberInput.val(teenagerNumber);
});
$('#minusTeenager').click(function () {
if (teenagerNumber > 0) {
teenagerNumber--;
$teenagerNumberInput.val(teenagerNumber);
}
});
// 儿童
$('#plusChildren').click(function () {
childrenNumber++;
$childrenNumberInput.val(childrenNumber);
});
$('#minusChildren').click(function () {
if (childrenNumber > 0) {
childrenNumber--;
$childrenNumberInput.val(childrenNumber);
}
});
// 婴儿
$('#plusInfant').click(function () {
infantNumber++;
$infantNumberInput.val(infantNumber);
});
$('#minusInfant').click(function () {
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 >
赵鹏
2 years ago