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

水灯节信息页表单改版

Browse Source
master
Jimmy Liow 1 year ago
parent 43e53085eb
commit 5d2cb7931c
1 changed files with 165 additions and 129 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,60 +1,101 @@
<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>
<div class="tmbottom">
<h3 style="font-size: 24px; line-height: 22px;">Chiang Mai CAD Yi Peng Festival 2024 - Secure Your Exclusive Tickets While You Can!</h3>
<form id='ticket_form' action="https://www.asiahighlights.com/orders/lantern_save" method="post">
<p style=" font-size: 22px;"><strong>Select Date:</strong></p>
<div class="selectHotl" style="margin-bottom: 20px;">
<form id='ticket_form' action="https://www.asiahighlights.com/orders/lantern_save" method="post" >
<p style="font-size: 22px;"><strong>Select a Venue:</strong></p>
<div class="selectHotl" style="margin-bottom: 20px;">
<div class="optionLable">
<input type="radio" value="CAD Khomloy Sky Lanterns Festival" checked id="Khomloy" name="Venue">
<label for="Khomloy">
<strong>CAD Khomloy Sky Lanterns Festival</strong>
<br>
The most spectacular one, over 8,000 seats
</label>
</div>
<div class="optionLable">
<input type="radio" value="Heritage Sky Lanterns Festival" id="Heritage" name="Venue">
<label for="Heritage">
<strong>Heritage Sky Lanterns Festival</strong>
<br>
The most cost-effective one, 4,500 seats
</label>
</div>
</div>
<p style="font-size: 22px;"><strong>Select Date:</strong></p>
<div class="selectHotl" style="margin-bottom: 20px;">
<div class="optionLable">
<input type="radio" value="2024-11-15" id="november15th" name="ticket_date">
<input type="radio" value="2024-11-15" checked id="november15th" name="ticket_date">
<label for="november15th">
November 15th, 2024
</label>
</div>
<div class="optionLable">
<input type="radio" value="2024-11-16" checked id="november16th" name="ticket_date">
<input type="radio" value="2024-11-16" id="november16th" name="ticket_date">
<label for="november16th">
November 16th, 2024
</label>
</div>
</div>
<p style=" font-size: 22px;"><strong>Select an Available Ticket Type</strong></p>
<div class="selectHotl" style="margin-bottom: 20px;">
<div class="optionLable" id="ticket_type_premium">
<input type="radio" value="Premium+Transfer+Dinner" id="Premium" name="ticket_type">
<label for="Premium" style="font-size:18px;">
<p style="font-size: 22px;"><strong>Select an Available Ticket Type</strong></p>
<div class="selectHotl" style="margin-bottom: 20px;">
<div class="optionLable" id="ticket_type_premium_khomloy">
<input type="radio" value="Premium+Transfer+Dinner" checked id="premium_khomloy" data-price="179" name="ticket_type">
<label for="premium_khomloy" style="font-size:18px;">
Premium+Transfer+Dinner
<div class="selectionMemo">
US$179 (6400THB)
</div>
<div id='premium_ticket_left' style="display: none;">0 left</div>
</label>
</div>
<div class="optionLable" id="vip_type_premium">
<input type="radio" value="VIP+Transfer+Dinner" id="VIP" name="ticket_type">
<label for="VIP" style="font-size:18px;">
<div class="optionLable" id="ticket_type_vip_khomloy">
<input type="radio" value="VIP+Transfer+Dinner" id="vip_khomloy" data-price="169" name="ticket_type">
<label for="vip_khomloy" style="font-size:18px;">
VIP+Transfer+Dinner
<div class="selectionMemo">
US$169 (5900THB)
</div>
<div id='vip_ticket_left' style="display: none;">0 left</div>
</label>
</div>
<div class="optionLable" id="ticket_type_standard">
<input type="radio" value="Standard+Transfer+Dinner" checked id="Standard" name="ticket_type">
<label for="Standard" style="font-size:18px;">
<div class="optionLable" id="ticket_type_standard_khomloy">
<input type="radio" value="Standard+Transfer+Dinner" id="standard_khomloy" data-price="129" name="ticket_type">
<label for="standard_khomloy" style="font-size:18px;">
Standard+Transfer+Dinner
<div class="selectionMemo">
US$129 (4600THB)
</div>
<div id='standard_ticket_left' style="display: none;">0 left</div>
</label>
</div>
<div class="optionLable" id="ticket_type_premium_heritage" style="display: none;">
<input type="radio" value="Premium service+Exclusive Hotel Transfer+Dinner" id="premium_heritage" data-price="159" name="ticket_type">
<label for="premium_heritage" style="font-size:18px;">
Premium service+<strong>Exclusive Hotel Transfer</strong>+Dinner
<div class="selectionMemo">
US$159 (5500THB)
</div>
</label>
</div>
<div class="optionLable" id="ticket_type_vip_heritage" style="display: none;">
<input type="radio" value="VIP Service+Shuttle Transfer+Dinner" id="vip_heritage" data-price="109" name="ticket_type">
<label for="vip_heritage" style="font-size:18px;">
VIP Service+Shuttle Transfer+Dinner
<div class="selectionMemo">
US$109 (3900THB)
</div>
</label>
</div>
</div>
<div id="ticket_type_errmsg" style="display: none">
<div class="requiredArea" style="margin-top:-10px;">Please select at least one option.</div>
</div>
<p style=" font-size: 22px;"><strong>Select Ticket Quantity</strong></p>
<p style="font-size: 22px;"><strong>Select Ticket Quantity</strong></p>
<div class="peopleSelect" style="width: auto;">
<span class="formMemo">
Adults and older children (8+ years old)
@ -71,18 +112,13 @@
<input class="minaddBtn addadult" id='plusButton' type="button" value="+">
</div>
</div>
<p style="display: inline-block;">Children under 8 years old enter free; 8-year-olds and above are charged the same as adults. You can buy a
ticket for your child under 8 if you would like her or him to enjoy the same provision.</p>
<div class="payonline_price">Total price: <strong id="totalPriceText">$129</strong></div>
<p style="margin-top: 50px;"><strong>Please provide correct personal information for your ticket
booking. Double
check.</strong></p>
<input class="FullName" id="ticket_realname" name="fullname"
placeholder="Your name * (exactly as in your passport)" required="" type="text" value="" />
placeholder="Your name * (exactly per passport)" required="" type="text" value="" />
<div id="ticket_realname_errmsg" style="display: none">
<div class="requiredArea" style="margin-top:-10px;">Please enter your name.</div>
</div>
@ -95,7 +131,7 @@
<div class="requiredArea" style="margin-top:-10px;">Please verify your email.</div>
</div>
<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="Australia +61">Australia&nbsp; &nbsp;+61</option>
<option style="font-weight: 600;" value="Canada +1">Canada&nbsp; &nbsp;+1</option>
@ -348,153 +384,153 @@
<option value="Åland Islands +385">Åland Islands&nbsp; &nbsp;+35818</option>
</select>
<input class="Inquiryphone" id="ticket_PhoneNo" name="PhoneNo"
placeholder="Phone number *" type="tel" value="" />
placeholder="Phone number *" type="tel" value="" />
<div id="ticket_contact_errmsg" style="display: none">
<div class="requiredArea" style="margin-top:-10px;">Please enter your phone number.</div>
</div>
<textarea name="other_travels_name"
placeholder="For booking two/or more tickets, please fill in other traveler name(s) here: (per passport, e.g. Smith Sarah Jean)" ></textarea>
<textarea name="additional_requirements"
placeholder="If you have other requirements such as hotel booking, customized guided tour, private transport, or a full tour package, please let us know .... (optional)"></textarea>
<textarea name="other_travelers_names" placeholder="If booking two or more tickets,please fill in other traveler name(s) here:(per passport, e.g.Smith Sarah Jean)."></textarea>
<p style="
<p style="
margin-top: 0;
margin-bottom: 10px;
padding: 0;
">I prefer to be contacted via:</p>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_whatsapp" id="whatsapp" class="checkBorder">
<label for="whatsapp">WhatsApp</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_iMessage" id="iMessage" class="checkBorder">
<label for="iMessage">iMessage</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_phone_call" id="Phone" class="checkBorder">
<label for="Phone">Phone call</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_email" id="Email" class="checkBorder">
<label for="Email">Email</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_video_appointment" id="Video" class="checkBorder">
<label for="Video">Video appointment</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_whatsapp" id="whatsapp" class="checkBorder" >
<label for="whatsapp">WhatsApp</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_iMessage" id="iMessage" class="checkBorder" >
<label for="iMessage">iMessage</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_phone_call" id="Phone" class="checkBorder" >
<label for="Phone">Phone call</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_email" id="Email" class="checkBorder" >
<label for="Email">Email</label>
</div>
<div class="checkYes">
<input type="checkbox" value="yes" name="contact_via_video_appointment" id="Video" class="checkBorder" >
<label for="Video">Video appointment</label>
</div>
<input name="total_price" id="totalPriceHidden" type="hidden" value="10000" />
<input name="product_sn" id="product_sn" type="hidden" value="13949" />
<input name="product_code" id="cli_no" type="hidden" value="YDFW-AH" />
<input name="product_code" id="cli_no" type="hidden" value="YDFW-AH"/>
<input name="itinerary" type="hidden" value="<?php echo $information->ic_title; ?>" />
<button class="sendButton" id="submit_ticket_button" name="submit_ticket_form" type="button">Proceed to
Payment</button>
<button class="sendButton" id="submit_ticket_button" name="submit_ticket_form"
type="button">Proceed to Payment</button>
<p style=" text-align: center;
font-style: italic;
margin-top: -15px;
line-height: 20px;"><strong>Once we receive your payment, our travel advisor will contact you within 24 hours and send you your e-ticket.</strong></p>
</form>
</div>
<script>
function calcTotalPrice(ticketPrice, adultNumber) {
var totalPrice = ticketPrice * adultNumber;
if (adultNumber >= 10) {
totalPrice = totalPrice * 0.95;
}
return totalPrice.toFixed(2);
totalPrice = totalPrice.toFixed(2);
totalPriceHidden.value = totalPrice;
totalPriceText.innerText = '$' + totalPrice;
}
var adultNumberNode = document.getElementById("adultNumberValue");
var ticketDateList = document.querySelectorAll("input[name='ticket_date']");
var ticketTypeList = document.querySelectorAll("input[name='ticket_type']");
var ticket_type_premium_khomloy_div = document.getElementById("ticket_type_premium_khomloy");
var ticket_type_vip_khomloy_div = document.getElementById("ticket_type_vip_khomloy");
var ticket_type_standard_khomloy_div = document.getElementById("ticket_type_standard_khomloy");
var ticket_type_premium_heritage_div = document.getElementById("ticket_type_premium_heritage");
var ticket_type_vip_heritage_div = document.getElementById("ticket_type_vip_heritage");
var premium_khomloy_radio = document.getElementById("premium_khomloy");
var premium_heritage_radio = document.getElementById("premium_heritage");
var venueList = document.querySelectorAll("input[name='Venue']");
var totalPriceText = document.getElementById("totalPriceText");
var totalPriceHidden = document.getElementById("totalPriceHidden");
var adultNumberValue = parseInt(adultNumberNode.value);
var ticketPrice = 129;
totalPriceHidden.value = ticketPrice * adultNumberValue;
totalPriceText.innerText = '$' + ticketPrice;
for (var i = 0; i < ticketTypeList.length; i++) {
var ticketTypeNode = ticketTypeList[i];
ticketTypeNode.addEventListener('click', function (event) {
var currentTicketPrice = 10000;
for (var i = 0; i < venueList.length; i++) {
var venueNode = venueList[i];
venueNode.addEventListener('click', function (event) {
var currentTarget = event.currentTarget;
var adultNumberValue = parseInt(adultNumberNode.value);
if (currentTarget.value === 'Premium+Transfer+Dinner') {
ticketPrice = 179;
} else if (currentTarget.value === 'Standard+Transfer+Dinner') {
ticketPrice = 129;
} else if (currentTarget.value === 'VIP+Transfer+Dinner') {
ticketPrice = 169;
if (currentTarget.id === 'Khomloy') {
setKhomloyTicket();
}
if (currentTarget.id === 'Heritage') {
setHeritageTicket();
}
var totalPrice = calcTotalPrice(ticketPrice, adultNumberValue);
totalPriceText.innerText = '$' + totalPrice;
totalPriceHidden.value = totalPrice;
});
}
var ticketDateList = document.querySelectorAll("input[name='ticket_date']");
var ticketTypePremium = document.getElementById("ticket_type_premium");
var vipTypePremium = document.getElementById("vip_type_premium");
var ticketTypeStandard = document.getElementById("ticket_type_standard");
var premiumOption = document.getElementById("Premium");
var vipOption = document.getElementById("VIP");
var standardOption = document.getElementById("Standard");
var premiumTicketLeft = document.getElementById("premium_ticket_left");
var vipTicketLeft = document.getElementById("vip_ticket_left");
var standardTicketLeft = document.getElementById("standard_ticket_left");
setNovember16thTicketLeft();
for (var i = 0; i < ticketDateList.length; i++) {
var ticketDateNode = ticketDateList[i];
ticketDateNode.addEventListener('click', function (event) {
for (var i = 0; i < ticketTypeList.length; i++) {
var ticketTypeNode = ticketTypeList[i];
currentTicketPrice = parseInt(ticketTypeNode.getAttribute('data-price'));
if (ticketTypeNode.checked) {
calcTotalPrice(currentTicketPrice, adultNumberValue);
}
ticketTypeNode.addEventListener('click', function (event) {
var currentTarget = event.currentTarget;
standardOption.checked = false;
vipOption.checked = false;
premiumOption.checked = false;
if (currentTarget.id === 'november15th') {
setNovember15thTicketLeft();
} else { // november16th
setNovember16thTicketLeft();
}
currentTicketPrice = parseInt(currentTarget.getAttribute('data-price'));
adultNumberValue = parseInt(adultNumberNode.value);
calcTotalPrice(currentTicketPrice, adultNumberValue);
});
}
function setNovember15thTicketLeft() {
ticketPrice = 0;
totalPriceText.innerText = '$0';
totalPriceHidden.value = 0;
standardOption.disabled = false;
vipOption.disabled = false;
premiumOption.disabled = false;
premiumTicketLeft.innerText = 'sold out';
vipTicketLeft.innerText = 'sold out';
standardTicketLeft.innerText = 'sold out';
function setKhomloyTicket() {
ticket_type_premium_khomloy_div.style.display = '';
ticket_type_vip_khomloy_div.style.display = '';
ticket_type_standard_khomloy_div.style.display = '';
ticket_type_premium_heritage_div.style.display = 'none';
ticket_type_vip_heritage_div.style.display = 'none';
premium_khomloy_radio.checked = true;
currentTicketPrice = parseInt(premium_khomloy_radio.getAttribute('data-price'));
adultNumberValue = parseInt(adultNumberNode.value);
calcTotalPrice(currentTicketPrice, adultNumberValue);
}
function setNovember16thTicketLeft() {
standardOption.disabled = false;
vipOption.disabled = false;
premiumOption.disabled = false;
premiumTicketLeft.innerText = 'sold out';
vipTicketLeft.innerText = 'sold out';
standardTicketLeft.innerText = 'sold out';
function setHeritageTicket() {
ticket_type_premium_khomloy_div.style.display = 'none';
ticket_type_vip_khomloy_div.style.display = 'none';
ticket_type_standard_khomloy_div.style.display = 'none';
ticket_type_premium_heritage_div.style.display = '';
ticket_type_vip_heritage_div.style.display = '';
premium_heritage_radio.checked = true;
currentTicketPrice = parseInt(premium_heritage_radio.getAttribute('data-price'));
adultNumberValue = parseInt(adultNumberNode.value);
calcTotalPrice(currentTicketPrice, adultNumberValue);
}
var plusButton = document.getElementById("plusButton");
var minusButton = document.getElementById("minusButton");
plusButton.addEventListener('click', function (event) {
var adultNumberValue = parseInt(adultNumberNode.value) + 1;
adultNumberValue = parseInt(adultNumberNode.value) + 1;
adultNumberNode.value = adultNumberValue;
var totalPrice = calcTotalPrice(ticketPrice, adultNumberValue);
totalPriceText.innerText = '$' + totalPrice;
totalPriceHidden.value = totalPrice;
calcTotalPrice(currentTicketPrice, adultNumberValue);
});
minusButton.addEventListener('click', function (event) {
var beforeValue = parseInt(adultNumberNode.value);
if (beforeValue > 1) {
var adultNumberValue = beforeValue - 1;
adultNumberValue = beforeValue - 1;
adultNumberNode.value = adultNumberValue;
var totalPrice = calcTotalPrice(ticketPrice, adultNumberValue);
totalPriceText.innerText = '$' + totalPrice;
totalPriceHidden.value = totalPrice;
calcTotalPrice(currentTicketPrice, adultNumberValue);
}
});
</script>
@ -548,7 +584,7 @@
}
}
if (!selectedTicketType) {
if (!selectedTicketType) {
ticketTypeErrEl.style.display = '';
result = false;
}

Write Preview
Loading…
Cancel
Save