Skip to main content
título editado
Enlace
jasilva
  • 5.1k
  • 6
  • 32
  • 46

Paginación formulario con PHP (?¿)

Redacción y correción de formato de código
Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

Estoy haciendo un formulario de gestión de una academia de informática (aún ando con el esqueleto) y en la parte del formulario donde introduzco los datos de cada Estudiante me gustaría tener dos botones: ("reward" <<"reward" (<<) y "forward" >>)"forward" (>>) que, al hacerle click me muestren a los estudiantes con sus datos. Actualmente lo tengo en un menú desplegable de forma que al seleccionar uno me aparecen sus datos directamente en los campos a rellenar tal que así:

Parte del código que llamo ajaxMAnager: require_once './dataModel.php';

require_once './dataModel.php';

//Recuperar informacion de un estudiante seleccionado
$idEstudiante = filter_input(INPUT_POST, 'estudianteSeleccionado',     FILTER_SANITIZE_STRING, FILTER_NULL_ON_FAILURE);
if($idEstudiante !== FALSE) {

$infoEstudiante = getInfoEstudiante($db, $idEstudiante);

echo json_encode($infoEstudiante);
}

}

 //Recuperar la informacion de un estudiante seleccionado,
//conjuntamente con sus telefonos correspondientes
function getInfoEstudiante(PDO $conn, $idEstudiante) {
$sql = "select e.Nombre as nombre,
   e.`Primer Apellido` as primerApellido, 
   e.`Segundo Apellido` as segundoApellido, 
   e.DNI as dni, 
   e.`Correo Electronico` as email, 
   e.`Fecha de Nacimiento` as fechaNacimiento,
   t.idTelefono as idTelefono,
   t.Numero as numeroDeTelefono
   from Estudiantes e join Telefonos t on e.idEstudiante = t.idTelefono and
   e.idEstudiante = :id";

$stmt = $conn->prepare($sql);
$stmt->bindValue(":id", $idEstudiante, PDO::PARAM_INT);
$stmt->execute();
$estudiante = $stmt->fetchAll(PDO::FETCH_ASSOC);

return $estudiante;
}

}

