XAJAX: una librería de AJAX para PHP (parte 2)

Ejemplo 2. Un formulario dinámico con un número indeterminado de campos.

En este ejemplo presentamos un formulario en el que no se sabe a priori el número de campos de entrada que se van a necesitar por lo que se generan dinámicamente añadiéndolos según los pide el usuario sin recargar el formulario entero.
El ejemplo simula un formulario de matrícula de una academia de idiomas en la que un alumno se puede matricular en varios idiomas y diferentes cursos para cada idioma. Como no se conoce el número de cursos en los que se va a matricular, cada vez que pulsamos el botón ‘Añadir idioma’ nos aparecen dos campos nuevos para seleccionar idioma y curso sin perder la información ya introducida.

Aquí mostramos cómo modificar el contenido de una página sin recargarla a la vez que mostramos cómo acceder a la información de un formulario usando Ajax.

‘matriculaIdiomas.php’
<?php
require(‘xajax/xajax.inc.php’);
$xajax = new xajax();
$xajax->setCharEncoding(‘latin1’);

function addAsignaturas($formDatos){
$respuesta = new xajaxResponse();
//contador de idiomas matriculados
$countIdioma = $formDatos[‘countIdioma’];
$idiomas = array("Ingles", "Italiano", "Frances", "Chino", "Ruso");
$cursos = array("1","2","3","4","5");
$formIdiomas = "";

//procesamos las anteriores asignaturas y mostramos los valores seleccionados
for($i=1; $i<$countIdioma; $i++){
$formIdiomas .= "<div>";
$formIdiomas .= "Idioma $i: <select name=’idioma_$i’ id=’idioma_$i’>";
for ($j=0; $j<count($idiomas); $j++){
$formIdiomas .= "<option value=’".$idiomas[$j]."’";
if (strcasecmp($idiomas[$j], $formDatos["idioma_$i"]) == 0){
$formIdiomas .= " selected=’selected’ ";
}
$formIdiomas .= ">".$idiomas[$j]."</option>";
}
$formIdiomas .= "</select>";

$formIdiomas .= " Curso: <select name=’curso_$i’ id=’curso_$i’>";
for ($j=0; $j<count($cursos); $j++){
$formIdiomas .= "<option value=’".$cursos[$j]."’";
if (strcasecmp($cursos[$j], $formDatos["curso_$i"]) == 0){
$formIdiomas .= " selected=’selected’ ";
}
$formIdiomas .= ">".$cursos[$j]."</option>";
}
$formIdiomas .= "</select>";
$formIdiomas .= "</div>";
}

//añadimos uno nuevo en blanco
$formIdiomas .= "
<div>
Idioma $countIdioma:
<select name=’idioma_$countIdioma’ id=’idioma_$countIdioma’>";
for ($i=0; $i<count($idiomas); $i++){
$formIdiomas .= "<option value=’".$idiomas[$i]."’>".$idiomas[$i]."</option>";
}
$formIdiomas .= "</select>
Curso :
<select name=’curso_$countIdioma’ id=’curso_$countIdioma’>";
for ($i=0; $i<count($cursos); $i++){
$formIdiomas .= "<option value=’".$cursos[$i]."’>".$cursos[$i]."</option>";
}
$formIdiomas .= "</div>";
//incrementamos el contador de asignaturas en uno
$respuesta->addAssign("countIdioma", "value", ($countIdioma+1));
//añadimos los campos de formulario para introducir un idioma
$respuesta->addAssign("divIdiomas", "innerHTML", $formIdiomas);

return $respuesta;
}
$xajax->registerFunction(‘addAsignaturas’);
$xajax->processRequests();
?>
<html>
<head>
<?php
$xajax->printJavascript(‘xajax/’);
?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h2>Registro de alumnos</h2>
<form name="formSocios" id="formSocios" method="post" action="#">
<div>
<table>
<tr><td>Nombre: </td><td><input type="text" name="textNombre" id="textNombre" value="Pepe" /></td></tr>
<tr><td>Edad: </td><td><input type="text" name="textEdad" id="textEdad" value="20" /></td></tr>
<tr><td>Sexo: </td><td><input type="radio" name="radioSexo" id="radioSexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="radioSexo" id="radioSexo" value="mujer" checked="checked" /> Mujer </td></tr>
<tr><td>Ciudad: </td><td><select name="selectCiudad" id="selectCiudad">
<option value="Alicante">Alicante</option>
<option value="Castellón">Castellón</option>
<option value="Valencia">Valencia</option>
</select>
</td></tr>
<tr><td colspan="2">
<h3>Idiomas en los que se matricula</h3>
<div id="divIdiomas"><div><br /><br />
</td></tr>
<tr><td colspan="2">
<input type="button" name="buttonIdioma" id="buttonIdioma" value="Añadir idioma" onclick="xajax_addAsignaturas(xajax.getFormValues(‘formSocios’))" />
<input type="hidden" name="countIdioma" id="countIdioma" value="1" />
</td></tr>
</table>
</div>
</form>
</body>
</html>

Descargar archivo php

Explicación:

En el formulario HTML vemos que el botón para añadir idiomas incluye un código xajax en el evento onclick que pasa todas las variables del formulario a la función addAsignaturas:

<input type="button" name="buttonIdioma" id="buttonIdioma" value="Añadir idioma" onclick="xajax_addAsignaturas(xajax.getFormValues(‘formSocios’))" />

Para leer las variables del formulario simplemente debemos tratarlas como un array cualquiera:

$formDatos[‘textNombre’]

Dentro de la función addAsignaturas hay dos partes principales: una que regenera las asignaturas ya seleccionadas y una segunda parte que presenta los campos de formulario necesarios para introducir una nueva asignatura. Se ha hecho mediante inputs tipo select para que sea más cómodo para el usuario, aunque a su vez se hace más complicado para el programador ya que hay que hacer muchos bucles for y comparaciones con cada valor para marcar la opción seleccionada.

Sin categoría

Deja una respuesta