CETA - Clean Energy Transition Asia Registration

<!doctype html> <html> <head>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NNXSBXGH');</script>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="generator" content="Regnant"> <meta name="version" content="{$system['system_version']}">  <meta name="description" content="Registration"> <meta name="keywords" content="Regnant">    <meta property="og:site_name" content="Registration"> <meta property="og:title" content="Registration"> <meta property="og:description" content="">         <meta property="og:url" content="index.php">  <meta property="og:title" content="Registration" /> <meta property="og:description" content="CETA - Clean Energy Transition Asia" /> <meta property="og:site_name" content="Registration" /> <meta property="og:image" content="{$page_image}" />      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script> <link rel="icon" type="image/png" href="img/favicon.png"> <script> var onloadCallback = function() { grecaptcha.enterprise.render('captcha_time', { 'sitekey' : '6LdemR8qAAAAAG82W0aGflUL5pTqMAWYys_pQ4ZK', }); }; </script> <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit" async defer> </script> <title>CETA - Clean Energy Transition Asia Registration</title> <style> /* * { font-weight: bold !important; } */ @font-face { font-family: 'MuseoSans-500'; src: url(font/MuseoSans-500.otf); } @font-face { font-family: 'MuseoSans-300'; src: url(font/MuseoSans_300.otf); } @font-face { font-family: 'MuseoSans-700'; src: url(font/MuseoSans_700.otf); } body { /* background-image: url('img/bg.png'); */ background-color: #01393A; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; height: 100%; /* padding-top: 5%; */ /* thic-Regular';font-family: 'PillGo */ font-family: 'MuseoSans-500'; display: flex; justify-content: center; align-items: center; /* background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(74,102,166,1) 100%); */ } .progress-container { width: 100%; /* max-width: 600px; */ margin: 20px 0; background-color: #eee; overflow: hidden; box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white; } .progress-bar { display: flex; flex-wrap: wrap; background-color: #a7d7c6; color: #e5e5e5; height: 40px; } .step { flex: 1; text-align: center; line-height: 40px; position: relative; box-sizing: border-box; } .step:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #82bfa9; z-index: -1; } .step.completed { color: #fff; background-color: #32b98e; border-right: #fff 1px solid; } .step.active { background-color: #009063; border-radius: 0; border-right: #fff 1px solid; color: #fff; } @media only screen and (min-height: 607px) and (max-height: 760px) { body { height: 100%; padding-top: 5%; } } .footer { pointer-events: none; position: fixed; bottom: 2%; width: 100%; left: 0; right: 0; text-align: center; } /* .footer img { width: 100%; } */ .register-button { background: #242f65; color: #ffffff; border: 1px; border-radius: 10px; border-style: solid; border-color: #242f65; width: -webkit-fill-available; /* width: 150px; height: 45px; */ } .register-button:hover { background: #1a2353; color: white; border-color: #1a2353; margin: 0; } .btn-secondary { margin: 0; } .iti { width: inherit; display: block; } .form-content { padding-top: 15%; } .desktop-hide { display: none !important; } .desktop-hide-2 { display: none !important; } .form-control { border-radius: 12px; } .input-group-text { border-radius: 12px 0 0 12px; } @media only screen and (min-width: 1920px) { /* .btn-secondary, .register-button:hover { margin: 0 100px 0 100px; } */ } @media only screen and (min-width: 1024px) and (max-width: 1200px) { .form-content { padding-top: 25%; } .img-fluid { margin-top: 0px !important; } .mobile-hide-2 { display: none !important; } .desktop-hide-2 { display: block !important; } } @media only screen and (max-width: 1024px) { .desktop-hide-2 { display: block !important; } } @media only screen and (max-width: 1013px) { .desktop-hide-2 { display: block !important; } .mobile-hide-2 { display: none !important; } } @media only screen and (max-width: 960px) { body { /* background-image: url('img/bg.png'); */ background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; height: 100%; display: block; /* background-color: #000; */ } .img-fluid { margin-top: 0px !important; } .form-content { padding-top: 55%; } .mobile-hide-2 { display: none !important; } .mobile-hide { display: none !important; } .desktop-hide { display: block !important; } .desktop-hide-2 { display: block !important; } .step { font-size: 13px; } /* table { transform: scale(0.7); } */ } /*HIDE NUMBER SCROLLING INPUT*/ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; } ::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; } .form-control { border-radius: 18px; box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white; } select.form-control:focus, .form-control:focus { box-shadow: inset 6px 6px 6px white, inset -6px -6px 6px #cbced1; border-color: #cbced1; } .btn-success { background-color: #009063; border: 1px solid #009063; } .btn-success:hover { background-color: #0f7354; border: 1px solid #0f7354; } /* .btn-secondary { background-color: #00a99d; border-radius:18px; } */ .duplicate-email { border: 2px solid red; } .duplicate-email-popup { color: red; margin-left: 10px; /* Adjust as needed for spacing */ } .invalid-email-popup { color: red; margin-left: 10px; /* Adjust as needed for spacing */ } .error-message { color: red; font-size: 0.9em; display: none; } .is-invalid { border-color: red; } #verify-captcha-btn { padding: 5px 20px; border-radius: 8px; color: white; background: #0d6efd; border: 1px solid #0d6efd; } #rc-anchor-container { display: flex; justify-content: center; } </style> </head> <body class="d-block justify-content-center align-items-center pl-3 pr-3">  <noscript><iframe src=https://www.googletagmanager.com/ns.html?id=GTM-NNXSBXGH height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="container-fluid col-md-6 offset-md-3 justify-content-center align-items-center">  <div class="d-flex justify-content-center align-items-center pb-3 pt-3"> <img class="img-fluid" src="img/cetaheadercutbg.png" alt="logo">  </div> <div class="body-card shadow-lg pr-3 pt-5 pb-5 pl-3" style="border-radius:18px; background-color: #ffffff"> <div> <div class="pb-3"> <h4 class="text-center pb-4" style="color:#1a2353;font-family:MuseoSans-700">DELEGATE REGISTRATION</h4>  <h5 class="pl-3 pr-3"><b>Hear from Global Energy Experts</b></h5> <p class="pl-3 pr-3">The CETA Summit is a unique convergence of Ministers, Policy Makers, Global Leaders, Policy Advocates, and Influencers, all gathering to create actionable insights for the region鈥檚 clean energy future. This is where policy meets private sector action. </p> <p class="pl-3 pr-3"> <b>Our Comprehensive Agenda includes:</b> <ul> <li>Policy and Energy Leadership: Focusing on regional collaboration</li> <li>RE Ramp Up: Strategies for renewable energy expansion</li> <li>The Hydrogen Economy: Exploring the potential and challenges</li> <li>Financing Zero: Innovative financing solutions for a zero-carbon future</li> <li>Carbon: Decarbonisation, offsets, and trading</li> <li>Transition Bridge: Integrating renewable energy with transition fuels</li> <li>CASE Mobility: The future of Clean, Autonomous, Shared, Electric mobility</li> </ul> </p> </div> <form action="registration.php" method="POST"> <div class="form-group"> <div class="d-flex"> <div class="progress-container"> <div class="progress-bar"> <div class="step active">Ticket</div> <div class="step">Details</div> <div class="step">Summary</div> </div> </div> </div> <div id="page-1"> <div class="m-3"> <h5 class="text-center">Delegate Ticket Rates</h5> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr class="text-center"> <th rowspan="2" style="vertical-align: middle"> Type </th> <th colspan="2" style="background: #032f03; color: white">Early Bird Rate </th> </tr> <tr class="text-center"> <th style="vertical-align: middle">Single Booking<br>(per ticket)</th> <th style="vertical-align: middle"> Group Booking - 3 pax and above<br>(per ticket)</th> </tr> </thead> <tr> <td>International Delegate</td> <td class="text-center">USD <br> 999.00</td> <td class="text-center">USD <br> 849.00 </td> </tr> <tr> <td>Local Delegate<span class="text-danger">***</span></td> <td class="text-center">MYR <br> 4,495.00</td> <td class="text-center">MYR <br> 3,821.00 </td> </tr> <thead> <tr class="text-center"> <th rowspan="2" style="vertical-align: middle"> Type </th> <th colspan="2" style="background: #032f03; color: white">Standard Rate</th> </tr> <tr class="text-center"> <th style="vertical-align: middle">Single Booking<br>(per ticket)</th> <th style="vertical-align: middle"> Group Booking - 3 pax and above<br>(per ticket)</th> </tr> </thead> <tr> <td>International Delegate</td> <td class="text-center">USD <br> 1,300.00</td> <td class="text-center">USD <br> 1,105.00 </td> </tr> <tr> <td>Local Delegate<span class="text-danger">***</span></td> <td class="text-center">MYR <br> 5,850.00</td> <td class="text-center">MYR <br> 4,475.00 </td> </tr> </table> </div> <p><b><u>Note:</u></b></p> <p> Early Bird Rate valid until 31st August 2024 <br> Group Booking - 3 Pax and above <br> <span class="text-danger">***</span>HRD Corp Claim Eligibility </p> <p> <b><u>HRD Corp Claimable Courses</u></b> <br> <b>Training Programme No:</b> 10001416072 <br> <b>Course Title:</b> Clean Energy Transition Asia<br><br> For further inquiries, please contact Ms. Bobo Thang at <a href="mailto:bobo@thec0lab.com" style="color:#0000ff;"><u>bobo@thec0lab.com</u></a> </p> <hr> </div> <div class="mt-2"> <label for="first_name">Please select your delegate type:</label><span class="text-danger">*</span> <div> <div class="form-check"> <input class="form-check-input" type="radio" name="type" id="localDelegate" value="Local Delegate" required> <label class="form-check-label" for="localDelegate">Local Delegate</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="type" id="overseaDelegate" value="Oversea Delegate" required> <label class="form-check-label" for="overseaDelegate">International Delegate</label> </div> </div> </div> <div class="mt-2"> <label for="booking_type">Please select your ticket type:</label><span class="text-danger">*</span> <div> <div class="form-check"> <input class="form-check-input" type="radio" name="booking_type" id="individualBooking" value="Individual" required> <label class="form-check-label" for="individualBooking">Individual</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="booking_type" id="groupBooking" value="Group" required> <label class="form-check-label" for="groupBooking">Group Booking</label> </div> </div> </div> <div class="mt-2" id="groupCounter" style="display: none;"> <label for="groupSize">Please select the number of people:</label><span class="text-danger">*</span> <select id="groupSize" name="groupSize"> <option value="1" style="display:none!important;" disabled>1</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="mt-4 d-flex justify-content-end"> <button class="btn btn-next btn-success" type="button" value="next" name="next" id="next-btn">Next</button> </div> </div> <div id="page-2" style="display:none"> <div> <div> <div class="mt-3 hrdf-section"> <label for="hrdf">Are you eligible for HRD Corp Claims?</label><span class="text-danger">*</span> <div> <div class="form-check"> <input class="form-check-input" type="radio" name="custom1" value="HRDF" id="hrdfYes" required> <label class="form-check-label" for="hrdfYes">Yes</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="custom1" id="hrdfNo" value="Non-HRDF" checked required> <label class="form-check-label" for="hrdfNo">No</label> </div> </div> </div> <div class="mt-2"> <label for="salutation">Salutation</label><span class="text-danger">*</span> <select class="form-control" id="salutation" name="salutation" required> <option value="" disabled selected>Please Select Salutation</option> <option value="Mr ">Mr </option><option value="Ms ">Ms </option><option value="Mrs">Mrs</option><option value="Miss ">Miss </option><option value="Dr">Dr</option><option value="Dato / Datuk / Datin">Dato / Datuk / Datin</option><option value="Dato Seri / Datin Seri">Dato Seri / Datin Seri</option><option value="Tan Sri / Puan Sri">Tan Sri / Puan Sri</option> </select> </div> <div class="mt-3"> <label for="first_name">First Name</label><span class="text-danger">*</span> <input class="form-control" type="text" id="first_name" name="first_name" required> </div> <div class="mt-3"> <label for="last_name">Last Name</label><span class="text-danger">*</span> <input class="form-control" type="text" id="last_name" name="last_name" required> </div> <div class="mt-3"> <label for="phone">Phone Number</label><span class="text-danger">*</span> <input class="form-control" type="tel" id="phone" name="phone" pattern="[0-9]*" inputmode="numeric" required> <input type="hidden" name="mobile_country_code" id="mobile_country_code"> </div> <div class="mt-3"> <label for="email">Email</label><span class="text-danger">*</span> <input class="form-control" type="email" id="email" name="email" required> <div class="error-message" id="email-error">Please include an "@" in the email address.</div> </div> <div class="mt-3"> <label for="retype_email">Re-type Email</label><span class="text-danger">*</span> <input class="form-control" type="email" id="retype_email" name="retype_email" required> <div class="invalid-feedback" id="retype_email-error">Emails do not match.</div> </div> <div class="mt-3"> <label for="job_title">Position</label><span class="text-danger">*</span> <input class="form-control" type="text" id="job_title" name="job_title" required> </div> <div class="mt-3"> <label for="company">Company</label><span class="text-danger">*</span> <input class="form-control" type="text" id="company" name="company" required> </div> <div class="form-group mt-3"> <label for="country">Country</label><span class="text-danger">*</span> <select class="form-control" id="country" name="country" required> <option value="" disabled selected>Please Select Country</option> <option value="Afghanistan"> Afghanistan </option> <option value="Albania"> Albania </option> <option value="Algeria"> Algeria </option> <option value="American Samoa"> American Samoa </option> <option value="Andorra"> Andorra </option> <option value="Angola"> Angola </option> <option value="Anguilla"> Anguilla </option> <option value="Antarctica"> Antarctica </option> <option value="Antigua and Barbuda"> Antigua and Barbuda </option> <option value="Argentina"> Argentina </option> <option value="Armenia"> Armenia </option> <option value="Aruba"> Aruba </option> <option value="Australia"> Australia </option> <option value="Austria"> Austria </option> <option value="Azerbaijan"> Azerbaijan </option> <option value="Bahamas"> Bahamas </option> <option value="Bahrain"> Bahrain </option> <option value="Bangladesh"> Bangladesh </option> <option value="Barbados"> Barbados </option> <option value="Belarus"> Belarus </option> <option value="Belgium"> Belgium </option> <option value="Belize"> Belize </option> <option value="Benin"> Benin </option> <option value="Bermuda"> Bermuda </option> <option value="Bhutan"> Bhutan </option> <option value="Bolivia"> Bolivia </option> <option value="Bosnia and Herzegovina"> Bosnia and Herzegovina </option> <option value="Botswana"> Botswana </option> <option value="Bouvet Island"> Bouvet Island </option> <option value="Brazil"> Brazil </option> <option value="British Indian Ocean Territory"> British Indian Ocean Territory </option> <option value="Brunei Darussalam"> Brunei Darussalam </option> <option value="Bulgaria"> Bulgaria </option> <option value="Burkina Faso"> Burkina Faso </option> <option value="Burundi"> Burundi </option> <option value="Cambodia"> Cambodia </option> <option value="Cameroon"> Cameroon </option> <option value="Canada"> Canada </option> <option value="Cape Verde"> Cape Verde </option> <option value="Cayman Islands"> Cayman Islands </option> <option value="Central African Republic"> Central African Republic </option> <option value="Chad"> Chad </option> <option value="Chile"> Chile </option> <option value="China"> China </option> <option value="Christmas Island"> Christmas Island </option> <option value="Cocos (Keeling) Islands"> Cocos (Keeling) Islands </option> <option value="Colombia"> Colombia </option> <option value="Comoros"> Comoros </option> <option value="Congo"> Congo </option> <option value="Congo, the Democratic Republic of the"> Congo, the Democratic Republic of the </option> <option value="Cook Islands"> Cook Islands </option> <option value="Costa Rica"> Costa Rica </option> <option value="Cote D'Ivoire"> Cote D'Ivoire </option> <option value="Croatia"> Croatia </option> <option value="Cuba"> Cuba </option> <option value="Cyprus"> Cyprus </option> <option value="Czech Republic"> Czech Republic </option> <option value="Denmark"> Denmark </option> <option value="Djibouti"> Djibouti </option> <option value="Dominica"> Dominica </option> <option value="Dominican Republic"> Dominican Republic </option> <option value="Ecuador"> Ecuador </option> <option value="Egypt"> Egypt </option> <option value="El Salvador"> El Salvador </option> <option value="Equatorial Guinea"> Equatorial Guinea </option> <option value="Eritrea"> Eritrea </option> <option value="Estonia"> Estonia </option> <option value="Ethiopia"> Ethiopia </option> <option value="Falkland Islands (Malvinas)"> Falkland Islands (Malvinas) </option> <option value="Faroe Islands"> Faroe Islands </option> <option value="Fiji"> Fiji </option> <option value="Finland"> Finland </option> <option value="France"> France </option> <option value="French Guiana"> French Guiana </option> <option value="French Polynesia"> French Polynesia </option> <option value="French Southern Territories"> French Southern Territories </option> <option value="Gabon"> Gabon </option> <option value="Gambia"> Gambia </option> <option value="Georgia"> Georgia </option> <option value="Germany"> Germany </option> <option value="Ghana"> Ghana </option> <option value="Gibraltar"> Gibraltar </option> <option value="Greece"> Greece </option> <option value="Greenland"> Greenland </option> <option value="Grenada"> Grenada </option> <option value="Guadeloupe"> Guadeloupe </option> <option value="Guam"> Guam </option> <option value="Guatemala"> Guatemala </option> <option value="Guinea"> Guinea </option> <option value="Guinea-Bissau"> Guinea-Bissau </option> <option value="Guyana"> Guyana </option> <option value="Haiti"> Haiti </option> <option value="Heard Island and Mcdonald Islands"> Heard Island and Mcdonald Islands </option> <option value="Holy See (Vatican City State)"> Holy See (Vatican City State) </option> <option value="Honduras"> Honduras </option> <option value="Hong Kong"> Hong Kong </option> <option value="Hungary"> Hungary </option> <option value="Iceland"> Iceland </option> <option value="India"> India </option> <option value="Indonesia"> Indonesia </option> <option value="Iran, Islamic Republic of"> Iran, Islamic Republic of </option> <option value="Iraq"> Iraq </option> <option value="Ireland"> Ireland </option> <option value="Israel"> Israel </option> <option value="Italy"> Italy </option> <option value="Jamaica"> Jamaica </option> <option value="Japan"> Japan </option> <option value="Jordan"> Jordan </option> <option value="Kazakhstan"> Kazakhstan </option> <option value="Kenya"> Kenya </option> <option value="Kiribati"> Kiribati </option> <option value="Korea, Democratic People's Republic of"> Korea, Democratic People's Republic of </option> <option value="Korea, Republic of"> Korea, Republic of </option> <option value="Kuwait"> Kuwait </option> <option value="Kyrgyzstan"> Kyrgyzstan </option> <option value="Lao People's Democratic Republic"> Lao People's Democratic Republic </option> <option value="Latvia"> Latvia </option> <option value="Lebanon"> Lebanon </option> <option value="Lesotho"> Lesotho </option> <option value="Liberia"> Liberia </option> <option value="Libyan Arab Jamahiriya"> Libyan Arab Jamahiriya </option> <option value="Liechtenstein"> Liechtenstein </option> <option value="Lithuania"> Lithuania </option> <option value="Luxembourg"> Luxembourg </option> <option value="Macao"> Macao </option> <option value="Macedonia, the Former Yugoslav Republic of"> Macedonia, the Former Yugoslav Republic of </option> <option value="Madagascar"> Madagascar </option> <option value="Malawi"> Malawi </option> <option value="Malaysia"> Malaysia </option> <option value="Maldives"> Maldives </option> <option value="Mali"> Mali </option> <option value="Malta"> Malta </option> <option value="Marshall Islands"> Marshall Islands </option> <option value="Martinique"> Martinique </option> <option value="Mauritania"> Mauritania </option> <option value="Mauritius"> Mauritius </option> <option value="Mayotte"> Mayotte </option> <option value="Mexico"> Mexico </option> <option value="Micronesia, Federated States of"> Micronesia, Federated States of </option> <option value="Moldova, Republic of"> Moldova, Republic of </option> <option value="Monaco"> Monaco </option> <option value="Mongolia"> Mongolia </option> <option value="Montserrat"> Montserrat </option> <option value="Morocco"> Morocco </option> <option value="Mozambique"> Mozambique </option> <option value="Myanmar"> Myanmar </option> <option value="Namibia"> Namibia </option> <option value="Nauru"> Nauru </option> <option value="Nepal"> Nepal </option> <option value="Netherlands"> Netherlands </option> <option value="Netherlands Antilles"> Netherlands Antilles </option> <option value="New Caledonia"> New Caledonia </option> <option value="New Zealand"> New Zealand </option> <option value="Nicaragua"> Nicaragua </option> <option value="Niger"> Niger </option> <option value="Nigeria"> Nigeria </option> <option value="Niue"> Niue </option> <option value="Norfolk Island"> Norfolk Island </option> <option value="Northern Mariana Islands"> Northern Mariana Islands </option> <option value="Norway"> Norway </option> <option value="Oman"> Oman </option> <option value="Pakistan"> Pakistan </option> <option value="Palau"> Palau </option> <option value="Palestinian Territory, Occupied"> Palestinian Territory, Occupied </option> <option value="Panama"> Panama </option> <option value="Papua New Guinea"> Papua New Guinea </option> <option value="Paraguay"> Paraguay </option> <option value="Peru"> Peru </option> <option value="Philippines"> Philippines </option> <option value="Pitcairn"> Pitcairn </option> <option value="Poland"> Poland </option> <option value="Portugal"> Portugal </option> <option value="Puerto Rico"> Puerto Rico </option> <option value="Qatar"> Qatar </option> <option value="Reunion"> Reunion </option> <option value="Romania"> Romania </option> <option value="Russian Federation"> Russian Federation </option> <option value="Rwanda"> Rwanda </option> <option value="Saint Helena"> Saint Helena </option> <option value="Saint Kitts and Nevis"> Saint Kitts and Nevis </option> <option value="Saint Lucia"> Saint Lucia </option> <option value="Saint Pierre and Miquelon"> Saint Pierre and Miquelon </option> <option value="Saint Vincent and the Grenadines"> Saint Vincent and the Grenadines </option> <option value="Samoa"> Samoa </option> <option value="San Marino"> San Marino </option> <option value="Sao Tome and Principe"> Sao Tome and Principe </option> <option value="Saudi Arabia"> Saudi Arabia </option> <option value="Senegal"> Senegal </option> <option value="Serbia and Montenegro"> Serbia and Montenegro </option> <option value="Seychelles"> Seychelles </option> <option value="Sierra Leone"> Sierra Leone </option> <option value="Singapore"> Singapore </option> <option value="Slovakia"> Slovakia </option> <option value="Slovenia"> Slovenia </option> <option value="Solomon Islands"> Solomon Islands </option> <option value="Somalia"> Somalia </option> <option value="South Africa"> South Africa </option> <option value="South Georgia and the South Sandwich Islands"> South Georgia and the South Sandwich Islands </option> <option value="Spain"> Spain </option> <option value="Sri Lanka"> Sri Lanka </option> <option value="Sudan"> Sudan </option> <option value="Suriname"> Suriname </option> <option value="Svalbard and Jan Mayen"> Svalbard and Jan Mayen </option> <option value="Swaziland"> Swaziland </option> <option value="Sweden"> Sweden </option> <option value="Switzerland"> Switzerland </option> <option value="Syrian Arab Republic"> Syrian Arab Republic </option> <option value="Taiwan, Province of China"> Taiwan, Province of China </option> <option value="Tajikistan"> Tajikistan </option> <option value="Tanzania, United Republic of"> Tanzania, United Republic of </option> <option value="Thailand"> Thailand </option> <option value="Timor-Leste"> Timor-Leste </option> <option value="Togo"> Togo </option> <option value="Tokelau"> Tokelau </option> <option value="Tonga"> Tonga </option> <option value="Trinidad and Tobago"> Trinidad and Tobago </option> <option value="Tunisia"> Tunisia </option> <option value="Turkey"> Turkey </option> <option value="Turkmenistan"> Turkmenistan </option> <option value="Turks and Caicos Islands"> Turks and Caicos Islands </option> <option value="Tuvalu"> Tuvalu </option> <option value="Uganda"> Uganda </option> <option value="Ukraine"> Ukraine </option> <option value="United Arab Emirates"> United Arab Emirates </option> <option value="United Kingdom"> United Kingdom </option> <option value="United States"> United States </option> <option value="United States Minor Outlying Islands"> United States Minor Outlying Islands </option> <option value="Uruguay"> Uruguay </option> <option value="Uzbekistan"> Uzbekistan </option> <option value="Vanuatu"> Vanuatu </option> <option value="Venezuela"> Venezuela </option> <option value="Viet Nam"> Viet Nam </option> <option value="Virgin Islands, British"> Virgin Islands, British </option> <option value="Virgin Islands, U.s."> Virgin Islands, U.s. </option> <option value="Wallis and Futuna"> Wallis and Futuna </option> <option value="Western Sahara"> Western Sahara </option> <option value="Yemen"> Yemen </option> <option value="Zambia"> Zambia </option> <option value="Zimbabwe"> Zimbabwe </option> </select> </div>  <div id="delegateForms"></div>  <div class="form-group mt-5"> <div> <div class=" form-check ml-2 mt-2"> <input class="form-check form-check-input" type="checkbox" name="tnc" id="tnc" value="Yes"> <label class="form-check-label font-weight-normal" for="tnc"> I acknowledge that I have read and agree the <a href="https://ceta.asia/delegate-terms-and-conditions/" target="_blank" style="color:#00ff;text-decoration:underline">Terms and Conditions</a> </label> </div> <div class=" form-check ml-2 mt-2"> <input class="form-check form-check-input" type="checkbox" name="privacy" id="privacy" value="Yes"> <label class="form-check-label font-weight-normal" for="privacy"> I acknowledge that I have read and agree the <a href="https://ceta.asia/privacy-policy/" target="_blank" style="color:#00ff;text-decoration:underline">Privacy Policy</a> </label> </div> </div> </div> <div class="d-flex justify-content-between"> <button class="btn btn-back btn-secondary" type="button" id="back">Back</button> <button class="btn btn-success" type="button" name="next-2" id="next-2-btn" disabled>Next</button> </div> </div> </div> </div> </div> <div id="page-3" style="display:none"> <h4 class="text-center m-4">Summary Page</h4> <div class="card m-3"> <div class="card-body"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Type</th> <th>Fee</th> <th class="text-center">Quantity</th> <th class="text-center">Total</th> </tr> </thead> <tr> <td id="summary_type"></td> <td id="summary_fee"></td> <td class="text-center" id="summary_quantity"></td> <td class="text-center" id="summary_total"></td> </tr>  <tr> <td colspan="3" style="font-weight: bold;">Total</td> <td class="text-center" class="text-center" id="summary_grandtotal" style="font-weight: bold;"></td> </tr> </table> <p style="font-style: italic;" id="hrdftext">*HRD Corp claimable up to MYR 3,900 per person (subject to approval).</p> </div> </div> </div> <div class="d-flex justify-content-between"> <input type="hidden" name="price_currency" id="price_currency"> <input type="hidden" name="price_total" id="price_total"> <button class="btn btn-back btn-secondary" type="button" id="back-2">Back</button> <button class="btn btn-success" type="submit" value="submit" name="submit">Register</button> </div> </div> </form> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>  <script> $(document).ready(function() { /** DECLARATION ALL INSIDE THIS BLOCK **/ // Initialize current step var currentStep = 1; var totalSteps = 3; // Update this if you add more steps var mobile = document.querySelector("#phone"); var mobileCountryCodeInput = document.querySelector("#mobile_country_code"); var selectedFlagElement = document.querySelector('.iti__selected-flag'); let groupSizeSelect = document.getElementById('groupSize'); const delegateFormsContainer = document.getElementById('delegateForms'); const bookingTypeRadios = document.getElementsByName('booking_type'); // Define a common configuration object for both inputs const commonConfig = { initialCountry: "auto", separateDialCode: true, geoIpLookup: callback => { fetch("https://ipapi.co/json") .then(res => res.json()) .then(data => callback(data.country_code)) .catch(() => callback("us")); }, utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js", placeholderNumberType: "MOBILE", // customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) { // return removeCountryCodeAndFormat(selectedCountryPlaceholder, selectedCountryData.iso2.toUpperCase()); // }, }; const mobileIti = window.intlTelInput(mobile, commonConfig); /** FUNCTIONS ALL BELOW **/ function validateBeforeNext(currentPage) { let isValid = true; let invalidInput = null; $('#page-' + currentPage + ' input[required], #page-' + currentPage + ' select[required]').each( function() { // console.log("Page " + currentPage + " Checking " + $(this).attr('name')); if ($(this).is('input[type="radio"], input[type="checkbox"]')) { var name = $(this).attr('name'); if (!$('input[name="' + name + '"]:checked').length) { isValid = false; return false; } } else if ($(this).is('input[id="retype_email"]')) { var email = $('#email').val(); var retype_email = $('#retype_email').val(); if (email != retype_email) { isValid = false; invalidInput = $(this); return false; } } else { if (!$(this).val()) { isValid = false; invalidInput = $(this); return false; } } }); if (isValid) { // Hide current step $('#page-' + currentStep).hide(); // Increment current step currentStep++; // Show next step $('#page-' + currentStep).show(); // Update progress bar updateProgressBar(currentStep); return true; } else { Swal.fire({ text: "Please fill all the required fields with valid information.", icon: "warning", confirmButtonColor: "#0f7354", }).then(() => { if (invalidInput != null) { invalidInput.addClass('is-invalid'); invalidInput.on('click', () => { invalidInput.removeClass('is-invalid'); }); $([document.documentElement, document.body]).animate({ scrollTop: invalidInput.offset().top }, 1000); } }); return false; } } function formatCurrency(value) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function updateSummaryPage() { let type = ''; let fee = ''; let total = ''; let grandtotal = ''; let currency = ''; let grandtotal_raw = ''; let groupSize = parseInt(document.getElementById('groupSize').value); let groupSizeText = document.getElementById('groupSize'); // Check the selected booking type const bookingType = document.querySelector('input[name="booking_type"]:checked'); // If 'Individual' is selected, set groupSize to 1 if (bookingType && bookingType.value === 'Individual') { groupSizeText.value = '1'; console.log("its 1 now"); } else if (bookingType && bookingType.value === 'Group') { if (!(groupSize >= 3 && groupSize <= 10)) { groupSizeText.value = '3'; // Select option 3 } } // Default groupSize to 1 if it is null, NaN or empty // if (isNaN(groupSize) || groupSize <= 0) { // groupSize = 1; // } // Log groupSize for debugging console.log('Group Size:', groupSize); if ($('#localDelegate').is(':checked')) { type = 'Local Delegate'; currency = 'MYR'; if ($('#hrdfYes').is(':checked')) { let normalRate = 5850; //let hrdfRate = 3900; if (groupSize > 1) { normalRate = 4475; //hrdfRate = 3900; } // Calculate the difference //let difference = normalRate - hrdfRate; // Calculate fees and totals let feeValue = normalRate; fee = currency + ' ' + formatCurrency(normalRate.toFixed(2)); total = currency + ' ' + formatCurrency((normalRate * groupSize).toFixed(2)); //hrdf = '-' + currency + ' ' + hrdfRate.toFixed(2); //hrdfTotal = '-' + currency + ' ' + (hrdfRate * groupSize).toFixed(2); grandtotal = currency + ' ' + formatCurrency((feeValue * groupSize).toFixed(2)); grandtotal_raw = formatCurrency((feeValue * groupSize).toFixed(2)); $('#hrdftext').show(); //$('#summary_hrdf_type').text('HRD Corp Claim'); //$('#summary_hrdf_fee').text(hrdf); //$('#summary_hrdf_quantity').text(groupSize); //$('#summary_hrdf_total').text(hrdfTotal); } else { $('#summary_hrdf').hide(); $('#hrdftext').hide(); let feeValue = 5850; if (groupSize > 1) { feeValue = 4475; } fee = currency + ' ' + formatCurrency(feeValue.toFixed(2)); total = currency + ' ' + formatCurrency((feeValue * groupSize).toFixed(2)); grandtotal = currency + ' ' + formatCurrency((feeValue * groupSize).toFixed(2)); grandtotal_raw = formatCurrency((feeValue * groupSize).toFixed(2)); } } else { $('#summary_hrdf').hide(); $('#hrdftext').hide(); type = 'International Delegate'; currency = 'USD'; let feeValue = 1300; if (groupSize > 1) { feeValue = 1105; } fee = currency + ' ' + formatCurrency(feeValue.toFixed(2)); total = currency + ' ' + formatCurrency((feeValue * groupSize).toFixed(2)); grandtotal = currency + ' ' + formatCurrency((feeValue * groupSize).toFixed(2)); grandtotal_raw = formatCurrency((feeValue * groupSize).toFixed(2)); } $('#summary_type').text(type); $('#summary_fee').text(fee); $('#summary_quantity').text(groupSize); $('#summary_total').text(total); $('#summary_grandtotal').text(grandtotal); $('#price_currency').val(currency); $('#price_total').val(grandtotal_raw); } // Function to validate email format function isValidEmail(email) { // Regular expression to check if email contains '@' var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } // Function to update progress bar function updateProgressBar(step) { // Remove 'active' class from all steps $('.step').removeClass('active'); // Add 'active' class to current step $('.step:nth-child(' + step + ')').addClass('active'); updateSummaryPage(); } function removeCountryCodeAndFormat(placeholder, countryCode) { const countryCodeRegex = /^\+\d+\s/; let cleanedPlaceholder = placeholder.replace(countryCodeRegex, ''); // Remove leading 0 for Malaysia phone numbers if (countryCode === 'MY') { cleanedPlaceholder = cleanedPlaceholder.replace(/^0/, ''); } return cleanedPlaceholder.replace(/[\-\s]/g, ''); } function handleInputEvent(inputElement, itiInstance) { const inputValue = inputElement.value; if (inputValue === '') { const countryData = itiInstance.getSelectedCountryData(); inputElement.placeholder = removeCountryCodeAndFormat(inputElement.placeholder, countryData.iso2 .toUpperCase()); } } function limitInputLength(inputElement, itiInstance) { const countryData = itiInstance.getSelectedCountryData(); if (countryData.iso2.toUpperCase() === 'MY' && inputElement.value.length > 10) { inputElement.value = inputElement.value.slice(0, 10); } } function generateDelegateForms() { const groupSize = parseInt(groupSizeSelect.value); delegateFormsContainer.innerHTML = ''; for (let i = 1; i < groupSize; i++) { // Start from 1 to skip the main delegate form const suffix = i; delegateFormsContainer.insertAdjacentHTML('beforeend', ` <hr> <div class='delegate-form mt-3'> <h5><u>Delegate ${i + 1}</u></h5> <div class="mt-2"> <label for="salutation_${suffix}">Salutation</label><span class="text-danger">*</span> <select class="form-control" id="salutation_${suffix}" name="salutation_${suffix}" required> <option value="" disabled selected>Please Select Salutation</option> <option value="Mr ">Mr </option><option value="Ms ">Ms </option><option value="Mrs">Mrs</option><option value="Miss ">Miss </option><option value="Dr">Dr</option><option value="Dato / Datuk / Datin">Dato / Datuk / Datin</option><option value="Dato Seri / Datin Seri">Dato Seri / Datin Seri</option><option value="Tan Sri / Puan Sri">Tan Sri / Puan Sri</option> </select> </div> <div class='mt-3'> <label for='first_name_${suffix}'>First Name</label><span class='text-danger'>*</span> <input class='form-control' type='text' id='first_name_${suffix}' name='first_name_${suffix}' required> </div> <div class='mt-3'> <label for='last_name_${suffix}'>Last Name</label><span class='text-danger'>*</span> <input class='form-control' type='text' id='last_name_${suffix}' name='last_name_${suffix}' required> </div> <div class='mt-3'> <label for='phone_${suffix}'>Phone Number</label><span class='text-danger'>*</span> <input class='form-control' type='tel' id='phone_${suffix}' name='phone_${suffix}' pattern='[0-9]*' inputmode='numeric' required> <input type='hidden' name='mobile_country_code_${suffix}' id='mobile_country_code_${suffix}'> </div> <div class='mt-3'> <label for='email_${suffix}'>Email</label><span class='text-danger'>*</span> <input class='form-control' type='email' id='email_${suffix}' name='email_${suffix}' required> </div> </div> `); // Initialize intlTelInput for the current phone input after it's added to the DOM const phoneInput = document.getElementById(`phone_${suffix}`); if (phoneInput) { const iti = window.intlTelInput(phoneInput, commonConfig); updatePhoneInput(phoneInput, iti, suffix); phoneInput.addEventListener('countrychange', function() { updatePhoneInput(phoneInput, iti, suffix); countryCodeElement.value = countryData.dialCode; console.log(`Country code for phone_${suffix} set to: ${countryData.dialCode}`); }); phoneInput.addEventListener('input', function() { handleInputEvent(phoneInput, iti); }); phoneInput.addEventListener('input', function(event) { this.value = this.value.replace(/[^0-9]/g, ''); }); console.log(`Initialized intlTelInput for phone_${suffix}`); } else { console.error(`Failed to initialize intlTelInput for phone_${suffix}`); } attachEmailInputListeners(); // Attach email listeners after generating forms mobileValidation(); } } function updatePhoneInput(phoneInput, iti, suffix) { const countryData = iti.getSelectedCountryData(); const countryCodeElement = document.getElementById(`mobile_country_code_${suffix}`); phoneInput.placeholder = removeCountryCodeAndFormat(phoneInput.placeholder, countryData.iso2 .toUpperCase()); if (countryCodeElement) { countryCodeElement.value = countryData.dialCode; console.log(`Country code for phone_${suffix} set to: ${countryData.dialCode}`); } else { console.log(`Country code element not found`); } } function checkForDuplicateEmails() { const emailInputs = document.querySelectorAll('input[id^="email_"], input[id="email"]'); const emailValues = Array.from(emailInputs).map(input => input.value); const duplicates = emailValues.filter((email, index, self) => self.indexOf(email) !== index && email !== ""); let hasDuplicates = false; emailInputs.forEach(input => { const email = input.value; // Check for duplicate emails if (duplicates.includes(email)) { input.classList.add('duplicate-email'); if (!input.nextElementSibling || !input.nextElementSibling.classList.contains('duplicate-email-popup')) { const popup = document.createElement('span'); popup.className = 'duplicate-email-popup'; popup.textContent = 'This email is a duplicate!'; input.parentNode.insertBefore(popup, input.nextSibling); } hasDuplicates = true; } else { input.classList.remove('duplicate-email'); if (input.nextElementSibling && input.nextElementSibling.classList.contains('duplicate-email-popup')) { input.nextElementSibling.remove(); } } // Check for invalid email format if (!isValidEmail(email) && email !== "") { input.classList.add('invalid-email'); if (!input.nextElementSibling || !input.nextElementSibling.classList.contains('invalid-email-popup')) { const popup = document.createElement('span'); popup.className = 'invalid-email-popup'; popup.textContent = 'Invalid email format!'; input.parentNode.insertBefore(popup, input.nextSibling); } } else { input.classList.remove('invalid-email'); if (input.nextElementSibling && input.nextElementSibling.classList.contains('invalid-email-popup')) { input.nextElementSibling.remove(); } } }); return !hasDuplicates; } function mobileValidation() { const mobileInputs = document.querySelectorAll('input[id^="phone_"]'); mobileInputs.forEach(mobileadded => { const id = mobileadded.id.match(/\d+/); // Extract the number from the id const countryCodeElement = document.getElementById(`mobile_country_code_${id}`); console.log("mobile:" + mobileadded + " value:" + mobileadded.value); // Ensure only numeric input and limit digits for Malaysian numbers mobileadded.addEventListener('input', function(event) { mobileadded.value = mobileadded.value.replace(/[^0-9]/g, ''); limitInputLength(mobileadded, mobileIti); }); }); } // Attach input event listeners to email fields for real-time duplicate checking function attachEmailInputListeners() { const emailInputs = document.querySelectorAll('input[id^="email_"], input[id="email"]'); emailInputs.forEach(input => { input.addEventListener('input', checkForDuplicateEmails); }); } // Function to handle "Next" button $('#next-btn').click(function() { $('html, body').animate({ scrollTop: $('.progress-container').offset().top }, 1000); handleBookingTypeChange() if (validateBeforeNext(currentStep)) { if ($('#localDelegate').is(':checked')) { $('.hrdf-section').show(); $('#country').val('Malaysia'); } else if ($('#overseaDelegate').is(':checked')) { $('.hrdf-section').hide(); $('#country').val(''); } } $('#tnc').prop('checked', false); $('#privacy').prop('checked', false); $('#next-2-btn').prop('disabled', true); }); // Function to handle "Back" button on page 2 $('#back').click(function() { $('#page-' + currentStep).hide(); currentStep--; $('#page-' + currentStep).show(); updateProgressBar(currentStep); if ($('#localDelegate').is(':checked')) { $('.hrdf-section').show(); $('#country').val('Malaysia'); } else if ($('#localDelegate').is(':checked')) { $('.hrdf-section').hide(); $('#country').val(''); } }); $('#next-2-btn').prop('disabled', true); // Enable/disable the "Next" button based on the checkbox state $('#tnc').change(function() { if ($(this).is(':checked') && $('#privacy').is(':checked')) { $('#next-2-btn').prop('disabled', false); } else { $('#next-2-btn').prop('disabled', true); } }); // Enable/disable the "Next" button based on the checkbox state $('#privacy').change(function() { if ($(this).is(':checked') && $('#tnc').is(':checked')) { $('#next-2-btn').prop('disabled', false); } else { $('#next-2-btn').prop('disabled', true); } }); // Function to handle "Next" button on page 2 $('#next-2-btn').click(function() { // Check for duplicate emails before proceeding if (!checkForDuplicateEmails()) { return; // Stop if duplicates are found } // Show SweetAlert with reCAPTCHA Swal.fire({ title: 'Please complete the CAPTCHA', html: '<div id="captcha_time" style="display: flex; justify-content: center; padding-bottom: 10px;"></div><button id="verify-captcha-btn">Verify</button>', didOpen: () => { grecaptcha.enterprise.render('captcha_time', { 'sitekey': '6LdemR8qAAAAAG82W0aGflUL5pTqMAWYys_pQ4ZK', }); }, showConfirmButton: false, // Hide the confirm button until CAPTCHA is completed }); // Handle the verify button click $(document).one('click', '#verify-captcha-btn', function() { var response = grecaptcha.enterprise.getResponse(); if (response.length === 0) { Swal.fire('Please complete the CAPTCHA'); return; } // AJAX call to verify the reCAPTCHA response $.ajax({ url: 'verify-captcha.php', // Your backend endpoint to verify the CAPTCHA method: 'POST', data: { token: response }, success: function(response) { let res = JSON.parse(response); // console.log(res); if (res.success) { if (validateBeforeNext(currentStep)) { let emails = []; emails.push($('#email').val()); if (parseInt(groupSizeSelect.value) > 1) { for (let i = 1; i < parseInt(groupSizeSelect.value); i++) { emails.push($('#email_' + i).val()); } } $.ajax({ url: 'emailchecker.php', type: 'POST', data: { emails: emails, }, success: function(res) { let response = JSON.parse(res); if (response.status == 'error') { if (response.emails != undefined) { Swal.fire({ title: response.message, text: response.emails.toString(), icon: "error" }); } else { Swal.fire({ title: "Invalid Email", text: response.message, icon: "error" }); } // Hide current step $('#page-' + currentStep).hide(); // Decrement current step currentStep--; // Show previous step $('#page-' + currentStep).show(); // Update progress bar updateProgressBar(currentStep); } }, error: function(xhr, status, error) { console.error('Error:', status, error); } }); } Swal.close(); // Close the SweetAlert } else { Swal.fire('CAPTCHA verification failed, please try again.'); } }, error: function() { Swal.fire('CAPTCHA verification failed, please try again.'); } }); }); }); // Function to handle "Back" button on page 3 $('#back-2').click(function() { // Hide current step $('#page-' + currentStep).hide(); // Decrement current step currentStep--; // Show previous step $('#page-' + currentStep).show(); // Update progress bar updateProgressBar(currentStep); }); // Handle delegate type change $('input[name="type"]').change(function() { if ($('#localDelegate').is(':checked')) { $('.hrdf-section').show(); } else { $('.hrdf-section').hide(); $('#hrdfNo').prop("checked", true).trigger("click"); } }); // Initially hide the HRDF section $('.hrdf-section').hide(); // Initial update of progress bar updateProgressBar(currentStep); // Add input event handler to re-type email input $('#retype_email').on('input', function() { var originalEmail = $('#email').val().trim(); var retypeEmail = $(this).val().trim(); // Validate both emails var isOriginalEmailValid = isValidEmail(originalEmail); var isRetypeEmailValid = isValidEmail(retypeEmail); if (!isOriginalEmailValid) { $('#email-error').show(); } else { $('#email-error').hide(); } if (!isRetypeEmailValid || originalEmail !== retypeEmail) { // If re-typed email is invalid or does not match, add error styling and show error message $('#retype_email').removeClass('is-valid').addClass('is-invalid'); $('#retype_email-error').show(); } else { // Re-typed email is valid and matches, remove any previous error styling and hide error message $('#retype_email').removeClass('is-invalid').addClass('is-valid'); $('#retype_email-error').hide(); } }); // Add input event handler to original email input $('#email').on('input', function() { var originalEmail = $(this).val().trim(); // Validate original email var isOriginalEmailValid = isValidEmail(originalEmail); if (!isOriginalEmailValid) { // If original email is invalid, add error styling and show error message $('#email').removeClass('is-valid').addClass('is-invalid'); $('#email-error').show(); } else { // Original email is valid, remove any error styling and hide error message $('#email').removeClass('is-invalid').addClass('is-valid'); $('#email-error').hide(); } // Trigger input event on retype_email to revalidate both emails $('#retype_email').trigger('input'); }); // Add this event listener for the mobile input mobile.addEventListener('countrychange', function() { var mobileCountryData = mobileIti.getSelectedCountryData(); var mobileCountryCode = mobileCountryData.dialCode; mobileCountryCodeInput.value = mobileCountryCode; mobile.placeholder = removeCountryCodeAndFormat(mobile.placeholder, mobileCountryData.iso2 .toUpperCase()); }); // Add input event listeners for the mobile input mobile.addEventListener('input', function() { handleInputEvent(mobile, mobileIti); }); // Ensure only numeric input and limit digits for Malaysian numbers mobile.addEventListener('input', function(event) { this.value = this.value.replace(/[^0-9]/g, ''); limitInputLength(this, mobileIti); }); bookingTypeRadios.forEach(radio => { radio.addEventListener('change', function() { if (radio.value === 'Group') { document.getElementById('groupCounter').style.display = 'block'; document.getElementById('groupCounter').value = 3; // Set the value to 3 generateDelegateForms(); } else { document.getElementById('groupCounter').style.display = 'none'; delegateFormsContainer.innerHTML = ''; } }); }); document.getElementById('groupBooking').addEventListener('change', handleBookingTypeChange); document.getElementById('individualBooking').addEventListener('change', handleBookingTypeChange); // Generate delegate forms when group size changes groupSizeSelect.addEventListener('change', generateDelegateForms); function handleBookingTypeChange() { const groupBooking = document.getElementById('groupBooking'); const groupCounter = document.getElementById('groupCounter'); const groupSizeSelect = document.getElementById('groupSize'); if (groupBooking.checked) { groupCounter.style.display = 'block'; if (!(parseInt(groupSizeSelect.value) >= 3 && (parseInt(groupSizeSelect.value) <= 10))) { // Set the value to '3' and make sure the correct option is selected for (let i = 0; i < groupSizeSelect.options.length; i++) { if (groupSizeSelect.options[i].value === '3') { groupSizeSelect.options[i].selected = true; break; } } } generateDelegateForms(); } else { groupCounter.style.display = 'none'; } } //THE END }); </script> </body> </html>

CINXE.COM

CETA - Clean Energy Transition Asia Registration