/* Implementacion de AJAX con JSON en los siguientes métodos */
 //Al seleccionar a un Estudiante de la lista desplegable, 
  //se rellenaran los campos del formulario
 //con los datos del estudiante seleccionado 

          document.getElementById("Estudiantes").
    addEventListener("change",function () {
//Se necesita el ID del estudiante seleccionado
var indice = document.getElementById("Estudiantes").selectedIndex;
//Si el indice es igual a cero, limpiamos el formulario y solamente   queda habilitado el 
//boton para dar alta a un nuevo estudiante
if (indice === 0) {
    document.getElementById("frmEstudiantes").reset();
    document.getElementById("altaEstudiante").disabled = false;
    document.getElementById("update").disabled = true;
    document.getElementById("delete").disabled = true;
    document.getElementById("addTelefono").disabled = true;
    document.getElementById("matricularEnOtroCurso").disabled = true;
    document.getElementById("numerosTelefonos").selectedIndex = 0;
    document.getElementById("numerosTelefonos").disabled = true;
    document.getElementById("numeroTelefono").value = "";
    document.getElementById("actualizarNumeroTelefono").disabled = true;
    document.getElementById("eliminarNumeroTelefono").disabled = true;

    //Borramos el nombre del Estudiante de "Cursos Matriculados por un Estudiante"
    //y eliminamos los registros con nombres de cursos en la tabla
    document.getElementById("estudianteCursos").innerHTML = "";

    var nombreCursos = document.getElementById("tablaCursos");
    while (nombreCursos.hasChildNodes()) {
        nombreCursos.removeChild(nombreCursos.firstChild);
    }

} else {
    //Habilitamos los botones para Modificar o Eliminar al Estudiante 
    //y agregar telefonos
    document.getElementById("altaEstudiante").disabled = true;
    document.getElementById("update").disabled = false;
    document.getElementById("delete").disabled = false;
    document.getElementById("addTelefono").disabled = false;
    document.getElementById("matricularEnOtroCurso").disabled = false;
    var idEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].value;
    var nombreEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].text;
    //Guardamos el ID del estudiante seleccionado en un campo oculto del formulario
    document.getElementById("idEstudianteSeleccionado").value = idEstudianteSeleccionado;

    //Mostrar el nombre del Estudiante en "Cursos Matriculados por un Estudiante"
    //y agregar los nombres de los cursos en los cuales esta matriculado
    document.getElementById("estudianteCursos").innerHTML = nombreEstudianteSeleccionado;

    //Recuperar el nombre de los cursos matriculados por el estudiante seleccionado
    var xhttp1 = new XMLHttpRequest();

    xhttp1.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            //console.log(this.responseText);
            var objNombreCursos = JSON.parse(this.responseText);

            //Rellenamos la tabla con los nombres de los cursos
            var tablaNombreCursos = "<tr><th>" + "Nombre del Curso" + "</th></tr>";
            for (var x in objNombreCursos) {
                tablaNombreCursos += "<tr><td>" + objNombreCursos[x].NombreCurso + "</td></tr>";
            }

            document.getElementById("tablaCursos").innerHTML = tablaNombreCursos;
         
        }
    };

    xhttp1.open("POST", "ajaxManager.php", true);
    xhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp1.send("nombreCursos=" + idEstudianteSeleccionado);

    //Crear la peticion con AJAX y enviar el ID para recuperar el resto de los campos 
    //de la tabla Estudiantes y el, o los telefonos que dicho estudiante pueda tener.
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            // console.log(this.responseText);
            var infoEstudiantes = JSON.parse(this.responseText);
            document.getElementById("nombre").value = infoEstudiantes[0].nombre;
            document.getElementById("primerApellido").value = infoEstudiantes[0].primerApellido;
            document.getElementById("segundoApellido").value = infoEstudiantes[0].segundoApellido;
            document.getElementById("email").value = infoEstudiantes[0].email;
            document.getElementById("dni").value = infoEstudiantes[0].dni;
            document.getElementById("fechaNacimiento").value = infoEstudiantes[0].fechaNacimiento;

            //Habilitar la lista de los numeros de telefonos
            document.getElementById("numerosTelefonos").disabled = false;
            //Recorrer el objeto infoEstudiantes para 
            //rellenar la lista de los telefonos.

            //Primero limpiar la lista de telefonos
            var listadoDeTelefonos = document.getElementById("numerosTelefonos");

            while (listadoDeTelefonos.hasChildNodes()) {
                listadoDeTelefonos.removeChild(listadoDeTelefonos.firstChild);
            }

            //Segundo. Rellenar el desplegable con los numeros de telefonos y su id
            listadoDeTelefonos.appendChild(document.createElement("option"));

            for (var x in infoEstudiantes) {
                var opcion = document.createElement("option");
                var atributoValue = document.createAttribute("value");

                atributoValue.value = infoEstudiantes[x].idTelefono;
                opcion.setAttributeNode(atributoValue);
                var textNumeroTelefono = document.createTextNode(infoEstudiantes[x].numeroDeTelefono);
                opcion.appendChild(textNumeroTelefono);
                listadoDeTelefonos.appendChild(opcion);
            }
        }
    };
    xhttp.open("POST", "ajaxManager.php", true);
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send("estudianteSeleccionado=" + idEstudianteSeleccionado);
}
});

});

Estoy haciendo un formulario de gestión de una academia de informática (aún ando con el esqueleto) y en la parte del formulario donde introduzco los datos de cada Estudiante me gustaría tener dos botones ("reward" << y "forward" >>) que al hacerle click me muestren a los estudiantes con sus datos. Actualmente lo tengo en un menú desplegable de forma que al seleccionar uno me aparecen sus datos directamente en los campos a rellenar tal que así:

Parte del código que llamo ajaxMAnager: require_once './dataModel.php';

//Recuperar informacion de un estudiante seleccionado
$idEstudiante = filter_input(INPUT_POST, 'estudianteSeleccionado',     FILTER_SANITIZE_STRING, FILTER_NULL_ON_FAILURE);
if($idEstudiante !== FALSE) {

$infoEstudiante = getInfoEstudiante($db, $idEstudiante);

echo json_encode($infoEstudiante);

}

 //Recuperar la informacion de un estudiante seleccionado,
