information-system/application/views/mobile_first/ah-gp-form.php

<script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja"></script>
<div class="tmbottom">
    <h3 style="text-align: center; font-size: 20px; line-height: 22px;">Inquire now! Your 1:1 travel consultant will reply within 1 working day.</h3>  
    <form action="https://www.asiahighlights.com/orders/quick_inquiry_save" method="post" novalidate="" id='gp_form'>
        <textarea id="form_additionalrequirements" name="additional_requirements" placeholder="If you have other requirements such as adding private transport on arrival and departure day, extending the trip : pre - or post-tour, please let us know .... (optional)"></textarea>

        <div class="selectionBlock">
			<div id="adultBlock" >
				<p style="margin-bottom: 0; font-size: 22px; text-align: left;">Traveler numbers for your group:</p>
					<div class="peopleSelect" style="width: 100%;">
						<p style="margin-top: 20px; margin-bottom: 10px;">
							Adults and kids (≥10 years old)
					   </p>
					   <div class="numberBtn">
						<input class="minaddBtn reduceadult" id="minusAdult" type="button" value="-" style="width: 50px !important;">
						<input class="number" type="text" id="adultNumber"  readonly value="1" name="adult" style="width: 70px !important;
    text-align: center;
    position: relative;
    top: -7px;">
						<input class="minaddBtn addadult" id="plusAdult"  type="button" value="+" style="width: 50px !important;">
					</div>
					</div>
				</div>
	
				<div id="childrenBlock" >	
					<p style="font-size: 20px;margin-bottom: 10px;"><strong>Children</strong></p>
					<div class="kids_age" style="width: 30%;">
						<p style="margin-bottom: 5px;">3-9 yrs old</p>
						<select class="kids_number" id="childrenNumber" name="children_3_9_yrs" style="width: 55%;">
							<option value="0">0
							</option>
							<option value="1">1
							</option>
	
							<option value="2">2
							</option>
							<option value="3">3
							</option>
							<option value="4">4
							</option>
						</select>
					</div>
					<div class="kids_age" style="width: 30%;">
						<p style="margin-bottom: 5px;">0-2 yrs old</p>
						<select class="kids_number" id="infantNumber" name="infant_0_2_yrs" style="width: 55%;">
							<option value="0">0
							</option>
							<option value="1">1
							</option>
							<option value="2">2
							</option>
							<option value="3">3
							</option>
							<option value="4">4
							</option>
						</select>
					</div>
				</div>
		</div>
        <input class="FullName" id="realname" name="name" placeholder="Your name *" required="" type="text" value="" />
    <div id="realname_errmsg" style="display: none">
    <div class="requiredArea" style="margin-top:-10px;">Please enter your name.</div>
    </div>
    <input class="EmailAddress" id="email" name="email" placeholder="Email *" required="" type="text" value="" />
    <div id="email_errmsg" style="display: none">
    <div class="requiredArea" style="margin-top:-10px;">Please enter your email.</div>
    </div>  
    <div id="email_verify_errmsg" style="display: none">
    <div class="requiredArea" style="margin-top:-10px;">Please verify your email.</div>
    </div>   


    <select name="country_code" class="country_code" id="country_code">
	<option value="Afghanistan +93">Afghanistan    +93</option><option value="Albania +355">Albania    +355</option><option value="Algeria +213">Algeria   +213</option><option value="Andorra +376">Andorra   +376</option><option value="Angola +244">Angola   +244</option><option value="Anguilla +1">Anguilla   +1264</option><option value="Australia +61">Australia   +61</option><option value="Antigua and Barbuda +1">Antigua and Barbuda   +1268</option><option value="Argentina +54">Argentina   +54</option><option value="Armenia +374">Armenia    +374</option><option value="Aruba +297">Aruba   +297</option><option value="Ascension Island +247">Ascension Island   +247</option><option value="Austria +43">Austria   +43</option><option value="Azerbaijan +994">Azerbaijan   +994</option><option value="Bahamas +1">Bahamas   +1242</option><option value="Bahrain +973">Bahrain   +973</option><option value="Bangladesh +880">Bangladesh   +880</option><option value="Barbados +1">Barbados   +1246</option><option value="Belarus +375">Belarus   +375</option><option value="Belgium +32">Belgium   +32</option><option value="Belize +501">Belize   +501</option><option value="Benin +229">Benin   +229</option><option value="Bermuda +1">Bermuda   +1441</option><option value="Bhutan +975">Bhutan   +975</option><option value="Bolivia +591">Bolivia   +591</option><option value="Bosnia and Herzegovina +387">Bosnia and Herzegovina   +387</option><option value="Botswana +267">Botswana   +267</option><option value="Brazil +55">Brazil   +55</option><option value="British Indian Ocean Territory +246">British Indian Ocean Territory   +246</option><option value="British Virgin Islands +1">British Virgin Islands   +1284</option><option value="Brunei +673">Brunei   +673</option><option value="Bulgaria +359">Bulgaria    +359</option><option value="Burkina Faso +226">Burkina Faso   +226</option><option value="Burundi +257">Burundi   +257</option><option value="Cambodia +855">Cambodia   +855</option><option value="Cameroon +237">Cameroon   +237</option><option value="Canada +1">Canada   +1</option><option value="Cape Verde +238">Cape Verde   +238</option><option value="Caribbean Netherlands +599">Caribbean Netherlands   +599</option><option value="Cayman Islands +1">Cayman Islands   +1345</option><option value="Central African Republic +236">Central African Republic   +236</option><option value="Chad +235">Chad   +235</option><option value="Chile +56">Chile   +56</option><option value="China +86">China   +86</option><option value="Christmas Island +61">Christmas Island   +6189164</option><option value="Cocos Islands +61">Cocos Islands   +6189162</option><option value="Colombia +57">Colombia   +57</option><option value="Comoros +269">Comoros   +269</option><option value="Congo +243">Congo (DRC)   +243</option><option value="Congo +242">Congo (Republic)   +242</option><option value="Cook Islands +682">Cook Islands   +682</option><option value="Costa Rica +506">Costa Rica   +506</option><option value="Côte d'Ivoire +225">Côte d'Ivoire   +225</option><option value="Croatia +385">Croatia   +385</option><option value="Cuba +53">Cuba   +53</option><option value="Curaçao +599">Curaçao   +599</option><option value="Cyprus +357">Cyprus   +357</option><option value="Czech Republic +420">Czech Republic   +420</option><option value="Denmark +45">Denmark   +45</option><option value="Djibouti +253">Djibouti   +253</option><option value="Dominica +1">Dominica   +1767</option><option value="Dominican Republic +1">Dominican Republic   +1809</option><option value="Ecuador +593">Ecuador   +593</option><option value="Egypt +20">Egypt   +20</option><option value="El Salvador +503">El Salvador   +503</option><option value="Equatorial Guinea +240">Equatorial Guinea   +240</option><option value="Eritrea +291">Eritrea   +291</option><option value="Estonia +372">Estonia   +372</option><option value="Eswatini +268">Eswatini   +268</option><option value="Eth
