Haina
/
information-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加出发日期选择

Browse Source
hotfix/paypal-note
candice 2 years ago
parent 463cd6913e
commit 8bbb0d23f7
1 changed files with 286 additions and 171 deletions
Show Stats Download Patch File Download Diff File

459
application/views/mobile_first/ch-info-page-form.php
Unescape Escape View File

@ -146,7 +146,55 @@ margin-bottom: -25px;
</div> </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> <p>
<span class="inquiry_form_tag"><img src="https://data.chinahighlights.com/pic/input-name.png"> <span class="inquiry_form_tag"><img src="https://data.chinahighlights.com/pic/input-name.png">
<span class="form_required">*</span> <span class="form_required">*</span>
</span> </span>
@ -446,184 +494,243 @@ margin-bottom: -25px;
--> -->
</div> </div>
</div> </div>
<script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja"></script> <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 src="https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js"></script>
<script> <script>
function validateQuickInquiryForm() {
var result = true; var selectedExpectedDate = '';
var realnameVal = document.getElementById("realname").value; document.addEventListener('DOMContentLoaded', () => {
var emailVal = document.getElementById("email").value; flatpickr("#starting_date", {
var startingDateVal = document.getElementById("starting_date").value; dateFormat: "Y-m-d",
var phoneVal = document.getElementById("PhoneNo").value; altInput: true,
altFormat: "F j, Y",
var startingDateErrEl = document.getElementById("starting_date_errmsg"); disableMobile: true,
var realnameErrEl = document.getElementById("realname_errmsg"); minDate: "today"
var emailErrEl = document.getElementById("email_errmsg"); });
var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
var phoneErrEl = document.getElementById("phone_errmsg"); var quick_inquiry_button = document.getElementById("info_page_button");
var travelGroupErrEl = document.getElementById("group_error_msg"); var quick_inquiry_form = document.getElementById("info_page_form");
if (realnameErrEl) realnameErrEl.style.display = 'none'; quick_inquiry_button.addEventListener('click', function(event) {
if (emailErrEl) emailErrEl.style.display = 'none'; var validateResult = validateQuickInquiryForm();
if (emailVerifyErrEl) emailVerifyErrEl.style.display = 'none'; if (validateResult) {
if (startingDateErrEl) startingDateErrEl.style.display = 'none'; if (typeof(grecaptcha) === "undefined") {
if (phoneErrEl) phoneErrEl.style.display = 'none'; console.warn('grecaptcha is disabled.');
if (travelGroupErrEl) travelGroupErrEl.style.display = 'none'; quick_inquiry_form.submit();
} else {
var travelGroupList = document.querySelectorAll('input[name="travel_group"]'); grecaptcha.enterprise.ready(async () => {
var travelGroupChecked = false; const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
travelGroupList.forEach(function(groupNode) { var el = document.createElement("input");
if (groupNode.checked) { el.type = "hidden";
travelGroupChecked = true; el.name = "__grecaptcha_token__";
} el.value = token;
quick_inquiry_form.appendChild(el);
quick_inquiry_form.submit();
quick_inquiry_button.innerText = "Submitted successfully";
});
}
}
});
}); });
if (!travelGroupChecked) { function validateQuickInquiryForm() {
travelGroupErrEl.style.display = ''; var result = true;
result = false; 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;
if (realnameVal === '') { var realnameErrEl = document.getElementById("realname_errmsg");
realnameErrEl.style.display = ''; var emailErrEl = document.getElementById("email_errmsg");
result = false; var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
} var startingDateErrEl = document.getElementById("date_error_msg");
if (emailVal === '') { var contactErrEl = document.getElementById("contact_errmsg");
emailErrEl.style.display = ''; var groupErrEl = document.getElementById("group_error_msg");
result = false;
} else { realnameErrEl.style.display = 'none';
var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/; emailErrEl.style.display = 'none';
if (!emailPattern.test(emailVal) && emailVerifyErrEl) { emailVerifyErrEl.style.display = 'none';
emailVerifyErrEl.style.display = ''; 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; 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 === '') { </script>
startingDateErrEl.style.display = ''; <script>
result = false;
} $(function () {
if (phoneVal === '') { var $adultBlock = $('#adultBlock');
phoneErrEl.style.display = ''; var $childrenBlock = $('#childrenBlock');
result = false; var $adultNumberInput = $('#adultNumber');
} var adultNumber = $adultNumberInput.val();
return result; var $teenagerNumberInput = $('#teenagerNumber');
} var teenagerNumber = $teenagerNumberInput.val();
document.addEventListener('DOMContentLoaded', () => { var $childrenNumberInput = $('#childrenNumber');
flatpickr("#starting_date", { var childrenNumber = $childrenNumberInput.val();
dateFormat: "Y-m-d", var $infantNumberInput = $('#infantNumber');
altInput: true, var infantNumber = $infantNumberInput.val();
altFormat: "F j, Y", $('input[name="travel_group"]').each((i, groupEle) => {
disableMobile: true, $(groupEle).click(function (e) {
minDate: "today"
}); $teenagerNumberInput.val(0);
$childrenNumberInput.val(0);
var quick_inquiry_form = document.getElementById('quick_inquiry_form'); $infantNumberInput.val(0);
var quick_inquiry_button = document.getElementById('quick_inquiry_button');
var currentTarget = e.currentTarget;
quick_inquiry_button.addEventListener('click', function(evt) { if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
if (validateQuickInquiryForm()) { $adultBlock.show();
if (typeof(grecaptcha) === "undefined") { $childrenBlock.show();
console.warn('grecaptcha is disabled.'); } else {
quick_inquiry_form.submit(); $adultBlock.show();
} else { $childrenBlock.hide();
grecaptcha.enterprise.ready(async () => { }
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'}); if (currentTarget.id === 'Couple') {
var el = document.createElement("input"); $adultNumberInput.val(2);
el.type = "hidden"; } else if (currentTarget.id === 'Solo') {
el.name = "__grecaptcha_token__"; $adultNumberInput.val(1);
el.value = token; }
quick_inquiry_form.appendChild(el); })
quick_inquiry_form.submit(); });
quick_inquiry_form.innerText = "Submitted successfully";
}); var $tripDateBlock = $('#tripDateBlock');
} var $expectedDate = $('#starting_date');
} var $expectedMonth = $('#expectedMonth');
}); var $dateSelectionBlock = $('#dateSelectionBlock');
}); var $expectedTravelDateBlock = $('#expectedTravelDateBlock');
$('input[name="trip_date"]').each((i, tripDateEle) => {
</script> $(tripDateEle).click(function (e) {
<script> $expectedDate.val('');
$expectedMonth.val('');
$(function () { $tripDateBlock.show();
var $adultBlock = $('#adultBlock'); var selectedTripDate = e.currentTarget;
var $childrenBlock = $('#childrenBlock'); selectedExpectedDate = selectedTripDate.id;
var $adultNumberInput = $('#adultNumber'); if (selectedTripDate.id === 'exact') {
var adultNumber = $adultNumberInput.val(); $dateSelectionBlock.show();
var $teenagerNumberInput = $('#teenagerNumber'); $expectedTravelDateBlock.hide();
var teenagerNumber = $teenagerNumberInput.val(); $expectedMonth.hide();
var $childrenNumberInput = $('#childrenNumber'); $expectedDate.show();
var childrenNumber = $childrenNumberInput.val(); } else if (selectedTripDate.id === 'approximate') {
var $infantNumberInput = $('#infantNumber'); $dateSelectionBlock.show();
var infantNumber = $infantNumberInput.val(); $expectedTravelDateBlock.hide();
$('input[name="travel_group"]').each((i, groupEle) => { $expectedDate.hide();
$(groupEle).click(function (e) { $expectedMonth.show();
} else if (selectedTripDate.id === 'yet') {
$teenagerNumberInput.val(0); $dateSelectionBlock.hide();
$childrenNumberInput.val(0); $expectedTravelDateBlock.show();
$infantNumberInput.val(0); }
})
var currentTarget = e.currentTarget; });
if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
$adultBlock.show(); var tripLength = $('#tripLengthNumber').val();
$childrenBlock.show();
} else { //成人
$adultBlock.show(); $('#plusAdult').click(function () {
$childrenBlock.hide(); adultNumber++;
} $adultNumberInput.val(adultNumber);
if (currentTarget.id === 'Couple') { });
$adultNumberInput.val(2); $('#minusAdult').click(function () {
} else if (currentTarget.id === 'Solo') { if (adultNumber > 1) {
$adultNumberInput.val(1); adultNumber--;
} $adultNumberInput.val(adultNumber);
}) }
}); });
// 青少年
$('#plusTeenager').click(function () {
//成人 teenagerNumber++;
$('#plusAdult').click(function () { $teenagerNumberInput.val(teenagerNumber);
adultNumber++; });
$adultNumberInput.val(adultNumber); $('#minusTeenager').click(function () {
}); if (teenagerNumber > 0) {
$('#minusAdult').click(function () { teenagerNumber--;
if (adultNumber > 1) { $teenagerNumberInput.val(teenagerNumber);
adultNumber--; }
$adultNumberInput.val(adultNumber); });
} // 儿童
}); $('#plusChildren').click(function () {
// 青少年 childrenNumber++;
$('#plusTeenager').click(function () { $childrenNumberInput.val(childrenNumber);
teenagerNumber++; });
$teenagerNumberInput.val(teenagerNumber); $('#minusChildren').click(function () {
}); if (childrenNumber > 0) {
$('#minusTeenager').click(function () { childrenNumber--;
if (teenagerNumber > 0) { $childrenNumberInput.val(childrenNumber);
teenagerNumber--; }
$teenagerNumberInput.val(teenagerNumber); });
} // 婴儿
}); $('#plusInfant').click(function () {
// 儿童 infantNumber++;
$('#plusChildren').click(function () { $infantNumberInput.val(infantNumber);
childrenNumber++; });
$childrenNumberInput.val(childrenNumber); $('#minusInfant').click(function () {
}); if (infantNumber > 0) {
$('#minusChildren').click(function () { infantNumber--;
if (childrenNumber > 0) { $infantNumberInput.val(infantNumber);
childrenNumber--; }
$childrenNumberInput.val(childrenNumber); });
}
});
// 婴儿
$('#plusInfant').click(function () { // Trip Length
infantNumber++; $('#tripLengthPlus').click(function () {
$infantNumberInput.val(infantNumber); tripLength++;
}); $('#tripLengthNumber').val(tripLength);
$('#minusInfant').click(function () { });
if (infantNumber > 0) {
infantNumber--; $('#tripLengthMinus').click(function () {
$infantNumberInput.val(infantNumber); if (tripLength > 1) {
} tripLength--;
}); $('#tripLengthNumber').val(tripLength);
}) }
</script> });
})
</script>
<script> <script>
// 折叠展开 // 折叠展开
@ -735,3 +842,11 @@ document.addEventListener('DOMContentLoaded', () => {
}, duration); }, duration);
} }
</script> </script>
<style>
.date_select {width: 27.5% !important; margin-bottom: 10px;}
.age_range { margin-top: 45px;}
@media (max-width: 750px){
.date_select {width: 93% !important; margin-bottom: 0 !important;}
.age_range { margin-top: 0;}
}
</style>
Write Preview
Loading…
Cancel
Save