AH 跨年表单优化和增加造装

master
LiaoYijun 1 year ago
parent c301b738fb
commit 54b9456fbc

@ -1,10 +1,11 @@
<!--New Year Countdown start-->
<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 New Year Countdown to 2025</h3>
<h3 style="font-size: 24px; line-height: 22px;">Chiang Mai CAD New Year Countdown to 2026</h3>
<form id='ticket_form' action="https://www.asiahighlights.com/orders/new_year_countdown_save" method="post" >
<p style="font-size: 22px;"><strong>Select Date:</strong></p>
<div class="selectHotl" style="margin-bottom: 20px;">
<div class="optionLable">
<div class="optionLable" style="display: none;">
<input type="radio" value="2024-12-30" id="december30th" name="ticket_date">
<label for="december30th">
December 30th, 2024
@ -34,7 +35,7 @@
</div>
</label>
</div>
<div class="optionLable" id="ticket_type_elite_december31th">
<div class="optionLable" id="ticket_type_elite_december31th" style="display: none">
<input type="radio" value="Elite Ticket" id="elite_december31th" data-price="289" name="ticket_type">
<label for="elite_december31th" style="font-size:18px;">
<strong style=" margin-bottom: 5px;
@ -61,13 +62,13 @@
</label>
</div>
<div class="optionLable" id="vip_type_premium_december31th">
<input type="radio" value="Premium Ticket" id="premium_december31th" data-price="179" name="ticket_type">
<input type="radio" value="Premium Ticket" id="premium_december31th" data-price="209" name="ticket_type">
<label for="premium_december31th" style="font-size:18px;">
<strong style=" margin-bottom: 5px;
display: block;
font-size: 19px;">Premium Ticket</strong>
<div class="selectionMemo" style="line-height: 18px;">
US$179 (6,500 THB)
US$209
<br>
Premium service + shuttle transfer + dinner
</div>
@ -87,13 +88,26 @@
</label>
</div>
<div class="optionLable" id="ticket_type_standard_december31th">
<input type="radio" value="VIP Ticket" checked id="vip_december31th" data-price="139" name="ticket_type">
<input type="radio" value="VIP Ticket" checked id="vip_december31th" data-price="199" name="ticket_type">
<label for="vip_december31th" style="font-size:18px;">
<strong style=" margin-bottom: 5px;
display: block;
font-size: 19px;">VIP Ticket</strong>
<div class="selectionMemo" style="line-height: 18px;">
US$139 (5,000 THB)
US$199
<br>
VIP service + shuttle transfer + dinner
</div>
</label>
</div>
<div class="optionLable" id="ticket_type_standard_december31th">
<input type="radio" value="Standard Ticket" checked id="standard_december31th" data-price="149" name="ticket_type">
<label for="standard_december31th" style="font-size:18px;">
<strong style="margin-bottom: 5px;
display: block;
font-size: 19px;">Standard Ticket</strong>
<div class="selectionMemo" style="line-height: 18px;">
US$149
<br>
VIP service + shuttle transfer + dinner
</div>
@ -103,6 +117,17 @@
<div id="ticket_type_errmsg" style="display: none">
<div class="requiredArea" style="margin-top:-10px;">Please select at least one option.</div>
</div>
<div style="clear: both;display: inline-block;border: 3px dashed #d1d1d1;border-radius: 10px;padding: 10px 10px 0px 10px;width: calc(100% - 30px);background: #fff;margin-top: 15px; margin-bottom: 20px;">
<p style="font-size: 19px;margin-bottom: 5px;font-style: italic;clear: both;"><strong>Exclusive Add-on:</strong> Thai Costume with Makeup &amp; Hairstyle <span style="color: #ad1818;">US$119 per person</span></p>
<div class="numberBtn">
<input class="minaddBtn reduceadult" id="minusButton_makeup" type="button" value="-">
<input class="number" id="makeupNumberValue" readonly="readonly" type="text" value="0" name="makeupNumber" style="width: 50px;height: 22px;top: -5px;position: relative;text-align: center;font-size: 20px;">
<input class="minaddBtn addadult" id="plusButton_makeup" type="button" value="+">
</div>
</div>
<p style="font-size: 22px;"><strong>Select Ticket Quantity</strong></p>
<div class="peopleSelect" style="width: auto;">
<span class="formMemo">
@ -404,17 +429,23 @@
</div>
<script>
function calcTotalPrice(ticketPrice, adultNumber) {
var totalPrice = ticketPrice * adultNumber;
totalPrice = totalPrice.toFixed(2);
var makeupPrice = makeupNumberValue * 119;
totalPriceHidden.value = totalPrice;
totalPriceText.innerText = '$' + totalPrice;
var totalPrice = (ticketPrice * adultNumber) + makeupPrice;
totalPrice = totalPrice.toFixed(2);
totalPriceHidden.value = totalPrice;
totalPriceText.innerText = '$' + totalPrice;
}
var adultNumberNode = document.getElementById("adultNumberValue");
var makeupNumberNode = document.getElementById("makeupNumberValue");
var ticketTypeList = document.querySelectorAll("input[name='ticket_type']");
var totalPriceText = document.getElementById("totalPriceText");
var totalPriceHidden = document.getElementById("totalPriceHidden");
var adultNumberValue = parseInt(adultNumberNode.value);
var makeupNumberValue = parseInt(makeupNumberNode.value);
var currentTicketPrice = 10000;
var vip_december30thRadio = document.getElementById("vip_december30th");
@ -502,6 +533,22 @@
calcTotalPrice(currentTicketPrice, adultNumberValue);
}
});
var plusMakeupButton = document.getElementById("plusButton_makeup");
var minusMakeupButton = document.getElementById("minusButton_makeup");
plusMakeupButton.addEventListener('click', function (event) {
makeupNumberValue = parseInt(makeupNumberNode.value) + 1;
makeupNumberNode.value = makeupNumberValue;
calcTotalPrice(currentTicketPrice, adultNumberValue);
});
minusMakeupButton.addEventListener('click', function (event) {
var beforeValue = parseInt(makeupNumberNode.value);
if (beforeValue > 0) {
makeupNumberValue = beforeValue - 1;
makeupNumberNode.value = makeupNumberValue;
calcTotalPrice(currentTicketPrice, adultNumberValue);
}
});
</script>
<script>
var submit_ticket_button = document.getElementById("submit_ticket_button");
@ -579,3 +626,4 @@
return result;
}
</script>
<!--New Year Countdown end-->
Loading…
Cancel
Save