motor test
<head>
<meta charset="utf-8" />
<style>
.ImperadorForm {
font-family: Montserrat,Helvetica,Arial,Lucida,sans-serif!important,
padding-top:0px;
padding-bottom:0px;
padding-right:10px;
padding-left:10px;
text-align:center;
border-radius:20px;
width:100%;
height:90px;
font-size: 13px;
}
.ImperadorForm input, .ImperadorForm select{
padding:10px;
border:solid #333 0px;
border-radius:20px;
margin:0px 5px 0px 5px !important;
width:100%;
}
.ImperadorForm .btn-success {
width:180px;
height:41px;
background-color: #ecb715;
border-radius:0px;
margin-right:0px;
margin-left:0px;
padding-left:0px;
padding-right:0px;
border: solid #333 0px;
color:white;
transition:all .4s ease 0s;
}
.ImperadorForm .btn-success:hover {
background-color: #333;
color:white;
}
.ImperadorForm #CheckIn,
.ImperadorForm #CheckOut,
.ImperadorForm #hotel,
.ImperadorForm #ad,
.ImperadorForm #ch {
width: 200px;
padding-bottom:7.2px;
padding-top:7.2px;
padding-right: 0px;
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.ImperadorForm input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
-moz-appearance: none !important;
-o-appearance: none !important;
appearance: none !important;
}
.ImperadorForm input::inner-spin-button {
-webkit-appearance: none !important;
-moz-appearance: none !important;
-o-appearance: none !important;
appearance: none !important;
}
.ImperadorForm input::-moz-inner-spin-button {
-webkit-appearance: none !important;
-moz-appearance: none !important;
-o-appearance: none !important;
appearance: none !important;
}
.ImperadorForm input::-ms-inner-spin-button {
-webkit-appearance: none !important;
-moz-appearance: none !important;
-o-appearance: none !important;
appearance: none !important;
}
.ImperadorForm #hotel,
.ImperadorForm #CheckIn,
.ImperadorForm #CheckOut,
.ImperadorForm #ad,
.ImperadorForm #ch {
padding: 10px 12px !important;
}
.ImperadorForm select,
.ImperadorForm input {
background-color: rgb(240,240,240);
display: inline-block;
font: inherit;
line-height: 1.5em;
margin: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
.ImperadorForm select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
@media (max-width: 980px) {
.ImperadorForm {margin-top: -48px; }
.ImperadorForm label {
width: 100% !important;
display: block;
}
.ImperadorForm #CheckIn, .ImperadorForm #CheckOut, .ImperadorForm #hotel, .ImperadorForm #ad, .ImperadorForm #ch {
width: 80%;
}
.reserva_enviar {
display: block;
width: 100% !important;
}
.ImperadorForm .d-none-xs {
display: none;
}
}
</style>
<script>
document.getElementById('ch').addEventListener('change', function () {
var seleccion = this.value;
var edadCriancaDiv = document.getElementById('edadCriancaDiv');
if (seleccion >= 2) {
edadCriancaDiv.style.display = 'block';
} else {
edadCriancaDiv.style.display = 'none';
}
});
document.getElementById('guardarEdadCrianca').addEventListener('click', function () {
var edadCrianca = document.getElementById('edadCrianca').value;
document.getElementById('ag').value = edadCrianca;
// Aquí puedes realizar otras acciones si es necesario
// Por ejemplo, cerrar la ventana emergente o validar la entrada
});
</script>
</head>
<body>
<div class="ImperadorForm">
<form id="form-faca-sua-reserva" action="https://moradadoguaruca.com.br/motor_reserva_guaru_jan_23.php" method="post" target="_blank">
<input name="CheckIn" type="text" onfocus="(this.type='date')" class="form-control" id="CheckIn" placeholder="Entrada" title="Entrada" data-campo="CheckIn"/>
<input name="CheckOut" type="text" onfocus="(this.type='date')" class="form-control" id="CheckOut" placeholder="Saída" title="Saída" data-campo="CheckOut" />
<select class="form-control" name="ad" id="ad" data-campo="ad">
<option value="">Adultos</option>
<option value="1">1 Adulto</option>
<option value="2">2 Adultos</option>
<option value="3">3 Adultos</option>
<option value="4">4 Adultos</option>
</select>
<select class="form-control" name="ch" id="ch" data-campo="ch">
<option value="0">Crianças</option>
<option value="1">1 Criança</option>
<option value="2">2 Crianças</option>
<option value="3">3 Crianças</option>
<option value="4">4 Crianças</option>
</select>
<!-- Div para la ventana emergente -->
<div id="edadCriancaDiv" style="display: none;">
<label for="edadCrianca">Edad de las Crianças:</label>
<input type="text" class="form-control" id="edadCrianca" name="ag" />
<button type="button" id="guardarEdadCrianca">Guardar</button>
</div>
<input type="hidden" name="q" value="6284">
<input class="btn btn-success" style="font-family: 'Nunito Sans', sans-serif; background-color:#edc34f;" type="submit" name="reserva_enviar" id="reserva_enviar" value="CONSULTAR VALORES">
</form>
</div>
</body>