@ -1,3 +1,8 @@
< div class = "tripnotes" collapse = "" collapse-status = "hide" data-target = "tripnotes" data-target-icon = "day4Icon" style = "font-size: 25px ;
color: #ad1818;
font-weight: 600;
font-family: 'Goudy Old Style';">Click here to plan your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.< span class = "OpenIcon" id = "day4Icon" > < / span > < / div >
< div class = "tripnotescontent" collapse-content = "" id = "tripnotes" style = "display: none; box-sizing: border-box;" >
< div class = "info_page_inquiry" > < div class = "info_page_inquiry" >
<!-- <div class="contactwechat">
<!-- <div class="contactwechat">
< img alt = "global highlights' wechat code" height = "100px" src = "https://data.globalhighlights.com/image/aboutus/gh-whatsapp-qr-code.jpg" width = "100px" >
< img alt = "global highlights' wechat code" height = "100px" src = "https://data.globalhighlights.com/image/aboutus/gh-whatsapp-qr-code.jpg" width = "100px" >
@ -5,12 +10,186 @@
Email: contact@globalhighlights.com
Email: contact@globalhighlights.com
< / div >
< / div >
< / div > -->
< / div > -->
< p class = "contactus" > Send an inquiry below:< / p >
< form action = "/forms/inquiry_save" id = "info_page_form" method = "post" >
< form action = "/forms/inquiry_save" id = "info_page_form" method = "post" >
< div class = "InquiryFormBox" >
< div class = "InquiryFormBox" >
< div class = "FieldSet" >
< div class = "FieldSet" >
< p > < textarea id = "additionalrequirements" name = "additional_requirements"
< p > < textarea id = "additionalrequirements" name = "additional_requirements"
placeholder="Anniversary, honeymoon, family trip, birthday travel, beach, food..." style="margin-bottom:20px;">< / textarea > < / p >
placeholder="Anniversary, honeymoon, family trip, birthday travel, beach, food..." style="margin-bottom:20px;">< / textarea > < / p >
< div class = "selectionBlock" style = "margin-bottom: 0;" >
< p style = "
margin-bottom: 0px;
">
< strong > Number in your group< / strong >
< / p >
< div id = "group_error_msg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Please select number in your group.< / div >
< / div >
< div class = "travel_group" >
< input type = "radio" value = "Family" id = "Family" name = "travel_group" >
< label for = "Family" class = "family" >
Family
< / label >
< / div >
< div class = "travel_group" >
< input type = "radio" value = "Couple" id = "Couple" name = "travel_group" >
< label for = "Couple" class = "couple" >
Couple
< / label >
< / div >
< div class = "travel_group" >
< input type = "radio" value = "Solo" id = "Solo" name = "travel_group" >
< label for = "Solo" class = "solo" >
Solo
< / label >
< / div >
< div class = "travel_group" >
< input type = "radio" value = "group" id = "Other" name = "travel_group" >
< label for = "Other" class = "group" >
Other group
< / label >
< / div >
< div id = "adultBlock" style = "display: none" >
< div class = "peopleSelect" >
< p style = " margin-top: 10px ;
margin-bottom: 10px;">< strong >
Adults (≥18 years old)
< / strong > < / p >
< button class = "minaddBtn reduceadult" id = "minusAdult" type = "button"
value="-">-< / button >
< input class = "number" type = "text" value = "2" id = "adultNumber" name = "adult" >
< button class = "minaddBtn addadult" type = "button" id = "plusAdult" value = "+" > +< / button >
< / div >
< div class = "age_range" >
< p >
Adults' ages
< / p >
< div class = "checkYes" style = "float:left; width: auto; margin-right: 30px;" >
< label for = "65+" >
< input type = "checkbox" value = "yes" name = "age_65_plus" id = "65+" class = "checkBorder" > 65+
< / label >
< / div >
< div class = "checkYes" style = "float:left; width: auto; margin-right: 30px;" >
< label for = "51-64" >
< input type = "checkbox" value = "yes" name = "age_51_64" id = "51-64" class = "checkBorder" > 51-64
< / label >
< / div >
< div class = "checkYes" style = "float:left; width: auto; margin-right: 30px;" >
< label for = "41-50" >
< input type = "checkbox" value = "yes" name = "age_41_50" id = "41-50" class = "checkBorder" > 41-50
< / label >
< / div >
< div class = "checkYes" style = "float:left; width: auto; margin-right: 30px;" >
< label for = "31-40" >
< input type = "checkbox" value = "yes" name = "age_31_40" id = "31-40" class = "checkBorder" > 31-40
< / label >
< / div >
< div class = "checkYes" style = "float:left; width: auto; margin-right: 30px;" >
< label for = "18-30" >
< input type = "checkbox" value = "yes" name = "age_18_30" id = "18-30" class = "checkBorder" > 18-30
< / label >
< / div >
< / div >
< / div >
< div class = "clear" > < / div >
< div id = "childrenBlock" style = "display: none" >
< p style = " margin-bottom: 0;" > < strong > Children (age of children at time of trip)< / strong > < / p >
< div class = "kids_age" >
< p style = "margin-bottom: 5px;" > 10-17 yrs old< / p >
< select class = "kids_number" id = "teenagerNumber" name = "teenager_10_17_yrs" >
< option value = "0" > 0
< / option >
< option value = "1" > 1
< / option >
< option value = "2" > 2
< / option >
< option value = "3" > 3
< / option >
< option value = "4" > 4
< / option >
< / select >
< / div >
< div class = "kids_age" >
< p style = "margin-bottom: 5px;" > 3-9 yrs old< / p >
< select class = "kids_number" id = "childrenNumber" name = "children_3_9_yrs" >
< option value = "0" > 0
< / option >
< option value = "1" > 1
< / option >
< option value = "2" > 2
< / option >
< option value = "3" > 3
< / option >
< option value = "4" > 4
< / option >
< / select >
< / div >
< div class = "kids_age" >
< p style = "margin-bottom: 5px;" > 0-2 yrs old< / p >
< select class = "kids_number" id = "infantNumber" name = "infant_0_2_yrs" >
< option value = "0" > 0
< / option >
< option value = "1" > 1
< / option >
< option value = "2" > 2
< / option >
< option value = "3" > 3
< / option >
< option value = "4" > 4
< / option >
< / select >
< / div >
< / div >
< / div >
< div class = "selectionBlock" style = "margin-bottom: 10px;" >
< p style = " margin-top: 10px ;
margin-bottom: 0;">< strong >
When would you travel?
< / strong > < / p >
< 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 = "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 = "starting_date" name = "date_start" value = "" placeholder = "mm/dd/yyyy" autocomplete = "off" style = "width: auto ; float: left ; margin-right: 15px ; height: 30px ;
margin-top: 5px;">
< input type = "month" id = "expectedMonth" name = "expected_month" placeholder = "Select your expected travel date." style = "width: auto ; float: left ; margin-right: 15px ; height: 30px ;
margin-top: 5px;">
< / 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 >
< p > < input class = "FullName" data-required = "Please enter your fullname" id = "realname" name = "name"
< p > < input class = "FullName" data-required = "Please enter your fullname" id = "realname" name = "name"
placeholder="Your name" required="" type="text">< / p >
placeholder="Your name" required="" type="text">< / p >
< p > < input class = "EmailAddress" data-required = "Please enter your e-mail address"
< p > < input class = "EmailAddress" data-required = "Please enter your e-mail address"
@ -319,14 +498,361 @@
< / div >
< / div >
< / form >
< / form >
< / div >
< / div >
< / div >
< script src = "https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja" > < / 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 >
var selectedExpectedDate = '';
document.addEventListener('DOMContentLoaded', () => {
flatpickr("#starting_date", {
dateFormat: "Y-m-d",
altInput: true,
altFormat: "F j, Y",
disableMobile: true,
minDate: "today"
});
var quick_inquiry_button = document.getElementById("info_page_button");
var quick_inquiry_form = document.getElementById("info_page_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";
});
}
}
});
});
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;
var realnameErrEl = document.getElementById("realname_errmsg");
var emailErrEl = document.getElementById("email_errmsg");
var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
var startingDateErrEl = document.getElementById("date_error_msg");
var contactErrEl = document.getElementById("contact_errmsg");
var groupErrEl = document.getElementById("group_error_msg");
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 !== '';
} 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 === '') {
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;
}
}
if (contactVal === '') {
contactErrEl.style.display = '';
result = false;
}
return result;
}
< / 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) {
$teenagerNumberInput.val(0);
$childrenNumberInput.val(0);
$infantNumberInput.val(0);
var currentTarget = e.currentTarget;
if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
$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 $tripDateBlock = $('#tripDateBlock');
var $expectedDate = $('#starting_date');
var $expectedMonth = $('#expectedMonth');
var $dateSelectionBlock = $('#dateSelectionBlock');
var $expectedTravelDateBlock = $('#expectedTravelDateBlock');
$('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);
});
$('#minusAdult').click(function () {
if (adultNumber > 1) {
adultNumber--;
$adultNumberInput.val(adultNumber);
}
});
// 青少年
$('#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);
}
});
// Trip Length
$('#tripLengthPlus').click(function () {
tripLength++;
$('#tripLengthNumber').val(tripLength);
});
$('#tripLengthMinus').click(function () {
if (tripLength > 1) {
tripLength--;
$('#tripLengthNumber').val(tripLength);
}
});
})
< / script >
< script >
< script >
(function () {
// 折叠展开
var formEle = document.getElementById('info_page_form');
var submitBtn = document.getElementById('info_page_form_btn');
document.querySelectorAll('div[collapse]').forEach(function ($collapseDiv, index) {
formEle.addEventListener('submit', function(evt) {
$collapseDiv.onclick = function (e) {
evt.preventDefault();
let collapseStatus = $collapseDiv.getAttribute('collapse-status');
formEle.submit();
let targetId = $collapseDiv.getAttribute("data-target");
submitBtn.innerText = "Submitted successfully";
let targetIconId = $collapseDiv.getAttribute("data-target-icon");
let $targetElement = document.getElementById(targetId);
let $targetIcon = document.getElementById(targetIconId);
if (collapseStatus == undefined || collapseStatus == "show") {
$targetIcon.classList.remove("CloseIcon");
$targetIcon.classList.add("OpenIcon");
$collapseDiv.setAttribute("collapse-status", "hide");
slideUp($targetElement);
} else {
$targetIcon.classList.remove("OpenIcon");
$targetIcon.classList.add("CloseIcon");
$collapseDiv.setAttribute("collapse-status", "show");
slideDown($targetElement);
}
}
});
document.querySelector('.expandAll').onclick = function (e) {
let obj = document.querySelector('.expandAll');
let all_status = obj.getAttribute("collapse-status");
if (all_status == "hide") {
obj.setAttribute("collapse-status", "show");
obj.querySelector(".expandAllText").innerHTML = "Collapse All";
obj.parentNode.querySelectorAll("div[collapse] span[id$='Icon']").forEach(function(icon, i){
icon.classList.remove('OpenIcon');
icon.classList.add('CloseIcon');
});
});
})();
obj.parentNode.querySelectorAll("div[collapse-content]").forEach(function(itinerary, i){
slideDown(itinerary);
});
obj.parentNode.querySelectorAll("div[collapse]").forEach(function(title, i){
title.setAttribute("collapse-status", "show");
});
} else {
obj.setAttribute("collapse-status", "hide");
obj.querySelector(".expandAllText").innerHTML = "Expand All";
obj.parentNode.querySelectorAll("div[collapse] span[id$='Icon']").forEach(function(icon, i){
icon.classList.remove('CloseIcon');
icon.classList.add('OpenIcon');
});
obj.parentNode.querySelectorAll("div[collapse-content]").forEach(function(itinerary, i){
slideUp(itinerary);
});
obj.parentNode.querySelectorAll("div[collapse]").forEach(function(title, i){
title.setAttribute("collapse-status", "hide");
});
}
}
function slideUp(target, duration) {
duration = duration ? duration : 500;
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 'ms';
target.style.boxSizing = 'border-box';
target.style.height = target.offsetHeight + 'px';
target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
window.setTimeout(() => {
target.style.display = 'none';
target.style.removeProperty('height');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, duration);
}
function slideDown(target, duration) {
duration = duration ? duration : 500;
target.style.removeProperty('display');
let display = window.getComputedStyle(target).display;
if (display === 'none')
display = 'block';
target.style.display = display;
let height = target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
target.offsetHeight;
target.style.boxSizing = 'border-box';
target.style.transitionProperty = "height, margin, padding";
target.style.transitionDuration = duration + 'ms';
target.style.height = height + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
window.setTimeout(() => {
target.style.removeProperty('height');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, duration);
}
< / script >
< / script >
< style >
.date_select {width: 27.5% !important; margin-bottom: 10px;}
.age_range { margin-top: 45px;}
.InquiryFormBox input, textarea { margin-bottom: 15px;}
@media (max-width: 750px){
.date_select {width: 93% !important; margin-bottom: 0 !important;}
.age_range { margin-top: 0;}
}
< / style >
candice
2 years ago