<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#arrival" ).datepicker({ minDate: 0,changeMonth: true,
changeYear: true});
  } );
  $( function() {
    $( "#departure" ).datepicker({ minDate: 0 ,changeMonth: true,
changeYear: true});
  } );
  </script>

  <style>
  #ui-datepicker-div a{
    color : #454545 ! important ;
  }
  #registration input {
     width : 90%;
	 margin-bottom : 0px ! important;
  }
   #registration select{
     width : 90%;
	 height :30px;
   }
   #registration label {
    font-weight : 600 ! important;
	margin-bottom : auto;
	font-size: 12px ;
	margin-top : 10px;
   }
   #arrival label {
    font-weight : 600 ! important;
	margin-bottom : auto;
	font-size: 12px ;
   }
   #registration input[type="submit"]{
   background-color :#000 ! important;
   margin-top : 10px;
   margin-bottom : 20px ! important;
   color:#fff;
   border:0;
   height :30px;
   }
   #registration input[type="checkbox"] {
    width: auto;
    display: initial;
    margin-right: 10px;
}#submitBtn {
  background: #000 !important;
  color: #fff;
  border: none;
  padding: 5px 30px;
  margin-bottom: 30px;
}
::placeholder {text-transform: none;
font-size: inherit;
font-weight: normal;
font-size: 12px;
color: #000;
}
   @media (min-device-width:320px) and (max-device-width:768px) {
     #registration input[type="text"],#registration input[type="submit"] {
     width : 100% ! important;
    }
    .col-md-12{padding:0px;}
   }
   #registration {
     width : 100%;
	 float : left;
   }
   #registration h2{
     margin-top:10px ! important;
     float : left;
     margin-left:12px;
   }
   #registration input[type="checkbox"]{
     width:auto;
   }
   #cus_detail input{
   margin-bottom:10px !important;
   }
    #cus_detail input::-webkit-input-placeholder { /* Edge */
  color: #666;
}

 #cus_detail input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #666;
}

 #cus_detail input::placeholder {
  color: #666;
}
#registration select {
   
   font-size: 12px ;
   }
  </style>
  
<div class='container' style='float:left;'><div class='col-md-12'>
       <form name='registration' id='registration' method='post' action="" >
       <input type="hidden" name="submitbt" value="submitbt"/>
       <div class='col-md-12'><h2>Guest registration card</h2></div>
	   <div class='col-md-12'>

	         <div class = 'col-md-4'><label>Arrival date</label><br/>
		    
				<input type="text" id="arrival" name='arrival'>
             </div>
			 <div class = 'col-md-4'><label>Departure date</label><br/>
				     <input type="text" id="departure" name='departure'>  
				</div>
			 <div class='col-md-4'><label>Room type</label><br/>
					   <!--<input type='text' name='room_type'>-->
					   <select name='room_type' id='room_type'>
					      
						  <option value=''>Please select room type</option>
							<option value='Not sure'>Not sure</option>
							<option value='Standard Twin Room'>Standard twin room</option>
							<option value='Superior Side Sea View'>Superior side sea view</option>
							<option value='Standard Sea View'>Standard sea view</option>
							<option value='Executive Bungalow'>Executive bungalow</option>
							<option value='Junior Suite'>Junior suite</option>
							<option value='Grand Suite'>Grand suite</option>
					   </select>
				</div>
	   </div>
	   <div class ='col-md-12'>
         <div class='col-md-6'><input type='checkbox' name='special'><label>Any special celebration during your stay ?</label></div>
		 <div class='col-md-6'></div>
	  </div>
       <div class='col-md-12'>
              <!--<div class='col-md-4'><label>Room No</label><br/>
					   <input type='textbox' name='room_no'>
					 </div>-->
			  <div class='col-md-4'><label>Occasion</label><br/>
			  <input type='text' name='occasion'>
			  </div>
			  <div class='col-md-4'><label>Terms of stay</label><br/>
					   <input type='text' name='terms'>
					 </div>
			 <div class='col-md-4'><label>No of guests</label><br/>

				    <select name='guest' id='guest'>
					<option value=0 selected="selected">Select no guests</option >
										<option value="1">1</option >
					
										<option value="2">2</option >
					
										<option value="3">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>
	   <div class ='col-md-12'>
	      
       <div id='cus_detail'></div>

	   </div>


	   <div class ='col-md-12'>
             <div class='col-md-4'><label>Town</label><br/><input type='text' name='town'></div>
             <div class='col-md-4'><label>State/Province</label><br/><input type='text' name='state'></div>
             <div class='col-md-4'><label>Postal code</label><br/><input type='text' name='postal'></div>
	   </div>

      <div class ='col-md-12'>
           <div class='col-md-4'><label>Country</label><br/><input type='text' name='cnt'></div>
           <div class='col-md-4'><label>Telephone</label><br/><input type='text' name='tel'></div>
           <div class='col-md-4'><label>Email</label><br/><input type='text' name='email'></div>
	  </div>

	  <!--<div class ='col-md-12'>
            
           
            <div class='col-md-4'><label>Occasion</label><input type='text' name='occasion'></div>

	  </div>-->

      

	  <div class ='col-md-12'>
        <div class='col-md-6'><input type='checkbox' name='policy' value='on' id='policy'><label><a href='privacy-policy' target='_blank'>Privacy policy *</a></label></div>
		<div class='col-md-6'></div>
	  </div>

	  <div class ='col-md-12'>
         <div class='col-md-6'><input type='checkbox' name='term_cond' value='on' id='term_cond'><label><a href='terms-and-conditions' target='_blank'>I accept terms & conditions *</a></label></div>
		 <div class='col-md-6'></div>
	  </div>

	  <div class ='col-md-12'>
            <div class='col-md-4'><button 
    id="submitBtn"
    onclick="prevalidateForm(event)">
    Submit
  </button><div class="g-recaptcha"
       data-sitekey="6Lf8-A0rAAAAADyMu_BIzHgk3oaKNVN1jJgWInRM"
       data-callback="onSubmit"
       data-size="invisible">
  </div>
           
            </div>
	  </div>