//conjuntamente con sus telefonos correspondientes
function getInfoEstudiante(PDO $conn, $idEstudiante) {
$sql = "select e.Nombre as nombre,
   e.`Primer Apellido` as primerApellido, 
   e.`Segundo Apellido` as segundoApellido, 
   e.DNI as dni, 
   e.`Correo Electronico` as email, 
   e.`Fecha de Nacimiento` as fechaNacimiento,
   t.idTelefono as idTelefono,
   t.Numero as numeroDeTelefono
   from Estudiantes e join Telefonos t on e.idEstudiante = t.idTelefono and
   e.idEstudiante = :id";

$stmt = $conn->prepare($sql);
$stmt->bindValue(":id", $idEstudiante, PDO::PARAM_INT);
$stmt->execute();
$estudiante = $stmt->fetchAll(PDO::FETCH_ASSOC);

return $estudiante;

}

/* Implementacion de AJAX con JSON en los siguientes métodos */
 //Al seleccionar a un Estudiante de la lista desplegable, 
  //se rellenaran los campos del formulario
 //con los datos del estudiante seleccionado 

          document.getElementById("Estudiantes").
    addEventListener("change",function () {
//Se necesita el ID del estudiante seleccionado
var indice = document.getElementById("Estudiantes").selectedIndex;
//Si el indice es igual a cero, limpiamos el formulario y solamente   queda habilitado el 
//boton para dar alta a un nuevo estudiante
if (indice === 0) {
    document.getElementById("frmEstudiantes").reset();
    document.getElementById("altaEstudiante").disabled = false;
    document.getElementById("update").disabled = true;
    document.getElementById("delete").disabled = true;
    document.getElementById("addTelefono").disabled = true;
    document.getElementById("matricularEnOtroCurso").disabled = true;
    document.getElementById("numerosTelefonos").selectedIndex = 0;
    document.getElementById("numerosTelefonos").disabled = true;
    document.getElementById("numeroTelefono").value = "";
    document.getElementById("actualizarNumeroTelefono").disabled = true;
    document.getElementById("eliminarNumeroTelefono").disabled = true;

    //Borramos el nombre del Estudiante de "Cursos Matriculados por un Estudiante"
    //y eliminamos los registros con nombres de cursos en la tabla
    document.getElementById("estudianteCursos").innerHTML = "";

    var nombreCursos = document.getElementById("tablaCursos");
    while (nombreCursos.hasChildNodes()) {
        nombreCursos.removeChild(nombreCursos.firstChild);
    }

} else {
    //Habilitamos los botones para Modificar o Eliminar al Estudiante 
    //y agregar telefonos
    document.getElementById("altaEstudiante").disabled = true;
    document.getElementById("update").disabled = false;
    document.getElementById("delete").disabled = false;
    document.getElementById("addTelefono").disabled = false;
    document.getElementById("matricularEnOtroCurso").disabled = false;
    var idEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].value;
    var nombreEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].text;
    //Guardamos el ID del estudiante seleccionado en un campo oculto del formulario
    document.getElementById("idEstudianteSeleccionado").value = idEstudianteSeleccionado;

    //Mostrar el nombre del Estudiante en "Cursos Matriculados por un Estudiante"
    //y agregar los nombres de los cursos en los cuales esta matriculado
    document.getElementById("estudianteCursos").innerHTML = nombreEstudianteSeleccionado;

    //Recuperar el nombre de los cursos matriculados por el estudiante seleccionado
    var xhttp1 = new XMLHttpRequest();

    xhttp1.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            //console.log(this.responseText);
            var objNombreCursos = JSON.parse(this.responseText);

            //Rellenamos la tabla con los nombres de los cursos
            var tablaNombreCursos = "<tr><th>" + "Nombre del Curso" + "</th></tr>";
            for (var x in objNombreCursos) {
                tablaNombreCursos += "<tr><td>" + objNombreCursos[x].NombreCurso + "</td></tr>";
            }

            document.getElementById("tablaCursos").innerHTML = tablaNombreCursos;
         
        }
    };

    xhttp1.open("POST", "ajaxManager.php", true);
    xhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp1.send("nombreCursos=" + idEstudianteSeleccionado);

    //Crear la peticion con AJAX y enviar el ID para recuperar el resto de los campos 
    //de la tabla Estudiantes y el, o los telefonos que dicho estudiante pueda tener.
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            // console.log(this.responseText);
            var infoEstudiantes = JSON.parse(this.responseText);
            document.getElementById("nombre").value = infoEstudiantes[0].nombre;
            document.getElementById("primerApellido").value = infoEstudiantes[0].primerApellido;
            document.getElementById("segundoApellido").value = infoEstudiantes[0].segundoApellido;
            document.getElementById("email").value = infoEstudiantes[0].email;
            document.getElementById("dni").value = infoEstudiantes[0].dni;
            document.getElementById("fechaNacimiento").value = infoEstudiantes[0].fechaNacimiento;

            //Habilitar la lista de los numeros de telefonos
            document.getElementById("numerosTelefonos").disabled = false;
            //Recorrer el objeto infoEstudiantes para 
            //rellenar la lista de los telefonos.

            //Primero limpiar la lista de telefonos
            var listadoDeTelefonos = document.getElementById("numerosTelefonos");

            while (listadoDeTelefonos.hasChildNodes()) {
                listadoDeTelefonos.removeChild(listadoDeTelefonos.firstChild);
            }

            //Segundo. Rellenar el desplegable con los numeros de telefonos y su id
            listadoDeTelefonos.appendChild(document.createElement("option"));

            for (var x in infoEstudiantes) {
                var opcion = document.createElement("option");
                var atributoValue = document.createAttribute("value");

                atributoValue.value = infoEstudiantes[x].idTelefono;
                opcion.setAttributeNode(atributoValue);
                var textNumeroTelefono = document.createTextNode(infoEstudiantes[x].numeroDeTelefono);
                opcion.appendChild(textNumeroTelefono);
                listadoDeTelefonos.appendChild(opcion);
            }
        }
    };
    xhttp.open("POST", "ajaxManager.php", true);
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send("estudianteSeleccionado=" + idEstudianteSeleccionado);
}

});

