¿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
$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="miFunction()"
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
//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");
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 .= "<input type='text' name='nombre' value='$nombre' />";
$form .= '</div>';
$form .= '<div>';
$form .= "<input type='text' name='edad' value='$edad' />";
$form .= '</div>';
$form .= '<div>';
$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
$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");
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
$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', 'host', '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', 'host', 'password', 'database');
$id = mysqli_real_escape_string($conexion, strip_tags($_GET['id']));
$query = mysqli_query($conexion, "SELECT * FROM tbl_personas WHERE id = $id");
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 .= "<input type='text' name='nombre' value='$nombre' />";
$form .= '</div>';
$form .= '<div>';
$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', 'host', '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");
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()
; 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