0

Tengo un problema sencillo pero no se resolverlo, tengo un php donde muestro en una tabla los datos de cada alumno: tabla

Como podéis observar, cada fila hay un input type submit, hasta ahí todo bien, supongamos que elegimos la nota de marcos, pues ahí tengo el fallo, me recoje el valor del primer usuario:

nota

Si recoge los datos pero no los correctos, tengo el form donde escribo las notas dentro del mismo div para poder guardar esas notas, os enseño mi código:

<main class="admin__main">
        <div class="dashboard">
        <div class="dashboard__item">
            <div class="card">
                <form method="post">
                    <select name="evaluacion" id="evaluacion" style="min-width: 25%;" required>
                        <option value="EVALUACIÓN" hidden >---</option>
                        <option value="primer_ev">Primera EV</option>
                        <option value="segunda_ev">Segunda EV</option>
                        <option value="tercer_ev">Tercera EV</option>
                    </select>
                    <input type="submit" value="Mostrar" name="mostrar" class="btn btn--primary">
                </form>
                <?php
                    if (isset($_POST['mostrar'])) {
                        $evaluacion = $_POST['evaluacion'];

                        // Obtener el id del profesor a partir del correo de inicio de sesión
                        session_start();
                        $correo = $_SESSION['correo'];
                        $conexion = mysqli_connect("localhost", "root", "rootroot", "educados") or die("No se puede conectar con el servidor");
                        $instruccion = "SELECT id_usuario FROM profesor WHERE correo = '$correo'";
                        $consulta = mysqli_query($conexion, $instruccion) or die("Fallo en la consulta");
                        $id_profesor = mysqli_fetch_array($consulta)['id_usuario'];

                        $materia = $resultado['materia'];
                        // Obtener la materia seleccionada
                        if (isset($_GET['materia'])) {
                            $materia = urldecode($_GET['materia']);
                        } else {
                            print("Debe seleccionar una materia.");
                            exit();
                        }

                        // Obtener las calificaciones filtradas por materia y evaluación
                        $instruccion2 = "SELECT * FROM calificaciones, alumno WHERE id_alumno=id_usuario AND materia = '$materia'";
                        if ($evaluacion == "primer_ev") {
                            $instruccion2 .= " AND primer_ev IS NOT NULL";
                        } elseif ($evaluacion == "segunda_ev") {
                            $instruccion2 .= " AND segunda_ev IS NOT NULL";
                        } elseif ($evaluacion == "tercer_ev") {
                            $instruccion2 .= " AND tercer_ev IS NOT NULL";
                        } else {
                            $instruccion2 .= " AND 1=0"; // No se seleccionará ningún registro si no se ha elegido una evaluación
                        }
                        $consulta = mysqli_query($conexion, $instruccion2) or die("Fallo en la consulta");

                        $nfilas = mysqli_num_rows($consulta);
                        if ($nfilas > 0) {
                            print("<TABLE class='table'>\n");
                            print("<TR>\n");
                            print("<TH>MATERIA</TH>\n");
                            print("<TH>ID_ALUMNO</TH>\n");
                            print("<TH>ALUMNO</TH>\n");
                            print("<TH>NOTA</TH>\n");
                            print("<TH>INGRESAR</TH>\n");
                            print("</TR>\n");

                            while ($resultado = mysqli_fetch_array($consulta)) {
                                print("<TR>\n");
                                print("<TD>" . $resultado['materia'] . "</TD>\n");
                                print("<TD>" . $resultado['id_alumno'] . "</TD>\n");
                                print("<TD>" . $resultado['alumno'] . "</TD>\n");
                                if ($evaluacion == "primer_ev") {
                                    $nota = $resultado['primer_ev'];
                                    print("<TD>" . ($nota != 0 ? $nota : 'N/A') . "</TD>\n");
                                } elseif ($evaluacion == "segunda_ev") {
                                    $nota = $resultado['segunda_ev'];
                                    print("<TD>" . ($nota != 0 ? $nota : 'N/A') . "</TD>\n");
                                } elseif ($evaluacion == "tercer_ev") {
                                    $nota = $resultado['tercer_ev'];
                                    print("<TD>" . ($nota != 0 ? $nota : 'N/A') . "</TD>\n");
                                }   
                                print("<TD><input type='submit' class='nota' name='nota' value='Nota' onclick='abrir()'></TD>\n");
                                print("</TR>\n");
                                echo "<div class='dashboard__item'>";
                                echo "<div class='card' id='pitola' style='display: none;'>";
                                    echo "<div>";
                                    echo "<form action='calificaciones4.php?materia=%' method='post' onsubmit='return validar()'>";
                                    echo "  <h5>Nota para ".$resultado['alumno']." en ".$evaluacion."  en ".$resultado['id_alumno']."</h5>";
                                    echo "  <p>Nota: <input type='text' id='nota' name='nota'></p>";
                                    echo "  <span id='errorNota' style='color:red;display:none;'>Ingrese una nota válida</span>";
                                    echo "  <p>Actitud: <input type='text' id='actitud' name='actitud'></p>";
                                    echo "  <span id='errorActitud' style='color:red;display:none;'>Ingrese una actitud válida</span>";
                                    echo "  <p>Comentario: <input type='text' id='comentario' name='comentario'></p>";
                                    echo "  <span id='errorComentario' style='color:red;display:none;'>Ingrese un comentario válido</span>";
                                    echo "  <input type='hidden' name='id_profesor' value='" . $id_profesor . "'>";
                                    echo "  <input type='hidden' name='curso' value='" . $curso . "'>";
                                    echo "  <input type='hidden' name='materia' value='" . $materia . "'>";
                                    echo "  <input type='hidden' name='evaluacion' value='" . $evaluacion . "'>";
                                    echo "  <input type='hidden' name='id_alumno' value='" . $id_alumno . "'>";                              
                                    echo "  <input type='submit' name='guardar' value='GUARDAR'>";
                                    echo "</form>";
                                    echo "  <input type='button' name='comprobar' value='CANCELAR' onclick='cerrar()'>";
                                    echo "</div>";
                                echo " </div>"; 
                ?>
                <?php
                                if (isset($_POST['guardar'])) {
                                    echo "<script language='javascript'>
                                    alert('hola') ;
                                    </script>"; 
                                    $nota = $_POST['nota'];
                                    $actitud = $_POST['actitud'];
                                    $comentario = $_POST['comentario'];
                                    $id_profesor = $_POST['id_profesor'];

                                    if ($evaluacion == 'primer_ev') {
                                        $query = "UPDATE calificaciones SET primer_ev = '$nota', comentario = '$comentario', actitud = '$actitud' WHERE id_alumno = " . $resultado['id_alumno'];
                                    } elseif ($evaluacion == 'segunda_ev') {
                                        $query = "UPDATE calificaciones SET segunda_ev = '$nota', comentario = '$comentario', actitud = '$actitud' WHERE id_alumno = " . $resultado['id_alumno'];
                                    } elseif ($evaluacion == 'tercer_ev') {
                                        $query = "UPDATE calificaciones SET tercer_ev = '$nota', comentario = '$comentario', actitud = '$actitud' WHERE id_alumno = " . $resultado['id_alumno'];
                                    }
                                    
                                    if (mysqli_query($conexion, $query)) {
                                        echo $query;
                                    } else {
                                        echo $query;
                                    }
                                }
                            }
                            print("</TABLE>\n");
                        } else {
                            print("Seleccione una evaluación.");
                        }
                    }
                        mysqli_close($conexion);
                    ?>
            </main>