Estoy haciendo un formulario de gestión de una academia de informática (aún ando con el esqueleto) y en la parte del formulario donde introduzco los datos de cada Estudiante me gustaría tener dos botones: "reward" (<<) y "forward" (>>) que, al hacerle click me muestren a los estudiantes con sus datos. Actualmente lo tengo en un menú desplegable de forma que al seleccionar uno me aparecen sus datos directamente en los campos a rellenar tal que así:

Parte del código que llamo ajaxMAnager:

require_once './dataModel.php';

//Recuperar informacion de un estudiante seleccionado
$idEstudiante = filter_input(INPUT_POST, 'estudianteSeleccionado',     FILTER_SANITIZE_STRING, FILTER_NULL_ON_FAILURE);
if($idEstudiante !== FALSE) {

$infoEstudiante = getInfoEstudiante($db, $idEstudiante);

echo json_encode($infoEstudiante);
}
 //Recuperar la informacion de un estudiante seleccionado,
//conjuntamente con sus telefonos correspondientes
function getInfoEstudiante(PDO $conn, $idEstudiante) {
$sql = "select e.Nombre as nombre,
   e.`Primer Apellido` as primerApellido, 
   e.`Segundo Apellido` as segundoApellido, 
   e.DNI as dni, 
   e.`Correo Electronico` as email, 
   e.`Fecha de Nacimiento` as fechaNacimiento,
   t.idTelefono as idTelefono,
   t.Numero as numeroDeTelefono
   from Estudiantes e join Telefonos t on e.idEstudiante = t.idTelefono and
   e.idEstudiante = :id";

$stmt = $conn->prepare($sql);
$stmt->bindValue(":id", $idEstudiante, PDO::PARAM_INT);
$stmt->execute();
$estudiante = $stmt->fetchAll(PDO::FETCH_ASSOC);

return $estudiante;
}
/* Implementacion de AJAX con JSON en los siguientes métodos */
 //Al seleccionar a un Estudiante de la lista desplegable, 
  //se rellenaran los campos del formulario
 //con los datos del estudiante seleccionado 

          document.getElementById("Estudiantes").
    addEventListener("change",function () {
//Se necesita el ID del estudiante seleccionado
var indice = document.getElementById("Estudiantes").selectedIndex;
//Si el indice es igual a cero, limpiamos el formulario y solamente   queda habilitado el 
//boton para dar alta a un nuevo estudiante
if (indice === 0) {
    document.getElementById("frmEstudiantes").reset();
    document.getElementById("altaEstudiante").disabled = false;
    document.getElementById("update").disabled = true;
    document.getElementById("delete").disabled = true;
    document.getElementById("addTelefono").disabled = true;
    document.getElementById("matricularEnOtroCurso").disabled = true;
    document.getElementById("numerosTelefonos").selectedIndex = 0;
    document.getElementById("numerosTelefonos").disabled = true;
    document.getElementById("numeroTelefono").value = "";
    document.getElementById("actualizarNumeroTelefono").disabled = true;
    document.getElementById("eliminarNumeroTelefono").disabled = true;

    //Borramos el nombre del Estudiante de "Cursos Matriculados por un Estudiante"
    //y eliminamos los registros con nombres de cursos en la tabla
    document.getElementById("estudianteCursos").innerHTML = "";

    var nombreCursos = document.getElementById("tablaCursos");
    while (nombreCursos.hasChildNodes()) {
        nombreCursos.removeChild(nombreCursos.firstChild);
    }

} else {
    //Habilitamos los botones para Modificar o Eliminar al Estudiante 
    //y agregar telefonos
    document.getElementById("altaEstudiante").disabled = true;
    document.getElementById("update").disabled = false;
    document.getElementById("delete").disabled = false;
    document.getElementById("addTelefono").disabled = false;
    document.getElementById("matricularEnOtroCurso").disabled = false;
    var idEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].value;
    var nombreEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].text;
    //Guardamos el ID del estudiante seleccionado en un campo oculto del formulario
    document.getElementById("idEstudianteSeleccionado").value = idEstudianteSeleccionado;

    //Mostrar el nombre del Estudiante en "Cursos Matriculados por un Estudiante"
    //y agregar los nombres de los cursos en los cuales esta matriculado
    document.getElementById("estudianteCursos").innerHTML = nombreEstudianteSeleccionado;

    //Recuperar el nombre de los cursos matriculados por el estudiante seleccionado
    var xhttp1 = new XMLHttpRequest();

    xhttp1.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            //console.log(this.responseText);
            var objNombreCursos = JSON.parse(this.responseText);

            //Rellenamos la tabla con los nombres de los cursos
            var tablaNombreCursos = "<tr><th>" + "Nombre del Curso" + "</th></tr>";
            for (var x in objNombreCursos) {
                tablaNombreCursos += "<tr><td>" + objNombreCursos[x].NombreCurso + "</td></tr>";
            }

            document.getElementById("tablaCursos").innerHTML = tablaNombreCursos;
         
        }
    };

    xhttp1.open("POST", "ajaxManager.php", true);
    xhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp1.send("nombreCursos=" + idEstudianteSeleccionado);

    //Crear la peticion con AJAX y enviar el ID para recuperar el resto de los campos 
    //de la tabla Estudiantes y el, o los telefonos que dicho estudiante pueda tener.
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            // console.log(this.responseText);
            var infoEstudiantes = JSON.parse(this.responseText);
            document.getElementById("nombre").value = infoEstudiantes[0].nombre;
            document.getElementById("primerApellido").value = infoEstudiantes[0].primerApellido;
            document.getElementById("segundoApellido").value = infoEstudiantes[0].segundoApellido;
            document.getElementById("email").value = infoEstudiantes[0].email;
            document.getElementById("dni").value = infoEstudiantes[0].dni;
            document.getElementById("fechaNacimiento").value = infoEstudiantes[0].fechaNacimiento;

            //Habilitar la lista de los numeros de telefonos
            document.getElementById("numerosTelefonos").disabled = false;
            //Recorrer el objeto infoEstudiantes para 
            //rellenar la lista de los telefonos.

            //Primero limpiar la lista de telefonos
            var listadoDeTelefonos = document.getElementById("numerosTelefonos");

            while (listadoDeTelefonos.hasChildNodes()) {
                listadoDeTelefonos.removeChild(listadoDeTelefonos.firstChild);
            }

            //Segundo. Rellenar el desplegable con los numeros de telefonos y su id
            listadoDeTelefonos.appendChild(document.createElement("option"));

            for (var x in infoEstudiantes) {
                var opcion = document.createElement("option");
                var atributoValue = document.createAttribute("value");

                atributoValue.value = infoEstudiantes[x].idTelefono;
                opcion.setAttributeNode(atributoValue);
                var textNumeroTelefono = document.createTextNode(infoEstudiantes[x].numeroDeTelefono);
                opcion.appendChild(textNumeroTelefono);
                listadoDeTelefonos.appendChild(opcion);
            }
        }
    };
    xhttp.open("POST", "ajaxManager.php", true);
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send("estudianteSeleccionado=" + idEstudianteSeleccionado);
}
});
Origen Enlace

