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 4eea6f4de0
commit b390a7b313
1 changed files with 261 additions and 179 deletions
Show Stats Download Patch File Download Diff File

440
application/views/mobile_first/ah-info-page-form.php
Unescape Escape View File

@ -6,9 +6,9 @@
<h3 style="text-align: center; font-size: 20px; line-height: 22px;">Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.</h3> <h3 style="text-align: center; font-size: 20px; line-height: 22px;">Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.</h3>
<form action="/orders/quick_inquiry_save" method="post" novalidate="" id="info_page_form"> <form action="/orders/quick_inquiry_save" method="post" novalidate="" id="info_page_form">
<textarea id="form_additionalrequirements" name="additional_requirements" placeholder="E.g.: <textarea id="form_additionalrequirements" name="additional_requirements" placeholder="E.g. This is a big trip for my birthday, anniversary, honeymoon, retirement, kid's graduation, bucket list…
This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's graduation, bucket list..." style="height:70px;"></textarea> Our must-dos/must-sees are…" style="height:80px;"></textarea>
<!--
<div class="selectionBlock"> <div class="selectionBlock">
<h4> <h4>
Number in your group Number in your group
@ -139,7 +139,43 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
</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" value="" /> <input class="FullName" id="realname" name="name" placeholder="Your name *" required="" type="text" value="" />
<div id="realname_errmsg" style="display: none"> <div id="realname_errmsg" style="display: none">
<div class="requiredArea" style="margin-top:-10px;">Please enter your name</div> <div class="requiredArea" style="margin-top:-10px;">Please enter your name</div>
@ -152,12 +188,7 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
<div id="email_verify_errmsg" style="display: none"> <div id="email_verify_errmsg" style="display: none">
<div class="requiredArea" style="margin-top:-10px;">Please verify your email</div> <div class="requiredArea" style="margin-top:-10px;">Please verify your email</div>
</div> </div>
<!--
<input class="InquiryCalendar" id="starting_date" name="date_start" placeholder="Starting date *" readonly="readonly" />
<div id="starting_date_errmsg" style="display: none">
<div class="requiredArea" style="margin-top:-10px;">Please enter your starting date</div>
</div>
-->
<select name="country_code" class="country_code"> <select name="country_code" class="country_code">
<option style="font-weight: 600;" value="United States +1">United States&nbsp; &nbsp;+1</option> <option style="font-weight: 600;" value="United States +1">United States&nbsp; &nbsp;+1</option>
<option style="font-weight: 600;" value="United Kingdom +44">United Kingdom&nbsp; &nbsp;+44</option> <option style="font-weight: 600;" value="United Kingdom +44">United Kingdom&nbsp; &nbsp;+44</option>
@ -456,180 +487,231 @@ This is a big trip for: birthday, anniversary, honeymoon, retirement, kid's grad
--> -->
</div> </div>
<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 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";
});
}
}
});
}); });
var info_page_button = document.getElementById("info_page_button");
var info_page_form = document.getElementById("info_page_form");
info_page_button.addEventListener('click', function(event) { function validateQuickInquiryForm() {
var validateResult = validateQuickInquiryForm(); var result = true;
if (validateResult) { var realnameVal = document.getElementById("realname").value;
if (typeof(grecaptcha) === "undefined") { var emailVal = document.getElementById("email").value;
console.warn('grecaptcha is disabled.'); var expectedDateVal = document.getElementById("starting_date").value;
info_page_form.submit(); var expectedMonthVal = document.getElementById("expectedMonth").value;
} else { var contactVal = document.getElementById("PhoneNo").value;
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'}); var realnameErrEl = document.getElementById("realname_errmsg");
var el = document.createElement("input"); var emailErrEl = document.getElementById("email_errmsg");
el.type = "hidden"; var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
el.name = "__grecaptcha_token__"; var startingDateErrEl = document.getElementById("date_error_msg");
el.value = token; var contactErrEl = document.getElementById("contact_errmsg");
info_page_form.appendChild(el); var groupErrEl = document.getElementById("group_error_msg");
info_page_form.submit();
info_page_button.innerText = "Submitted successfully"; 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 !== '';
function validateQuickInquiryForm() { } else if (selectedExpectedDate === 'approximate') {
var result = true; tripDate_is_checked = expectedMonthVal !== '';
var realnameVal = document.getElementById("realname").value; } else if (selectedExpectedDate === 'yet') {
var emailVal = document.getElementById("email").value; tripDate_is_checked = true;
// var startingDateVal = document.getElementById("starting_date").value; }
var contactVal = document.getElementById("PhoneNo").value;
//时间选择
var realnameErrEl = document.getElementById("realname_errmsg"); if (!tripDate_is_checked) {
var emailErrEl = document.getElementById("email_errmsg"); startingDateErrEl.style.display = '';
var emailVerifyErrEl = document.getElementById("email_verify_errmsg"); result = false;
// var startingDateErrEl = document.getElementById("starting_date_errmsg"); }
var contactErrEl = document.getElementById("contact_errmsg");
// var groupErrEl = document.getElementById("group_error_msg"); if (realnameVal === '') {
realnameErrEl.style.display = '';
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;
// }
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; 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 (contactVal === '') { var $adultBlock = $('#adultBlock');
contactErrEl.style.display = ''; var $childrenBlock = $('#childrenBlock');
result = false; var $adultNumberInput = $('#adultNumber');
} var adultNumber = $adultNumberInput.val();
return result; var $teenagerNumberInput = $('#teenagerNumber');
} var teenagerNumber = $teenagerNumberInput.val();
</script> var $childrenNumberInput = $('#childrenNumber');
var childrenNumber = $childrenNumberInput.val();
var $infantNumberInput = $('#infantNumber');
<script> var infantNumber = $infantNumberInput.val();
// var $adultBlock = $('#adultBlock'); $('input[name="travel_group"]').each((i, groupEle) => {
// var $childrenBlock = $('#childrenBlock'); $(groupEle).click(function (e) {
// var $adultNumberInput = $('#adultNumber');
// var adultNumber = $adultNumberInput.val(); $teenagerNumberInput.val(0);
// var $teenagerNumberInput = $('#teenagerNumber'); $childrenNumberInput.val(0);
// var teenagerNumber = $teenagerNumberInput.val(); $infantNumberInput.val(0);
// var $childrenNumberInput = $('#childrenNumber');
// var childrenNumber = $childrenNumberInput.val(); var currentTarget = e.currentTarget;
// var $infantNumberInput = $('#infantNumber'); if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
// var infantNumber = $infantNumberInput.val(); $adultBlock.show();
// $('input[name="travel_group"]').each((i, groupEle) => { $childrenBlock.show();
// $(groupEle).click(function (e) { } 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 = $('#flatpickrBlock');
var $expectedMonth = $('#expectedMonth');
var $dateSelectionBlock = $('#dateSelectionBlock');
var $tripDateTip = $('#trip_date_tip');
// $teenagerNumberInput.val(0); $('input[name="trip_date"]').each((i, tripDateEle) => {
// $childrenNumberInput.val(0); $(tripDateEle).click(function (e) {
// $infantNumberInput.val(0); $expectedDate.val('');
$expectedMonth.val('');
// var currentTarget = e.currentTarget; $tripDateBlock.show();
// if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) { var selectedTripDate = e.currentTarget;
// $adultBlock.show(); selectedExpectedDate = selectedTripDate.id;
// $childrenBlock.show(); if (selectedTripDate.id === 'exact') {
// } else { $dateSelectionBlock.show();
// $adultBlock.show(); $expectedMonth.hide();
// $childrenBlock.hide(); $expectedDate.show();
// } $tripDateTip.show();
// if (currentTarget.id === 'Couple') { } else if (selectedTripDate.id === 'approximate') {
// $adultNumberInput.val(2); $dateSelectionBlock.show();
// } else if (currentTarget.id === 'Solo') { $expectedDate.hide();
// $adultNumberInput.val(1); $expectedMonth.show();
// } $tripDateTip.show();
// }) } else if (selectedTripDate.id === 'yet') {
// }); $dateSelectionBlock.hide();
$tripDateTip.hide();
}
// //成人 })
// $('#plusAdult').click(function () { });
// adultNumber++;
// $adultNumberInput.val(adultNumber); //成人
// }); $('#plusAdult').click(function () {
// $('#minusAdult').click(function () { adultNumber++;
// if (adultNumber > 1) { $adultNumberInput.val(adultNumber);
// adultNumber--; });
// $adultNumberInput.val(adultNumber); $('#minusAdult').click(function () {
// } if (adultNumber > 1) {
// }); adultNumber--;
// // 青少年 $adultNumberInput.val(adultNumber);
// $('#plusTeenager').click(function () { }
// teenagerNumber++; });
// $teenagerNumberInput.val(teenagerNumber); // 青少年
// }); $('#plusTeenager').click(function () {
// $('#minusTeenager').click(function () { teenagerNumber++;
// if (teenagerNumber > 0) { $teenagerNumberInput.val(teenagerNumber);
// teenagerNumber--; });
// $teenagerNumberInput.val(teenagerNumber); $('#minusTeenager').click(function () {
// } if (teenagerNumber > 0) {
// }); teenagerNumber--;
// // 儿童 $teenagerNumberInput.val(teenagerNumber);
// $('#plusChildren').click(function () { }
// childrenNumber++; });
// $childrenNumberInput.val(childrenNumber); // 儿童
// }); $('#plusChildren').click(function () {
// $('#minusChildren').click(function () { childrenNumber++;
// if (childrenNumber > 0) { $childrenNumberInput.val(childrenNumber);
// childrenNumber--; });
// $childrenNumberInput.val(childrenNumber); $('#minusChildren').click(function () {
// } if (childrenNumber > 0) {
// }); childrenNumber--;
// // 婴儿 $childrenNumberInput.val(childrenNumber);
// $('#plusInfant').click(function () { }
// infantNumber++; });
// $infantNumberInput.val(infantNumber); // 婴儿
// }); $('#plusInfant').click(function () {
// $('#minusInfant').click(function () { infantNumber++;
// if (infantNumber > 0) { $infantNumberInput.val(infantNumber);
// infantNumber--; });
// $infantNumberInput.val(infantNumber); $('#minusInfant').click(function () {
// } if (infantNumber > 0) {
// }); infantNumber--;
</script> $infantNumberInput.val(infantNumber);
}
});
})
</script>
<style>
.date_select {width: 27.5% !important;}
@media (max-width: 750px){
.date_select {
width: 93% !important;
}
}
</style>
Write Preview
Loading…
Cancel
Save