Ese es mi problema, porque si saco el div donde escribo las notas me da error, me gustaría mostrarlo a la derecha de la tabla pero no es posible: Vista general

1 respuesta 1

1

¿Qué tal?

Lo primero que te puedo recomendar es evitar repetir los identificadores de los elementos de formularios, pues, de lo contrario, se presentarán problemas como el que mencionas. Como utilizas una estructura cíclica para dibujar la tabla y todas sus filas, cada una con un formulario y sus elementos, terminas por repetir los valores de los atributos name e id.

Una manera más práctica (a mi criterio) de abordar esto es por medio de la delegación de eventos de JavaScript. En esencia, lo que se tendría que hacer es trabajar con un solo formulario, mientras que en la tabla únicamente se mostrarían los valores como texto plano y el botón del final de cada fila conservaría el ID del registro en la tabla de la base de datos de los datos de la fila en la que se encuentra, esto con la finalidad de poder cargar dichos datos en el formulario por medio de una consulta.

Te pongo un ejemplo. Supongamos que tenemos una tabla tbl_personas con los campos id, nombre y edad. Lo que empezaríamos por hacer es simplemente dibujar la tabla con los datos en cuestión:

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
<?php
$conexion = mysqli_connect('server', 'user', 'password', 'database');
$query = mysqli_query($conexion, 'SELECT id, nombre, edad FROM tbl_personas') or exit(mysqli_error($conexion));
if (mysqli_num_rows($query)){
    while ($rows = mysqli_fetch_assoc($query)){
        $id = $rows['id'];
        $nombre = $rows['nombre'];
        $edad = $rows['edad'];

        $tr = '<tr>';
        $tr .= "<td>$nombre</td>";
        $tr .= "<td>$edad</td>";
        $tr .= "<td><button class='editar' data-id='$id'>Editar</button></td>";
        $tr = '</tr>';

        echo $tr;
    }
}
?>        
    </tbody>