Paginación formulario con PHP (?¿)

Estoy haciendo un formulario de gestión de una academia de informática (aún ando con el esqueleto) y en la parte del formulario donde introduzco los datos de cada Estudiante me gustaría tener dos botones ("reward" << y "forward" >>) que al hacerle click me muestren a los estudiantes con sus datos. Actualmente lo tengo en un menú desplegable de forma que al seleccionar uno me aparecen sus datos directamente en los campos a rellenar tal que así:

introducir la descripción de la imagen aquí

He estado consultando y lo más parecido a lo que quiero es lo que se llama paginación en PHP, pero no he encontrado hasta el momento ningún ejemplo con lo que me gustaría hacer a mi...

¿me podrían indicar algún ejemplo que conozcan o algún tipo de ayuda (palabras claves de búsqueda de ejemplos similares, ya que no sé muy bien si esto sería paginación u otra cosa)?

Muchísimas gracias,

Les adjunto las partes del código asociadas a lo que quiero modificar en caso de que sirva de ayuda:

 <html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <header><h1>Gestion de Matriculas</h1></header>
    <div id="formEstudiantes">
        <fieldset>
            <legend>Formulario de Estudiantes</legend>
            <form method="post" action="gestionaEstudiantes.php" 
                  name="Estudiantes" id="frmEstudiantes" onsubmit="return getTelefonosYCurso()">
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" id="nombre" required
                       placeholder="Nombre del Estudiante">        
                <label for="primerApellido">Primer Apellido:</label>
                <input type="text" name="primerApellido" id="primerApellido" required placeholder="Apellido del Estudiante">        
                <label for="segundoApellido">Segundo Apellido:</label>
                <input type="text" name="segundoApellido" id="segundoApellido" required placeholder="Segundo Apellido del Estudiante">        
                <label for="email">Correo:</label>
                <input type="text" name="email" id="email" required placeholder="Correo">        
                <label for="dni">DNI: </label>
                <input type="text" name="dni" id="dni" required placeholder="DNI">        
                <label for="fechaNacimiento">Fecha de Nacimiento: </label>
                <input type="date" name="fechaNacimiento" required id="fechaNacimiento">        
                <input type="submit" value="Alta" id="altaEstudiante">
                <button type="button" id="update" disabled>Modificar</button>
                <button type="button" id="delete" disabled>Eliminar</button>   
                <button type="button" id="matricularEnOtroCurso" title="Matricular en otro curso seleccionado"disabled>Matricular</button>
                <!-- Listado de estudiantes con Nombre y Apellidos
                que al seleccionar uno se rellenan sus datos en el formulario
                -->
                <label for="Estudiantes">Estudiantes: </label>
                <select name="Estudiantes" id="Estudiantes">
                    <option></option>
                    <?php
                    //Las opciones de la lista se rellenan con los 
                    //campos correspondientes de la tabla Estudiantes
                    //El atributo value debe contener el id del estudiante
                    require_once './dataModel.php';

                    try {
                        $estudiantes = getEstudiantes($db);
                    } catch (PDOException $exc) {
                        echo $exc->getMessage();
                    }

                    foreach ($estudiantes as $estudiante) {
                        ?>
                        <option value="<?php echo $estudiante['idEstudiante'] ?>"><?php echo $estudiante['Nombre'] . " " . $estudiante['Primer Apellido'] . " " . $estudiante['Segundo Apellido']; ?></option>     
                        <?php
                    }
                    ?>
                </select>
                <!--Campos ocultos para almacenar telefonos y curso al cual se va a matricular 
                el estudianta-->
                <input type="hidden" name="telefonos" value="" id="telefonosDelEstudiante">
                <input type="hidden" name="idDelCurso" value="" id="idDelCurso">
                <input type="hidden" name="tipoTelefonoEstudiante" value="" id="tipoTelefonoEstudiante">
                <input type="hidden" name="idEstudianteSeleccionado" value="" id="idEstudianteSeleccionado">
            </form>

        </fieldset>
    </div>

