@ -1,12 +1,18 @@
< div class = "tmbottom" >
< p style = "padding: 15px 15px 30px 15px;" > Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.< / p >
< 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 = "tmbottom" style = "padding-top: 60px; margin-top: 0;" >
< form action = "https://www.chinahighlights.com/secureforms/qi_save" id = "quick_inquiry_form" method = "post"
name="quick_inquiry_form" novalidate="">
< div class = "InquiryBox" >
< textarea id = "form_additionalrequirements" name = "additional_requirements"
placeholder="Tell us your travel requirements here: anniversary, honeymoon, family trip, birthday travel, beach, food... (optional)">< / textarea >
< div class = "selectionBlock" >
< p style = " text-align: left; font-weight: 400; ">
< p style = " text-align: left; font-weight: 400; padding-bottom: 0; ">
Number in your group
< / p >
< div id = "group_error_msg" style = "display: none" >
@ -38,12 +44,7 @@
< / div >
< div id = "adultBlock" style = "display: none" >
< p style = "
margin-bottom: -25px;
font-size: 22px;
margin-top: 80px;
text-align: left;
">When you plan to take the trip:< / p >
< div class = "peopleSelect" >
< p style = " margin-top: 20px ;
text-align: left;
@ -140,7 +141,62 @@ margin-bottom: -25px;
< / div >
< / div >
< p >
< div class = "selectionBlock" style = "margin-bottom: 10px;" >
< p style = "text-align: left; font-weight: 400; padding-bottom: 0;" >
When would you travel?
< / 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 = "text-align: left; font-weight: 400; font-size: 19px;" > Select your travel date and trip length (days).< / p >
< div id = 'dateSelectionBlock' >
< div id = 'flatpickrBlock' >
< 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;
border-radius: 6px;
padding: 0 15px;">
< / div >
< input type = "month" id = "expectedMonth" name = "expected_month" placeholder = "Select your expected travel date." style = "width: auto ;
float: left;
margin-right: 15px;
border-radius: 6px;
padding: 0 15px;
margin-bottom: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" style = "margin-right: 5px;" >
< input class = "minaddBtn" id = "tripLengthPlus" type = "button" value = "+" >
< / div >
< / div >
< / div >
< / div >
< p >
< span class = "inquiry_form_tag" > < img src = "https://data.chinahighlights.com/pic/input-name.png" >
< span class = "form_required" > *< / span >
< / span >
@ -155,13 +211,13 @@ margin-bottom: -25px;
< span id = "email_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your email.< / span > < / span >
< span id = "email_verify_errmsg" style = "display: none" > < span class = "requiredArea" > Please verify your email.< / span > < / span >
< / p >
<!--
< span class = "inquiry_form_tag" > < img src = "https://data.chinahighlights.com/pic/top10/tour-calendar.png" >
< span class = "form_required" > *< / span > < / span >
< input class = "InquiryCalendar" data-min-date = "7" id = "starting_date"
name="date_start" placeholder="Starting date" readonly="readonly"
type="text"/>< span id = "starting_date_errmsg" style = "display: none" > < span
class="requiredArea">Please enter your starting date.< / span > < / span > < / p >
class="requiredArea">Please enter your starting date.< / span > < / span > < / p > -->
< p >
< select name = "country_code" class = "country_code" >
< option style = "font-weight: 600;" value = "United States +1" > United States +1< / option >
@ -439,181 +495,328 @@ margin-bottom: -25px;
< / div >
-->
< / div >
< script src = "https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja" > < / script >
< script src = "https://data.chinahighlights.com/js/min.php?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js" > < / script >
< script >
function validateQuickInquiryForm() {
var result = true;
var realnameVal = document.getElementById("realname").value;
var emailVal = document.getElementById("email").value;
var startingDateVal = document.getElementById("starting_date").value;
var phoneVal = document.getElementById("PhoneNo").value;
var startingDateErrEl = document.getElementById("starting_date_errmsg");
var realnameErrEl = document.getElementById("realname_errmsg");
var emailErrEl = document.getElementById("email_errmsg");
var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
var phoneErrEl = document.getElementById("phone_errmsg");
var travelGroupErrEl = document.getElementById("group_error_msg");
if (realnameErrEl) realnameErrEl.style.display = 'none';
if (emailErrEl) emailErrEl.style.display = 'none';
if (emailVerifyErrEl) emailVerifyErrEl.style.display = 'none';
if (startingDateErrEl) startingDateErrEl.style.display = 'none';
if (phoneErrEl) phoneErrEl.style.display = 'none';
if (travelGroupErrEl) travelGroupErrEl.style.display = 'none';
var travelGroupList = document.querySelectorAll('input[name="travel_group"]');
var travelGroupChecked = false;
travelGroupList.forEach(function(groupNode) {
if (groupNode.checked) {
travelGroupChecked = true;
}
< / 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("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";
});
}
}
});
});
if (!travelGroupChecked) {
travelGroupErrEl.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) {
emailVerifyErrEl.style.display = '';
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("phone_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;
}
if (startingDateVal === '') {
startingDateErrEl.style.display = '';
result = false;
}
if (phoneVal === '') {
phoneErrEl.style.display = '';
result = false;
}
return result;
}
document.addEventListener('DOMContentLoaded', () => {
flatpickr("#starting_date", {
dateFormat: "Y-m-d",
altInput: true,
altFormat: "F j, Y",
disableMobile: true,
minDate: "today"
});
var quick_inquiry_form = document.getElementById('quick_inquiry_form');
var quick_inquiry_button = document.getElementById('quick_inquiry_button');
quick_inquiry_button.addEventListener('click', function(evt) {
if (validateQuickInquiryForm()) {
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_form.innerText = "Submitted successfully";
});
}
}
});
});
< / 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 >
< script >
$teenagerNumberInput.val(0);
$childrenNumberInput.val(0);
$infantNumberInput.val(0);
$(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 $expectedMonth = $('#expectedMonth');
var $expectedDate = $('#starting_date');
var $dateSelectionBlock = $('#dateSelectionBlock');
var $flatpickrBlock = $('#flatpickrBlock');
$('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();
$flatpickrBlock.show();
} else if (selectedTripDate.id === 'approximate') {
$dateSelectionBlock.show();
$flatpickrBlock.hide();
$expectedMonth.show();
} else if (selectedTripDate.id === 'yet') {
$dateSelectionBlock.hide();
$flatpickrBlock.hide();
}
})
});
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 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);
}
});
//成人
$('#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);
}
});
})
< / script >
// Trip Length
$('#tripLengthPlus').click(function () {
tripLength++;
$('#tripLengthNumber').val(tripLength);
});
$('#tripLengthMinus').click(function () {
if (tripLength > 1) {
tripLength--;
$('#tripLengthNumber').val(tripLength);
}
});
})
< / script >
< script >
// 折叠展开
document.querySelectorAll('div[collapse]').forEach(function ($collapseDiv, index) {
$collapseDiv.onclick = function (e) {
let collapseStatus = $collapseDiv.getAttribute('collapse-status');
let targetId = $collapseDiv.getAttribute("data-target");
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);
}
}
});
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 >
< style >
.date_select {width: 27.5% !important; margin-bottom: 10px;}
.age_range { margin-top: 45px;}
input.arrivalDate {width: 95%; padding: 0 15px; border-radius: 6px; margin-bottom:15px;}
@media (max-width: 750px){
.date_select {width: 93% !important; margin-bottom: 0 !important;}
.age_range { margin-top: 0;}
}
< / style >
赵鹏
2 years ago