Para evitar usar eventos en línea (onclick="... código ..."
), que va a resultar en repetición por cada botón, es mejor crear funciones específicas y agregar "escuchadores" de evento para cada botón.
Con document.querySelectorAll()
obtienes todos los elementos que cumplan con la condición especificada, en este caso, será por la clase de los botones .results, .update y .delete.
Se recorren todos los botones y se asigna la función que se va a ejecutar cuando se haga clic en ellos. Cada función recibirá como parámetro el evento que "se lanzó", donde puedes obtener el elemento en que se hizo clic con event.target
y, desde ahí, llegar hasta el formulario al que pertenece.
Revisa los comentarios en el código para saber cómo funciona el resto de instrucciones.
// Obtener todos los botones por clase
let resBtn = document.querySelectorAll('.results');
let updBtn = document.querySelectorAll('.update');
let delBtn = document.querySelectorAll('.delete');
// Recorrer todos los botones para asignar evento onclick
resBtn.forEach(btn => btn.addEventListener('click', results));
updBtn.forEach(btn => btn.addEventListener('click', update));
delBtn.forEach(btn => btn.addEventListener('click', borrar));
// Para actualizar
function update(e) {
if (confirm("¿Seguro que quieres modificar esta encuesta? ")) {
// Obtener formulario, closest buscará el elemento especificado
// en la estructura superior
let form = e.target.closest('form');
// Asignar acción
form.action = 'survey-update.php';
} else {
// Respuesta negativa, se cancela el proceso de formulario
e.preventDefault();
}
}
// Para borrar
function borrar(e) {
if (confirm("¿Seguro que quieres eliminar esta encuesta? ")) {
let form = e.target.closest('form');
form.action = 'survey-back-delete.php';
} else {
// Respuesta negativa, se cancela el proceso de formulario
e.preventDefault();
}
}
// Para resultados
function results(e) {
let form = e.target.closest('form');
form.action = 'survey-results.php';
}
/* ********** Borra desde aquí... ********** */
// Solo para probar que se aplicaron los cambios
// Obtener todos los formularios y agregar evento onsubmit
let forms = document.querySelectorAll('form');
forms.forEach(frm => frm.addEventListener('submit', function(e) {
// Evitar que se procese
e.preventDefault();
// Verificar que se cambió la acción
console.log(frm.action);
}));
/* ********** ...hasta aquí ********** */
<form method='POST'>
<input class='results' type='submit' value='Resultados' />
<input class='update' type='submit' value='Modificar' />
<input class='delete' type='submit' value='Eliminar' />
</form>
<form method='POST'>
<input class='results' type='submit' value='Resultados' />
<input class='update' type='submit' value='Modificar' />
<input class='delete' type='submit' value='Eliminar' />
</form>
<form method='POST'>
<input class='results' type='submit' value='Resultados' />
<input class='update' type='submit' value='Modificar' />
<input class='delete' type='submit' value='Eliminar' />
</form>
Para poder hacer validaciones, dentro de cada función tienes el formulario y, desde ahí puedes usar .querySelector()
para obtener los campos y verificar que estén correctos, ejemplo, suponiendo que tienes un campo name="nombre"
:
// Para actualizar
function update(e) {
// Obtener formulario, closest buscará el elemento especificado
// en la estructura superior
let form = e.target.closest('form');
// Obtener valor del campo "nombre"
let nombre = form.querySelector('[name="nombre"]').value;
if(nombre == '') {
// Si hay error, no procesar el formulario
e.preventDefault();
// Mostrar el error
alert('Nombre no puede quedar vacío');
return;
}
if (confirm("¿Seguro que quieres modificar esta encuesta? ")) {
// Asignar acción
form.action = 'survey-update.php';
} else {
// Respuesta negativa, se cancela el proceso de formulario
e.preventDefault();
}
}
Seguramente debes aplicar otro tipo de validaciones, esto es solo un ejemplo.
onclick
que estás poniendo. Dificultan el mantenimiento y la comprensión/resolución de ciertos problemas. Si por algún motivo quisieras referirte al formulario fuera de él, lo cual ni siquiera es necesario para resolver este problema, puedes darle unid
y listo. Una forma más limpia de resolver esto sería dando una clase a cada tipo de botón, escuchar todos los clicks de los botones del form mediante eventos (no in line) y determinar por la clase el tipo de botón que fue pulsado para actuar en consecuencia.