Parte del código que llamo ajaxMAnager: require_once './dataModel.php';

//Recuperar informacion de un estudiante seleccionado
$idEstudiante = filter_input(INPUT_POST, 'estudianteSeleccionado',     FILTER_SANITIZE_STRING, FILTER_NULL_ON_FAILURE);
if($idEstudiante !== FALSE) {

$infoEstudiante = getInfoEstudiante($db, $idEstudiante);

echo json_encode($infoEstudiante);

}

La función que empleo para hacer la consulta a la BBDD:

 //Recuperar la informacion de un estudiante seleccionado,
//conjuntamente con sus telefonos correspondientes
function getInfoEstudiante(PDO $conn, $idEstudiante) {
$sql = "select e.Nombre as nombre,
   e.`Primer Apellido` as primerApellido, 
   e.`Segundo Apellido` as segundoApellido, 
   e.DNI as dni, 
   e.`Correo Electronico` as email, 
   e.`Fecha de Nacimiento` as fechaNacimiento,
   t.idTelefono as idTelefono,
   t.Numero as numeroDeTelefono
   from Estudiantes e join Telefonos t on e.idEstudiante = t.idTelefono and
   e.idEstudiante = :id";

$stmt = $conn->prepare($sql);
$stmt->bindValue(":id", $idEstudiante, PDO::PARAM_INT);
$stmt->execute();
$estudiante = $stmt->fetchAll(PDO::FETCH_ASSOC);

return $estudiante;

}