</table>

Una vez elaborada la tabla, tenemos que hacer dos cosas: construir una función en JavaScript que se ejecute cuando se pulse cualquiera de los botones de las filas y que, tras ello, muestre un formulario con los datos que corresponden a la fila de tal botón. Para que el llamado a la función se dé al pulsar cualquier botón, en lugar de añadir un onclick="miFuncion()" en cada botón, voy a delegar el evento click al documento, de tal forma que, cuando este se produzca (cuando se dé un clic en cualquier parte del documento), se verificará si el elemento afectado por el evento (propiedad event.target) posee la clase editar, que es la que indiqué para cada botón. Una vez comprobado esto, procederé a tomar el ID del registro de la fila del botón (a través de la propiedad dataset para obtener el dato contenido en el pseudoatributo data-id) y, a continuación, mostraré el formulario para editar los datos:

document.addEventListener("click", event => {
    if (event.target.classList.contains("editar")){
        mostrarForm(event.target.dataset.id);
    }
}, false);

La función mostrarForm() será la encargada de cargar el formulario con los datos que corresponden al ID que se le ha pasado como argumento. Para esto, podemos hacer uso de la API Fetch (o bien del objeto XMLHttpRequest) con la finalidad de cargar el formulario por medio de una petición asíncrona y mostrarla en el lugar del documento que queramos. Digamos que tenemos un <div> cuyo id es output; en este espacio es en el que mostraremos el formulario de edición de datos:

function mostrarForm(id){
    fetch(`form.php?id=${id}`)
        .then(respuesta => respuesta.text())
        .then(formulario => document.querySelector("#output").innerHTML = formulario);
}

El archivo form.php recibirá el ID y con este procederá a realizar la búsqueda de los datos en la base de datos para posteriormente cargarlos en las respectivas cajas de texto y dejarlos listos para la edición:

<?php
$conexion = mysqli_connect('server', 'user', 'password', 'database');
//Para evitar ataques XSS y SQLi utilizo las funciones strip_tags() y mysqli_real_escape_string(), pero puedes emplear otros métodos
$id = mysqli_real_escape_string($conexion, strip_tags($_GET['id']));
$query = mysqli_query($conexion, "SELECT * FROM tbl_personas WHERE id = $id") or exit(mysqli_error($conexion));

