Como llamar this.form.action con javascript fuera del formulario

Question

Este formulario se encuentra dentro de una tabla, cada fila se carga con un while, los datos los trae desde una base de datos, todo funciona correctamente: pero ahora quiero hacer una validación con javascript sobre si desea modificar/eliminar un formulario, pero no sé como puedo referenciar este formulario, y luego de eso, como puedo hacer el llamado a this.form.action estando afuera de este formulario

Triby · Answer

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í ********** */ 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.

xelfury · Answer

Facil, solo agrega return al atributo onclick asi: agregale la pagina que va a procesar la forma asi:

Como llamar this.form.action con javascript fuera del formulario

2 Answers

Add your own answers!

Ask a Question