<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script rel="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script rel="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script rel="javascript">
$(document).ready(function(){
$( "#checkin" ).datepicker({ dateFormat: "yy-mm-dd", changeYear: true });
$( "#checkout" ).datepicker({ dateFormat: "yy-mm-dd", changeYear: true });
$('.extrasA').hide();
$('#pasaje').change(function(){
var canti= $(this).val();
if (canti>=1)
{
$('.extrasA').show();
for(var numero=1; numero<=99;numero++)
{
$('.extrasA'+numero).hide();
}
for(var numero=1; numero<=canti;numero++)
{
$('.extrasA'+numero).show();
}
}
});
});
</script>
</head>
<body>
<form method="post" name="f1">
<ul>
<li>Nombre Completo: <input name="nombre" type="text" id="nombre"/></li>
<li>E-Mail: <input name="email" type="text" /></li>
<li>Teléfono (opciónal): <input name="telefono" type="text" /></li>
<li class="flotar">
Pasaje Extra: <select name="pasaje" class="espacio20px" id="pasaje">
<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>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">9</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</li>
<p class="extrasA">
marcar cantidad de pasajeros <br />
<li class="extrasA1">pasajero 1</li>
<li class="extrasA2">pasajero 2</li>
<li class="extrasA3">pasajero 3</li>
<li class="extrasA4">pasajero 4</li>
<li class="extrasA5">pasajero 5</li>
<li class="extrasA6">pasajero 6</li>
<li class="extrasA7">pasajero 7</li>
<li class="extrasA8">pasajero 8</li>
<li class="extrasA9">pasajero 9</li>
<li class="extrasA10">pasajero 10</li>
</p>
</ul>
<li class="flotar">
<aside class="check">
<span>Seleccionar Tours
</span>
<section id="totaltours">
<span class="size10"> </span><span class="size10">Tours</span><span class="size10">Fecha</span><span class="size10">Precio</span> <br />
<p>
<span class="size10"><input type="checkbox" /></span>
<span class="size10"><span class="tour">Cozumel</span></span>
<span class="size10"><input type="text" size="10"/></span>
<span class="size10"><span class="tour">98 USD</span></span>
</p>
<br />
</section>
<p class="sinmargen">
<input type="checkbox" name="traslado">Marcar caso necesite traslado tiene un costo de 40 dolares.
</p>
<p>
Hotel de Hospedaje: <input type="text" size="20" name="hotel" />
</p>
<p>
Periodo de Visits:<br />
CheckIn: <input type="text" readonly size="10" name="checkin" id="checkin"/>
CheckOut: <input type="text" readonly size="10" name="checkout" id="checkout"/>
</p>
<p>
<input type="checkbox" /> <span>Politicas de Privacidad</span>
</p>
<p style="float:right;">
<input type='submit' class="submit" value='Reservar' onclick="f1.action='reservar.php'">
<input type='submit' class="submit" value='Pagar' onclick="f1.action='pagar.php'">
</p>
</li>
</ul>
</form>
</body>
</body>
</html>