if (mysqli_num_rows($query)){
    $datos = mysqli_fetch_assoc($query);
    $nombre = $datos['nombre'];
    $edad = $datos['edad'];

    $form = "<form action='guardar.php' method='post'>";
    $form .= '<div>';
    $form .= '<label>Nombre:</label>';
    $form .= "<input type='text' name='nombre' value='$nombre' />";
    $form .= '</div>';
    $form .= '<div>';
    $form .= '<label>Edad:</label>';
    $form .= "<input type='text' name='edad' value='$edad' />";
    $form .= '</div>';
    $form .= '<div>';
    $form .= "<input type='hidden' name='id' value='$id' />";
    $form .= "<input type='submit' value='Guardar' />";
    $form .= '</div>';
    $form .= '</form>';

    echo $form;
}
?>

Luego de haber realizado las ediciones respectivas, los datos serán enviados al archivo guardar.php, para lo cual podemos emplear otra petición asíncrona con la finalidad de que todo transcurra sin las siempre incómodas recargas de la página.

Primero, se delega el evento submit (que es el que se produce al momento de enviar los datos de un formulario para su procesamiento) al documento, se cancela la ejecución del mismo con el método preventDefault() (evitando, de esta manera, la recarga de la ventana) y se realiza la petición asíncrona, enviando los datos por medio de un objeto FormData:

document.addEventListener("submit", event => {
    event.preventDefault();

    let form = event.target,
        data = new FormData();

    data.append("id", form.id.value);
    data.append("nombre", form.nombre.value);
    data.append("edad", form.edad.value);

    fetch("guardar.php", {
        method: form.method,
        body: data
    })
    .then(respuesta => respuesta.json())
    .then(json => {
        if (json.estado == "ok"){
            ocultarForm();            
        }

        console.log(json.mensaje);
    });
}, false);

Notarás que, en la respuesta de la petición, recibo un objeto JSON con los atributos estado y mensaje. Estos serán establecidos en la respuesta que retornará el archivo guardar.php y que nos permitirán evaluar el estado del guardado de los datos:

<?php
$conexion = mysqli_connect('server', 'user', 'password', 'database');
$id = mysqli_real_escape_string($conexion, strip_tags($_POST['id']));
$nombre = mysqli_real_escape_string($conexion, strip_tags($_POST['nombre']));
$edad = mysqli_real_escape_string($conexion, strip_tags($_POST['edad']));
$query = mysqli_query($conexion, "UPDATE tbl_personas SET nombre = '$nombre', edad = '$edad' WHERE id = $id") or exit(mysqli_error($conexion));

if ($query){
    echo json_encode([
        'estado' => 'ok',
        'mensaje' => 'Los datos se guardaron satisfactoriamente'
    ]);
}
else{
    echo json_encode([
        'estado' => 'error',
        'mensaje' => 'No se pudieron guardar los datos'
    ]);
}
?>

Si todo ha marchado sin inconvenientes, los datos se actualizarán en la base de datos, mas no en la tabla del documento. Para remediar ello, tenemos que recargar los datos que se muestran en el cuerpo de la tabla, a la vez que ocultamos el formulario. Todo ello lo haremos con las funciones ocultarForm() y cargarDatos(). La primera buscará el formulario de edición de datos en el documento; de encontrarlo, lo removerá del mismo. La segunda, por medio de otra petición asíncrona, obtendrá los datos de la tabla en la base de datos y los mostrará en el cuerpo de la tabla del documento:

function ocultarForm(){
    let form = document.querySelector("form");

    if (form){
        form.remove();
        cargarDatos();
    }
}

function cargarDatos(){
    fetch("cargar.php")
        .then(respuesta => respuesta.text())
        .then(datos => document.querySelector("table tbody").innerHTML = datos);
}

Por último, solo nos queda elaborar el código del archivo cargar.php:

