@ -1,9 +1,10 @@
< div class = "tripnotes" collapse = "" collapse-status = "hide" data-target = "tripnotes" data-target-icon = "day4Icon" style = "font-size: 25px ; < div class = "tripnotes" collapse = "" collapse-status = "hide" data-target = "tripnotes" data-target-icon = "day4Icon" style = "font-size: 25px ;
color: #ad1818;
color: #ad1818;
font-weight: 600;
font-weight: 600;
font-family: 'Goudy Old Style';">Your 1:1 travel consultant will reply within 1 working day.< span class = "OpenIcon" id = "day4Icon" > < / span > < / div >
font-family: 'Goudy Old Style';">Your 1:1 travel consultant will reply within 1 working day.< span class = "OpenIcon"
< div class = "tripnotescontent" collapse-content = "" id = "tripnotes" style = "display: none; box-sizing: border-box;" >
id="day4Icon">< / span > < / div >
< div class = "tmbottom" style = "padding-top: 60px; margin-top: 0;" > < 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"
< form action = "https://www.chinahighlights.com/secureforms/qi_save" id = "quick_inquiry_form" method = "post"
@ -46,7 +47,7 @@
< div id = "adultBlock" style = "display: none" >
< div id = "adultBlock" style = "display: none" >
< p style = "margin-top: 0;margin-bottom: 10px;" > < strong > Adults number (age ≥ 18 years old)< / strong > < / p >
< p style = "margin-top: 0;margin-bottom: 10px;" > < strong > Adults number (age ≥ 18 years old)< / strong > < / p >
< div class = "kids_age" >
< div class = "kids_age" >
< select class = "kids_number" id = "adult_18_plus" name = "adult_18_plus" > < select class = "kids_number" id = "adult_18_plus" name = "adult_18_plus" >
< option value = "0" > 0< / option >
< option value = "0" > 0< / option >
< option value = "1" > 1< / option >
< option value = "1" > 1< / option >
< option value = "2" > 2< / option >
< option value = "2" > 2< / option >
@ -142,19 +143,19 @@ margin-top: 5px;font-size: 18px;
< div id = "date_error_msg" style = "display: none" >
< div id = "date_error_msg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Select your travel data.< / div >
< div class = "requiredArea" style = "margin-top:-10px;" > Select your travel data.< / div >
< / div >
< / div >
< div class = "travel_group date_select" > < div class = "travel_group date_select" >
< input type = "radio" value = "exact travel dates" id = "exact" name = "trip_date" >
< input type = "radio" value = "exact travel dates" id = "exact" name = "trip_date" >
< label for = "exact" class = "updatedestination" style = "font-size: 18px;" >
< label for = "exact" class = "updatedestination" style = "font-size: 18px;" >
Exact travel dates
Exact travel dates
< / label >
< / label >
< / div >
< / div >
< div class = "travel_group date_select" > < div class = "travel_group date_select" >
< input type = "radio" value = "approximate travel dates" id = "approximate" name = "trip_date" >
< input type = "radio" value = "approximate travel dates" id = "approximate" name = "trip_date" >
< label for = "approximate" class = "updatedestination" style = "font-size: 18px;" >
< label for = "approximate" class = "updatedestination" style = "font-size: 18px;" >
Approximate travel dates
Approximate travel dates
< / label >
< / label >
< / div >
< / div >
< div class = "travel_group date_select" > < div class = "travel_group date_select" >
< input type = "radio" value = "haven't decided travel dates" id = "yet" name = "trip_date" >
< input type = "radio" value = "haven't decided travel dates" id = "yet" name = "trip_date" >
< label for = "yet" class = "updatedestination" style = "font-size: 18px;" >
< label for = "yet" class = "updatedestination" style = "font-size: 18px;" >
Not decided travel dates
Not decided travel dates
@ -162,16 +163,19 @@ margin-top: 5px;font-size: 18px;
< / div >
< / div >
< div class = "trip_date_length" id = "tripDateBlock" style = "display: none" >
< 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 >
< 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 = 'dateSelectionBlock' >
< div id = 'flatpickrBlock' >
< div id = 'flatpickrBlock' >
< input type = "text" class = "InquiryCalendar datepicker" id = "starting_date" name = "date_start" value = "" placeholder = "Select your exact travel date." autocomplete = "off" style = "width: auto ;
< input type = "text" class = "InquiryCalendar datepicker" id = "starting_date" name = "date_start" value = ""
placeholder="Select your exact travel date." autocomplete="off" style="width: auto;
float: left;
float: left;
margin-right: 15px;
margin-right: 15px;
border-radius: 6px;
border-radius: 6px;
padding: 0 15px;">
padding: 0 15px;">
< / div >
< / div >
< input type = "month" id = "expectedMonth" name = "expected_month" placeholder = "Select your expected travel date." style = "width: auto ;
< input type = "month" id = "expectedMonth" name = "expected_month"
placeholder="Select your expected travel date." style="width: auto;
float: left;
float: left;
margin-right: 15px;
margin-right: 15px;
border-radius: 6px;
border-radius: 6px;
@ -248,15 +252,17 @@ margin-top: 5px;font-size: 18px;
< input class = "FullName" id = "realname" name = "name" placeholder = "Your name" type = "text" / >
< input class = "FullName" id = "realname" name = "name" placeholder = "Your name" type = "text" / >
< span id = "realname_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your name.< / span > < / span >
< span id = "realname_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your
name.< / span > < / span >
< input class = "EmailAddress" id = "email" name = "email" placeholder = "Email" type = "text" / >
< input class = "EmailAddress" id = "email" name = "email" placeholder = "Email" type = "text" / >
< span id = "email_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your email.< / span > < / span >
< 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 >
< span id = "email_verify_errmsg" style = "display: none" > < span class = "requiredArea" > Please verify your
email.< / span > < / span >
@ -455,7 +461,8 @@ margin-top: 5px;font-size: 18px;
< option value = "Saint Lucia +1" > Saint Lucia +1758< / option >
< option value = "Saint Lucia +1" > Saint Lucia +1758< / option >
< option value = "Saint Martin +590" > Saint Martin +590< / option >
< option value = "Saint Martin +590" > Saint Martin +590< / option >
< option value = "Saint Pierre and Miquelon +508" > Saint Pierre and Miquelon +508< / option >
< option value = "Saint Pierre and Miquelon +508" > Saint Pierre and Miquelon +508< / option >
< option value = "Saint Vincent and the Grenadines +1" > Saint Vincent and the Grenadines +1784< / option >
< option value = "Saint Vincent and the Grenadines +1" > Saint Vincent and the Grenadines +1784
< / option >
< option value = "Samoa +685" > Samoa +685< / option >
< option value = "Samoa +685" > Samoa +685< / option >
< option value = "San Marino +378" > San Marino +378< / option >
< option value = "San Marino +378" > San Marino +378< / option >
< option value = "São Tomé and Príncipe +239" > São Tomé and Príncipe +239< / option >
< option value = "São Tomé and Príncipe +239" > São Tomé and Príncipe +239< / option >
@ -513,28 +520,29 @@ margin-top: 5px;font-size: 18px;
< option value = "Zimbabwe +263" > Zimbabwe +263< / option >
< option value = "Zimbabwe +263" > Zimbabwe +263< / option >
< option value = "Åland Islands +385" > Åland Islands +35818< / option >
< option value = "Åland Islands +385" > Åland Islands +35818< / option >
< / select >
< / select >
< input class = "Inquiryphone" id = "PhoneNo" name = "PhoneNo"
< input class = "Inquiryphone" id = "PhoneNo" name = "PhoneNo" placeholder = "Phone number *" type = "tel" / >
placeholder="Phone number *" type="tel"/>
< span id = "phone_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your phone
< span id = "phone_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your phone number.< / span > < / span >
number.< / span > < / span >
< p style = "margin-top: 0;margin-bottom: 10px;padding: 0;text-align: left;font-size: 20px;font-weight: 300;" > I prefer to be contacted via:< / p > < p style = "margin-top: 0;margin-bottom: 10px;padding: 0;text-align: left;font-size: 20px;font-weight: 300;" > I
< div class = "checkYes" > < label for = "WeChat" > < input class = "checkBorder" id = "WeChat" name = "contact_via_WeChat" type = "checkbox" value = "yes" > WeChat< / label > < / div >
am also available on:< / p >
< div class = "checkYes" > < label for = "WhatsApp" > < input class = "checkBorder" id = "WhatsApp" name = "contact_via_WhatsApp" type = "checkbox" value = "yes" > WhatsApp < / label > < / div > < div class = "checkYes" > < label for = "WhatsApp" > < input class = "checkBorder" id = "WhatsApp" name = "contact_via_WhatsApp"
< div class = "checkYes" > < label for = "Phone" > < input class = "checkBorder" id = "Phone" name = "contact_via_phone_call" type = "checkbox" value = "yes" > Phone call < / label > < / div >
type="checkbox" value="yes">WhatsApp < / label > < / div >
< div class = "checkYes" > < label for = " Email "> < input class = "checkBorder" id = " Email" name = "contact_via_email" type = "checkbox" value = "yes" > Email< / label > < / div > < div class = "checkYes" > < label for = " iMessage "> < input class = "checkBorder" id = " iMessage" name = "contact_via_iMessage"
< div class = "checkYes" > < label for = "video" > < input class = "checkBorder" id = "video" name = "contact_via_video_appointment" type = "checkbox" value = "yes" > Video appointment < / label > < / div >
type="checkbox" value="yes">iMessage < / label > < / div >
< input type = "hidden" name = "nullemail" >
< input type = "hidden" name = "nullemail" >
< input name = "product_code" type = "hidden" value = "YDFW" / >
< input name = "product_code" type = "hidden" value = "YDFW" / >
< button class = "sendButton" id = "quick_inquiry_button" name = "quick_inquiry_button" type = "button" > Send My
< button class = "sendButton" id = "quick_inquiry_button" name = "quick_inquiry_button" type = "button" > Send My
Inquiry< / button >
Inquiry< / button >
< / div >
< / div >
< / form >
< / form >
< / div >
< / div > < / div >
< / div > < script
< script < / 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 src = "https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js" > < / script >
< script > < script >
var selectedExpectedDate = '';
var selectedExpectedDate = '';
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
@ -549,15 +557,15 @@ margin-top: 5px;font-size: 18px;
var quick_inquiry_button = document.getElementById("quick_inquiry_button");
var quick_inquiry_button = document.getElementById("quick_inquiry_button");
var quick_inquiry_form = document.getElementById("quick_inquiry_form");
var quick_inquiry_form = document.getElementById("quick_inquiry_form");
quick_inquiry_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.');
quick_inquiry_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' });
var el = document.createElement("input");
var el = document.createElement("input");
el.type = "hidden";
el.type = "hidden";
el.name = "__grecaptcha_token__";
el.name = "__grecaptcha_token__";
@ -594,7 +602,7 @@ margin-top: 5px;font-size: 18px;
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;
}
}
@ -640,8 +648,8 @@ margin-top: 5px;font-size: 18px;
}
}
return result;
return result;
}
}
< / script > < / script >
< script > < script >
$(function () {
$(function () {
var $adultBlock = $('#adultBlock');
var $adultBlock = $('#adultBlock');
@ -650,7 +658,7 @@ margin-top: 5px;font-size: 18px;
$(groupEle).click(function (e) {
$(groupEle).click(function (e) {
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 {
@ -707,8 +715,8 @@ margin-top: 5px;font-size: 18px;
}
}
});
});
})
})
< / script > < / script >
< script > < script >
// 折叠展开
// 折叠展开
document.querySelectorAll('div[collapse]').forEach(function ($collapseDiv, index) {
document.querySelectorAll('div[collapse]').forEach(function ($collapseDiv, index) {
@ -787,30 +795,69 @@ margin-top: 5px;font-size: 18px;
target.style.removeProperty('transition-property');
target.style.removeProperty('transition-property');
}, duration);
}, duration);
}
}
< / script >
< / script >
< style >
< style >
.trip_date_length { display: inline-block; width: 100%;}
.trip_date_length {
.date_select {width: 27.5% !important; margin-bottom: 10px;}
display: inline-block;
.age_range { margin-top: 45px;}
width: 100%;
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;}
.date_select {
.age_range { margin-top: 0;}
width: 27.5% !important;
margin-bottom: 10px;
}
}
< / style >
.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 >
< style type = "text/css" > < style type = "text/css" >
.emailist{border:1px solid #bdbdbd; border-radius: 4px; background-color:#fff; color:#666; font-size:14px; list-style-type:0; padding:0; margin:0; overflow:hidden;}
.emailist {
.emailist li{ padding: 2px 11px;
border: 1px solid #bdbdbd;
border-radius: 4px;
background-color: #fff;
color: #666;
font-size: 14px;
list-style-type: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.emailist li {
padding: 2px 11px;
cursor: pointer;
cursor: pointer;
font-size: 18px;
font-size: 18px;
text-shadow: none;
text-shadow: none;
color: #000;
color: #000;
}
}
.emailist .on, .emailist li:hover{background-color:#eee;}
.emailist .on,
.emailist li:hover {
background-color: #eee;
}
< / style > < / style >
< script > < script >
$("#email").mailAutoComplete({
$("#email").mailAutoComplete({
email: ['gmail.com','outlook.com','yahoo.com','icloud.com','hotmail.com','live.com','aol.com']
email: ['gmail.com', 'outlook.com', 'yahoo.com', 'icloud.com', 'hotmail.com', 'live.com', 'aol.com']
});
});
< / script > < / script >
LMR
1 year ago