</form>
</div></div>

<script>
 
</script>



<script>
$(function() {
$("#guest").val(0);
$("#guest").on("change",function() {
   var guest = this.value;
   var detail= ''
   var i ;
   for (i = 1; i <=guest; i++) {
         detail+= '<div class="col-md-4">';
		 detail+= '<label>Guest ' + i + '</label>';
		 detail+= '<input type="text" name= "surname'+i+'" placeholder=" Surname ">';
		 detail+= '<input type="text" name= "name'+i+'" placeholder=" Name ">';
		 detail+= '<input type="text" name= "passport'+i+'" placeholder=" Passport ">';
		 detail+= '<input type="text" name= "dob'+i+'" id= "dob'+i+'" placeholder=" Date of birth " readonly>';
		 detail+= '<input type="text" name= "address'+i+'" placeholder=" Address ">';
		 detail+= '<input type="text" name= "nationality'+i+'" placeholder=" Nationality ">';
		 detail+= '</div>';
		
          
       }
         $( "#cus_detail ").html(detail);
		 for (i = 1; i <=guest; i++) {
		  //$( "#dob"+i ).datepicker();
		    $( "#dob"+i ).datepicker({
				  changeMonth: true,
				  changeYear: true,
				  yearRange: "c-100:c+10"
				});
		 }
}); 
});
function prevalidateForm(e) {console.log("hello");
    e.preventDefault(); // Stop normal form submission
    var arrival = $("input[name=arrival]").val();
  if(arrival==''){
     alert('Please enter arrival date');
	 return false;
  }
  var departure = $("input[name=departure]").val();
  if(departure==''){
     alert('Please enter departure date');
	 return false;
  }
   var room_type = $("select[name=room_type]").val();
  if(room_type==''){
     alert('Please select room type');
	 return false;
  }
  /* var room_type = $("input[name=room_type]").val();
  if(room_type==''){
     alert('Please enter room type');
	 return false;
  }

 var room_no = $("input[name=room_no]").val();
  if(room_no==''){
     alert('PLEASE ENTER ROOM NO');
	 return false;
  }*/
 
  var terms = $("input[name=terms]").val();
  if(terms==''){
     alert('Please enter terms of stay');
	 return false;
  }
  var guests = $("select[name=guest]").val();
  if(guests==0){
     alert('Please select no of guests');
	 return false;
  }
   
   var i ;
   for (i = 1; i <=guests; i++) {
   
       if($("input[name=surname"+i+"]").val()==''){
        alert('Please select guest'+i + ' surname');return false;}
	   if($("input[name=name"+i+"]").val()==''){
        alert('Please select guest'+i + ' name');return false;}
	   if($("input[name=passport"+i+"]").val()==''){
        alert('Please select guest'+i + ' passport');return false;}
	   if($("input[name=dob"+i+"]").val()==''){
        alert('Please select guest'+i + ' date of birth');return false;}
	   if($("input[name=address"+i+"]").val()==''){
        alert('Please select guest'+i + ' address');return false;}
	   if($("input[name=nationality"+i+"]").val()==''){
        alert('Please select guest'+i + ' nationality');return false;}

   }
  
  var town = $("input[name=town]").val();
  if(town==''){
     alert('Please enter town');
	 return false;
  }
  var state = $("input[name=state]").val();
  if(state==''){
     alert('Please enter state');
	 return false;
  }
  var postal = $("input[name=postal]").val();
  if(postal==''){
     alert('Please enter postal');
	 return false;
  }

  var cnt = $("input[name=cnt]").val();
  if(cnt==''){
     alert('Please enter country');
	 return false;
  }
  
  var tel = $("input[name=tel]").val();
  if(tel==''){
     alert('Please enter telephone');
	 return false;
  }
  
 var email = $("input[name=email]").val();
  if(email==''){
     alert('Please enter email');
	 return false;
  }

  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(emailReg.test(email)==false) {  
        alert("Please enter valid email id");
		return false;
   }
//$("input[type='checkbox'][name='policy']:checked");
if(!$("#policy").is(":checked")){
    alert('Please check privacy policy');
	return false;
}
if(!$("#term_cond").is(":checked")){
    alert('Please check terms & conditions');
	return false;
}
    
    // Trigger reCAPTCHA after validation
    grecaptcha.execute();
    return false;
    }
  function onSubmit(token) {
    document.getElementById("registration").submit();
  }