<?php
$conexion = mysqli_connect('server', 'user', 'password', 'database');
$query = mysqli_query($conexion, 'SELECT id, nombre, edad FROM tbl_personas') or exit(mysqli_error($conexion));
?>
<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
<?php
if (mysqli_num_rows($query)){
    while ($rows = mysqli_fetch_assoc($query)){
        $id = $rows['id'];
        $nombre = $rows['nombre'];
        $edad = $rows['edad'];

        $tr = '<tr>';
        $tr .= "<td>$nombre</td>";
        $tr .= "<td>$edad</td>";
        $tr .= "<td><button class='editar' data-id='$id'>Editar</button></td>";
        $tr .= '</tr>';

        echo $tr;
    }
}
?>        
    </tbody>
</table>

Como te habrás dado cuenta, se trata del mismo código que inicialmente empleé para dibujar la tabla, por lo que también podrías invocar esta función al momento de cargar el documento, evitando duplicar el código en cuestión:

document.addEventListener("DOMContentLoaded", cargarDatos, false);

Y dado que la tabla se cargará mediante una petición asíncrona, tenemos que modificar el código de la función cargarDatos para que el resultado de la carga se muestre dentro de algún elemento en específico, como puede ser otro <div> al que, en esta ocasión, le daré como id el valor tabla:

function cargarDatos(){
    fetch("cargar.php")
        .then(respuesta => respuesta.text())
        .then(datos => document.querySelector("#tabla").innerHTML = datos);
}

Todo junto quedaría así:

index.html (El archivo inicial en donde se mostrará la tabla):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Personas</title>
</head>
<body>
    <div id="output"></div>
    <div id="tabla"></div>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", cargarDatos, false);

        document.addEventListener("click", event => {
            if (event.target.classList.contains("editar")){
                mostrarForm(event.target.dataset.id);
            }
        }, false);

        document.addEventListener("submit", event => {
            event.preventDefault();

            let form = event.target,
                data = new FormData();

            data.append("id", form.id.value);
            data.append("nombre", form.nombre.value);
            data.append("edad", form.edad.value);

            fetch("guardar.php", {
                method: form.method,
                body: data
            })
            .then(respuesta => respuesta.json())
            .then(json => {
                if (json.estado == "ok"){
                    ocultarForm();            
                }

                console.log(json.mensaje);
            });
        }, false);

        function mostrarForm(id){
            fetch(`form.php?id=${id}`)
                .then(respuesta => respuesta.text())
                .then(formulario => document.querySelector("#output").innerHTML = formulario);
        }

        function ocultarForm(){
            let form = document.querySelector("form");

            if (form){
                form.remove();
                cargarDatos();
            }
        }

        function cargarDatos(){
            fetch("cargar.php")
                .then(respuesta => respuesta.text())
                .then(datos => document.querySelector("#tabla").innerHTML = datos);
        }
    </script>
</body>
</html>

cargar.php (El archivo que mostrará la tabla con los datos):

<?php
$conexion = mysqli_connect('server', 'user', 'password', 'database');
$query = mysqli_query($conexion, 'SELECT id, nombre, edad FROM tbl_personas') or exit(mysqli_error($conexion));
?>
<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
<?php
if (mysqli_num_rows($query)){
    while ($rows = mysqli_fetch_assoc($query)){
        $id = $rows['id'];
        $nombre = $rows['nombre'];
        $edad = $rows['edad'];

        $tr = '<tr>';
        $tr .= "<td>$nombre</td>";
        $tr .= "<td>$edad</td>";
        $tr .= "<td><button class='editar' data-id='$id'>Editar</button></td>";
        $tr .= '</tr>';

        echo $tr;
    }
}
?>        
    </tbody>
</table>

form.php (El archivo que contiene el formulario de edición):

<?php
$conexion = mysqli_connect('server', 'user', 'password', 'database');
$id = mysqli_real_escape_string($conexion, strip_tags($_GET['id']));
$query = mysqli_query($conexion, "SELECT * FROM tbl_personas WHERE id = $id") or exit(mysqli_error($conexion));

