Segunda Aplicacion con AJAX ... y Prototype
Esta pequeña aplicación sencilla, consiste en seleccionar el numero del cierto mes de una lista y en otra lista aparecen los numeros de días. Si seleccionamos el numero de mes que corresponde a Febrero (2) la lista mostrará 29 días, y así por el estilo.
Veamos, la parte HTML donde también incluimos el código JavaScript haciendo uso de funciónes de Prototype.js:
<html>
<head>
<title>Prototype Segunda Aplicacion</title>
<script type="text/javascript" src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
//enviando el numero del mes
function send(value){
//eliminando los dias del mes anterior
var length=$("day").length;
for (i=0;i<length;i++){
$("day").remove(0);
}
//nos conectamos con response.php
//que nos dará el numero de dias segun el mes
new Ajax.Request(
'./response.php',{
method: "get",
parameters: {month: value},
onSuccess: function(response){
var days=response.responseText;
for (i=1;i<=days;i++){
$("day").options.add(new Option(i,i));
}
},
onFailure: function(){
alert('Failed!'); //en caso de errores
}
}
);
}
//esta función se ejecuta al iniciar
//consiste en llenar las dos lista con
//el primer mes y sus dias correspondientes
function init(){
for (i=1;i<=12;i++){
$("month").options.add(new Option(i,i));
}
for (i=1;i<=31;i++){
$("day").options.add(new Option(i,i));
}
}
</script>
</head>
<body onLoad="init();">
<p>
Mes: <select id="month" onChange="send(this.value);"></select>
Dia: <select id="day"></select>
</p>
</body>
</html>
Ahora veamos el archivo response.php:
<?php
$d=$_GET['month'];
//definimos un array con los maximos de dias de cada mes
$days=array(31,29,31,30,31,30,31,31,30,31,30,31);
//mostramos según el numero del mes
echo $days[$d-1];
?>
Dejar un comentario