y el script en JS que empleo:

/* Implementacion de AJAX con JSON en los siguientes métodos */
 //Al seleccionar a un Estudiante de la lista desplegable, 
  //se rellenaran los campos del formulario
 //con los datos del estudiante seleccionado 

          document.getElementById("Estudiantes").
    addEventListener("change",function () {
//Se necesita el ID del estudiante seleccionado
var indice = document.getElementById("Estudiantes").selectedIndex;
//Si el indice es igual a cero, limpiamos el formulario y solamente   queda habilitado el 
//boton para dar alta a un nuevo estudiante
if (indice === 0) {
    document.getElementById("frmEstudiantes").reset();
    document.getElementById("altaEstudiante").disabled = false;
    document.getElementById("update").disabled = true;
    document.getElementById("delete").disabled = true;
    document.getElementById("addTelefono").disabled = true;
    document.getElementById("matricularEnOtroCurso").disabled = true;
    document.getElementById("numerosTelefonos").selectedIndex = 0;
    document.getElementById("numerosTelefonos").disabled = true;
    document.getElementById("numeroTelefono").value = "";
    document.getElementById("actualizarNumeroTelefono").disabled = true;
    document.getElementById("eliminarNumeroTelefono").disabled = true;

    //Borramos el nombre del Estudiante de "Cursos Matriculados por un Estudiante"
    //y eliminamos los registros con nombres de cursos en la tabla
    document.getElementById("estudianteCursos").innerHTML = "";

    var nombreCursos = document.getElementById("tablaCursos");
    while (nombreCursos.hasChildNodes()) {
        nombreCursos.removeChild(nombreCursos.firstChild);
    }

} else {
    //Habilitamos los botones para Modificar o Eliminar al Estudiante 
    //y agregar telefonos
    document.getElementById("altaEstudiante").disabled = true;
    document.getElementById("update").disabled = false;
    document.getElementById("delete").disabled = false;
    document.getElementById("addTelefono").disabled = false;
    document.getElementById("matricularEnOtroCurso").disabled = false;
    var idEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].value;
    var nombreEstudianteSeleccionado = document.getElementById("Estudiantes").options[indice].text;
    //Guardamos el ID del estudiante seleccionado en un campo oculto del formulario
    document.getElementById("idEstudianteSeleccionado").value = idEstudianteSeleccionado;

    //Mostrar el nombre del Estudiante en "Cursos Matriculados por un Estudiante"
    //y agregar los nombres de los cursos en los cuales esta matriculado
    document.getElementById("estudianteCursos").innerHTML = nombreEstudianteSeleccionado;

    //Recuperar el nombre de los cursos matriculados por el estudiante seleccionado
    var xhttp1 = new XMLHttpRequest();

    xhttp1.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            //console.log(this.responseText);
            var objNombreCursos = JSON.parse(this.responseText);

            //Rellenamos la tabla con los nombres de los cursos
            var tablaNombreCursos = "<tr><th>" + "Nombre del Curso" + "</th></tr>";
            for (var x in objNombreCursos) {
                tablaNombreCursos += "<tr><td>" + objNombreCursos[x].NombreCurso + "</td></tr>";
            }

            document.getElementById("tablaCursos").innerHTML = tablaNombreCursos;
         
        }
    };

    xhttp1.open("POST", "ajaxManager.php", true);
    xhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp1.send("nombreCursos=" + idEstudianteSeleccionado);

    //Crear la peticion con AJAX y enviar el ID para recuperar el resto de los campos 
    //de la tabla Estudiantes y el, o los telefonos que dicho estudiante pueda tener.
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            // console.log(this.responseText);
            var infoEstudiantes = JSON.parse(this.responseText);
            document.getElementById("nombre").value = infoEstudiantes[0].nombre;
            document.getElementById("primerApellido").value = infoEstudiantes[0].primerApellido;
            document.getElementById("segundoApellido").value = infoEstudiantes[0].segundoApellido;
            document.getElementById("email").value = infoEstudiantes[0].email;
            document.getElementById("dni").value = infoEstudiantes[0].dni;
            document.getElementById("fechaNacimiento").value = infoEstudiantes[0].fechaNacimiento;

            //Habilitar la lista de los numeros de telefonos
            document.getElementById("numerosTelefonos").disabled = false;
            //Recorrer el objeto infoEstudiantes para 
            //rellenar la lista de los telefonos.

            //Primero limpiar la lista de telefonos
            var listadoDeTelefonos = document.getElementById("numerosTelefonos");

            while (listadoDeTelefonos.hasChildNodes()) {
                listadoDeTelefonos.removeChild(listadoDeTelefonos.firstChild);
            }

            //Segundo. Rellenar el desplegable con los numeros de telefonos y su id
            listadoDeTelefonos.appendChild(document.createElement("option"));

            for (var x in infoEstudiantes) {
                var opcion = document.createElement("option");
                var atributoValue = document.createAttribute("value");

                atributoValue.value = infoEstudiantes[x].idTelefono;
                opcion.setAttributeNode(atributoValue);
                var textNumeroTelefono = document.createTextNode(infoEstudiantes[x].numeroDeTelefono);
                opcion.appendChild(textNumeroTelefono);
                listadoDeTelefonos.appendChild(opcion);
            }
        }
    };
    xhttp.open("POST", "ajaxManager.php", true);
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send("estudianteSeleccionado=" + idEstudianteSeleccionado);
}

});