</script>
{"id":8710,"date":"2020-06-03T10:47:08","date_gmt":"2020-06-03T10:47:08","guid":{"rendered":"http:\/\/napamermaidhotel.com\/?page_id=8710"},"modified":"2025-03-31T16:32:35","modified_gmt":"2025-03-31T13:02:35","slug":"pre-registration-form","status":"publish","type":"page","link":"https:\/\/napamermaidhotel.com\/ru\/pre-registration-form\/","title":{"rendered":"Pre Registration Form"},"content":{"rendered":"<p class=\"qtranxs-available-languages-message qtranxs-available-languages-message-ru\">\u0418\u0437\u0432\u0438\u043d\u0438\u0442\u0435, \u044d\u0442\u043e\u0442 \u0442\u0435\u0445\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 &ldquo;<a href=\"https:\/\/napamermaidhotel.com\/en\/wp-json\/wp\/v2\/pages\/8710\" class=\"qtranxs-available-language-link qtranxs-available-language-link-en\" title=\"English\">\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 \u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439<\/a>&rdquo;. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.<\/p><p>[vc_row full_width=&#187;stretch_row_content_no_spaces&#187;][vc_column][vc_single_image image=&#187;9168&#8243; el_class=&#187;ctws_himg&#187;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0418\u0437\u0432\u0438\u043d\u0438\u0442\u0435, \u044d\u0442\u043e\u0442 \u0442\u0435\u0445\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 &ldquo;\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 \u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439&rdquo;. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.[vc_row full_width=&#187;stretch_row_content_no_spaces&#187;][vc_column][vc_single_image image=&#187;9168&#8243; el_class=&#187;ctws_himg&#187;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":9168,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/pages\/8710"}],"collection":[{"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/comments?post=8710"}],"version-history":[{"count":20,"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/pages\/8710\/revisions"}],"predecessor-version":[{"id":9389,"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/pages\/8710\/revisions\/9389"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/media\/9168"}],"wp:attachment":[{"href":"https:\/\/napamermaidhotel.com\/ru\/wp-json\/wp\/v2\/media?parent=8710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}