if (mysqli_num_rows($query)){
    $datos = mysqli_fetch_assoc($query);
    $nombre = $datos['nombre'];
    $edad = $datos['edad'];

    $form = "<form action='guardar.php' method='post'>";
    $form .= '<div>';
    $form .= '<label>Nombre:</label>';
    $form .= "<input type='text' name='nombre' value='$nombre' />";
    $form .= '</div>';
    $form .= '<div>';
    $form .= '<label>Edad:</label>';
    $form .= "<input type='text' name='edad' value='$edad' />";
    $form .= '</div>';
    $form .= '<div>';
    $form .= "<input type='hidden' name='id' value='$id' />";
    $form .= "<input type='submit' value='Guardar' />";
    $form .= '</div>';
    $form .= '</form>';

    echo $form;
}
?>

guardar.php (El archivo que guardará los datos de la edición):

<?php
$conexion = mysqli_connect('server', 'user', 'password', 'database');
$id = mysqli_real_escape_string($conexion, strip_tags($_POST['id']));
$nombre = mysqli_real_escape_string($conexion, strip_tags($_POST['nombre']));
$edad = mysqli_real_escape_string($conexion, strip_tags($_POST['edad']));
$query = mysqli_query($conexion, "UPDATE tbl_personas SET nombre = '$nombre', edad = '$edad' WHERE id = $id") or exit(mysqli_error($conexion));

if ($query){
    echo json_encode([
        'estado' => 'ok',
        'mensaje' => 'Los datos se guardaron satisfactoriamente'
    ]);
}
else{
    echo json_encode([
        'estado' => 'error',
        'mensaje' => 'No se pudieron guardar los datos'
    ]);
}
?>

De esta forma, podrás trabajar de una manera más ordenada, separando incumbencias y con un código más legible y fácil de mantener. De hecho, lo que he mostrado aquí se puede mejorar y refinar mucho más (se me ocurre mostrar el formulario en una ventana modal o bien a la derecha de la tabla, como querías. También podrías evitar ocultar el formulario y tan solo limpiar sus campos con el método reset(), trabajar con clases (quizá con frameworks); y si estás trabajando con más formularios y tablas en el mismo documento, lo mejor será que establezcas identificadores únicos para cada uno), pero he preferido dejarlo así con fines netamente didácticos para que la lógica detrás de toda la estructura quede clara. Ahora, te toca trasladar lo entendido a tu proyecto, sin olvidar en ningún momento que este es solo un ejemplo y que es tu responsabilidad el adaptar lo que veas conveniente a lo que necesitas.

Un saludo

3
  • Trabajo todo en dos páginas, el único uso de javascript que tengo es para abrir el div de las notas Commented el 1 jun. 2023 a las 6:08
  • @NovatoEnEsto Si deseas seguir usando dos archivos, puedes tener el formulario oculto en el archivo principal (como originalmente lo tienes), y con JavaScript harías el proceso de mostrar/ocultar el formulario, además de tomar los valores editados y mostrarlos en la fila de la tabla que corresponda al botón pulsado, para lo cual te seguiría sirviendo la delegación de eventos.
    – user255960
    Commented el 1 jun. 2023 a las 6:15
  • 1
    @NovatoEnEsto Olvidé mencionar que, del mismo modo en el que se puede trasladar los datos editados del formulario a la fila de la tabla, también se puede hacer el proceso inverso. Con la propiedad parentNode puedes acceder al ancestro de un elemento. En tu caso, puedes partir del botón pulsado y subir niveles hasta llegar a la fila. Una vez ahí, puedes obtener las celdas y sus valores. Con eso podrás tanto trasladar dichos valores al formulario como traer los valores editados en el formulario a la fila de la tabla.
    – user255960
    Commented el 1 jun. 2023 a las 6:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.