增加日期选择和相应JS

hotfix/paypal-note
candice 2 years ago
parent 6d25e65d01
commit 41d953f4d9

@ -147,7 +147,41 @@
</div> </div>
</div> </div>
<div class="selectionBlock">
<h4>
When would you travel?
</h4>
<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="family">
I have 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="couple">
I have 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="solo">
I haven't decided my travel dates.
</label>
</div>
<div class="trip_date_length" id="tripDateBlock" style="display: none">
<p style="clear: both;margin-bottom: 10px;" id="trip_date_tip">Select your travel date.</p>
<div id="dateSelectionBlock">
<div id='flatpickrBlock'>
<input class="InquiryCalendar datepicker" id="starting_date" name="date_start" placeholder="Starting date *" readonly="readonly" type="text" value="" />
</div>
<input type="month" id="expectedMonth" name="expected_month" placeholder="Select your expected travel date.">
</div>
</div>
</div>
<input class="FullName" id="realname" name="name" placeholder="Your name *" required="" type="text" <input class="FullName" id="realname" name="name" placeholder="Your name *" required="" type="text"
value="" /> value="" />
<div id="realname_errmsg" style="display: none"> <div id="realname_errmsg" style="display: none">
@ -475,178 +509,221 @@
<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 tour_list_button = document.getElementById("tour_list_button"); });
var tour_list_form = document.getElementById("tour_list_form");
tour_list_button.addEventListener('click', function (event) { var quick_inquiry_button = document.getElementById("quick_inquiry_button");
var validateResult = validateQuickInquiryForm(); var quick_inquiry_form = document.getElementById("quick_inquiry_form");
if (validateResult) {
if (typeof (grecaptcha) === "undefined") { quick_inquiry_button.addEventListener('click', function(event) {
console.warn('grecaptcha is disabled.'); var validateResult = validateQuickInquiryForm();
tour_list_form.submit(); if (validateResult) {
} else { if (typeof(grecaptcha) === "undefined") {
grecaptcha.enterprise.ready(async () => { console.warn('grecaptcha is disabled.');
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', { action: 'ADD_TO_CART' }); quick_inquiry_form.submit();
var el = document.createElement("input"); } else {
el.type = "hidden"; grecaptcha.enterprise.ready(async () => {
el.name = "__grecaptcha_token__"; const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
el.value = token; var el = document.createElement("input");
tour_list_form.appendChild(el); el.type = "hidden";
tour_list_form.submit(); el.name = "__grecaptcha_token__";
tour_list_button.innerText = "Submitted successfully"; 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;
function validateQuickInquiryForm() { var realnameErrEl = document.getElementById("realname_errmsg");
var result = true; var emailErrEl = document.getElementById("email_errmsg");
var realnameVal = document.getElementById("realname").value; var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
var emailVal = document.getElementById("email").value; var startingDateErrEl = document.getElementById("date_error_msg");
var startingDateVal = document.getElementById("starting_date").value; var contactErrEl = document.getElementById("contact_errmsg");
var contactVal = document.getElementById("PhoneNo").value; var groupErrEl = document.getElementById("group_error_msg");
var realnameErrEl = document.getElementById("realname_errmsg"); realnameErrEl.style.display = 'none';
var emailErrEl = document.getElementById("email_errmsg"); emailErrEl.style.display = 'none';
var emailVerifyErrEl = document.getElementById("email_verify_errmsg"); emailVerifyErrEl.style.display = 'none';
var startingDateErrEl = document.getElementById("starting_date_errmsg"); startingDateErrEl.style.display = 'none';
var contactErrEl = document.getElementById("contact_errmsg"); contactErrEl.style.display = 'none';
var groupErrEl = document.getElementById("group_error_msg"); groupErrEl.style.display = 'none';
realnameErrEl.style.display = 'none'; var travel_group_is_checked = false;
emailErrEl.style.display = 'none'; document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
emailVerifyErrEl.style.display = 'none'; if (groupNode.checked) {
startingDateErrEl.style.display = 'none'; travel_group_is_checked = true;
contactErrEl.style.display = 'none'; }
groupErrEl.style.display = 'none'; });
var travel_group_is_checked = false; if (travel_group_is_checked === false) {
document.querySelectorAll('input[name="travel_group"]').forEach(function (groupNode) { groupErrEl.style.display = '';
if (groupNode.checked) { result = false;
travel_group_is_checked = true; }
}
});
if (travel_group_is_checked === false) { var tripDate_is_checked = false;
groupErrEl.style.display = ''; if (selectedExpectedDate === 'exact') {
result = false; tripDate_is_checked = expectedDateVal !== '';
} } else if (selectedExpectedDate === 'approximate') {
tripDate_is_checked = expectedMonthVal !== '';
} else if (selectedExpectedDate === 'yet') {
tripDate_is_checked = true;
}
if (realnameVal === '') { //时间选择
realnameErrEl.style.display = ''; if (!tripDate_is_checked) {
result = false; startingDateErrEl.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 (startingDateVal === '') {
startingDateErrEl.style.display = '';
result = false;
}
if (contactVal === '') {
contactErrEl.style.display = '';
result = false;
}
return result;
}
</script>
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> <script>
var $adultBlock = $('#adultBlock');
var $childrenBlock = $('#childrenBlock'); $(function () {
var $adultNumberInput = $('#adultNumber'); var $adultBlock = $('#adultBlock');
var adultNumber = $adultNumberInput.val(); var $childrenBlock = $('#childrenBlock');
var $teenagerNumberInput = $('#teenagerNumber'); var $adultNumberInput = $('#adultNumber');
var teenagerNumber = $teenagerNumberInput.val(); var adultNumber = $adultNumberInput.val();
var $childrenNumberInput = $('#childrenNumber'); var $teenagerNumberInput = $('#teenagerNumber');
var childrenNumber = $childrenNumberInput.val(); var teenagerNumber = $teenagerNumberInput.val();
var $infantNumberInput = $('#infantNumber'); var $childrenNumberInput = $('#childrenNumber');
var infantNumber = $infantNumberInput.val(); var childrenNumber = $childrenNumberInput.val();
$('input[name="travel_group"]').each((i, groupEle) => { var $infantNumberInput = $('#infantNumber');
$(groupEle).click(function (e) { var infantNumber = $infantNumberInput.val();
$('input[name="travel_group"]').each((i, groupEle) => {
$(groupEle).click(function (e) {
$teenagerNumberInput.val(0);
$childrenNumberInput.val(0);
$infantNumberInput.val(0);
$teenagerNumberInput.val(0); var currentTarget = e.currentTarget;
$childrenNumberInput.val(0); if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
$infantNumberInput.val(0); $adultBlock.show();
$childrenBlock.show();
var currentTarget = e.currentTarget; } else {
if (currentTarget.id === 'Family' || currentTarget.id === 'Other') { $adultBlock.show();
$adultBlock.show(); $childrenBlock.hide();
$childrenBlock.show(); }
} else { if (currentTarget.id === 'Couple') {
$adultBlock.show(); $adultNumberInput.val(2);
$childrenBlock.hide(); } else if (currentTarget.id === 'Solo') {
} $adultNumberInput.val(1);
if (currentTarget.id === 'Couple') { }
$adultNumberInput.val(2); })
} else if (currentTarget.id === 'Solo') { });
$adultNumberInput.val(1);
}
})
});
var $tripDateBlock = $('#tripDateBlock');
var $expectedDate = $('#flatpickrBlock');
var $expectedMonth = $('#expectedMonth');
var $dateSelectionBlock = $('#dateSelectionBlock');
var $tripDateTip = $('#trip_date_tip');
$('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();
$expectedDate.show();
$tripDateTip.show();
} else if (selectedTripDate.id === 'approximate') {
$dateSelectionBlock.show();
$expectedDate.hide();
$expectedMonth.show();
$tripDateTip.show();
} else if (selectedTripDate.id === 'yet') {
$dateSelectionBlock.hide();
$tripDateTip.hide();
}
})
});
//成人 //成人
$('#plusAdult').click(function () { $('#plusAdult').click(function () {
adultNumber++; adultNumber++;
$adultNumberInput.val(adultNumber);
});
$('#minusAdult').click(function () {
if (adultNumber > 1) {
adultNumber--;
$adultNumberInput.val(adultNumber); $adultNumberInput.val(adultNumber);
} });
}); $('#minusAdult').click(function () {
// 青少年 if (adultNumber > 1) {
$('#plusTeenager').click(function () { adultNumber--;
teenagerNumber++; $adultNumberInput.val(adultNumber);
$teenagerNumberInput.val(teenagerNumber); }
}); });
$('#minusTeenager').click(function () { // 青少年
if (teenagerNumber > 0) { $('#plusTeenager').click(function () {
teenagerNumber--; teenagerNumber++;
$teenagerNumberInput.val(teenagerNumber); $teenagerNumberInput.val(teenagerNumber);
} });
}); $('#minusTeenager').click(function () {
// 儿童 if (teenagerNumber > 0) {
$('#plusChildren').click(function () { teenagerNumber--;
childrenNumber++; $teenagerNumberInput.val(teenagerNumber);
$childrenNumberInput.val(childrenNumber); }
}); });
$('#minusChildren').click(function () { // 儿童
if (childrenNumber > 0) { $('#plusChildren').click(function () {
childrenNumber--; childrenNumber++;
$childrenNumberInput.val(childrenNumber); $childrenNumberInput.val(childrenNumber);
} });
}); $('#minusChildren').click(function () {
// 婴儿 if (childrenNumber > 0) {
$('#plusInfant').click(function () { childrenNumber--;
infantNumber++; $childrenNumberInput.val(childrenNumber);
$infantNumberInput.val(infantNumber); }
}); });
$('#minusInfant').click(function () { // 婴儿
if (infantNumber > 0) { $('#plusInfant').click(function () {
infantNumber--; infantNumber++;
$infantNumberInput.val(infantNumber); $infantNumberInput.val(infantNumber);
} });
}); $('#minusInfant').click(function () {
</script> if (infantNumber > 0) {
infantNumber--;
$infantNumberInput.val(infantNumber);
}
});
})
</script>
Loading…
Cancel
Save