</select>
    <input class="Inquiryphone" id="PhoneNo" name="PhoneNo" placeholder="Phone number *" type="tel" value="" /> 
    <div id="contact_errmsg" style="display: none">
        <div class="requiredArea" style="margin-top:-10px;">Please enter your phone number.</div> </div>
    
<p style="
					margin-top: 0;
					margin-bottom: 10px;
                    padding: 0;
				">I am also available on:</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>

    <button class="sendButton" id="submit_gp_form" type="button">Inquire Now</button>
    <input name="payment_required" id="payment_required" type="hidden" value="" />
    <input name="product_code" type="hidden" value="<?php echo $meta_product_code; ?>"/> 
    <input name="itinerary" type="hidden" value="<?php echo $information->ic_title; ?>" />
    </form>

</div>
<script>

	((doc) => {
		function _ready(fn) {
			const el = (elementId) => {
				const element = document.getElementById(elementId);
				element.on = (event, fn) => {
					element.addEventListener(event, fn);
				}
				element.addClass = (className) => {
					element.classList.add(className);
				}
				element.removeClass = (className) => {
					element.classList.remove(className);
				}
				element.show = () => {
					element.style.display = '';
				}
				element.hide = () => {
					element.style.display = 'none';
				}
				return element;
			}
			document.addEventListener('DOMContentLoaded', () => {
				fn(el);
			});
		}
		_ready(el => {
			var adultNumberValue = el('adultNumber').value;
			const plusAdultBtn = el('plusAdult');
			const minusAdultBtn = el('minusAdult');
			
			plusAdultBtn.on('click', () => {
				adultNumberValue++;
				el('adultNumber').value = adultNumberValue;
			});        
			minusAdultBtn.on('click', () => {
				if (adultNumberValue > 1) {
					adultNumberValue--;
					el('adultNumber').value = adultNumberValue;
				}
			});
	
			function validateGPForm() {
				var result = true;
				var realnameVal = el("realname").value;
				var emailVal = el("email").value;
				var contactVal = el("PhoneNo").value;
	
				var realnameErrEl = el("realname_errmsg");
				var emailErrEl = el("email_errmsg");
				var emailVerifyErrEl = el("email_verify_errmsg");
				var contactErrEl = el("contact_errmsg");
	
				realnameErrEl.hide();
				emailErrEl.hide();
				emailVerifyErrEl.hide();
				contactErrEl.hide();
	
				if (realnameVal === '') {
					realnameErrEl.show();
					result = false;
				}
				if (emailVal === '') {
					emailErrEl.show();
					result = false;
				} else {
					var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
					if (!emailPattern.test(emailVal)) {
						emailVerifyErrEl.show();
						result = false;
					}
				}
				if (contactVal === '') {
					contactErrEl.show();
					result = false;
				}
				return result;
			}
	
			
			const submitFormBtn = el('submit_gp_form');
			const gp_form = el('gp_form');
			submitFormBtn.on('click', () => {
				if (validateGPForm()) {					
					if (typeof(grecaptcha) === "undefined") {
						console.warn('grecaptcha is disabled.');
						gp_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;
							gp_form.appendChild(el);
							gp_form.submit();
              submitFormBtn.innerText = "Submitted successfully";
						});
					}
				}
			});
			
		});
	})(document);
	</script>
    <script src="https://data.chinahighlights.com/js/min.php?f=/js/jquery-1.8.2.min.js,/js/jquery.mailAutoComplete-4.0.min.js&amp;v=20231110"></script>
    <script>
    $(function () {
        $.getJSON("https://www.chinahighlights.com/guide-use.php/apps/ip2location/index/get_country", function (data) {
            var yourCountry = data.country_name;
            $('#country_code option').each((i, optionEle) => {
                var countryName = optionEle.value.split('+')[0].trim();
                if (yourCountry === countryName) {
                    optionEle.selected = true;
                }
            });
        })
            .fail(function (xhr, status, error) {
                console.error(error);
            });
    })
    </script>