0

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:

Tabla que carga formularios, con datos de la base de datos

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

<form method='POST'>

//aqui tengo inputs que contienen datos de la base de datos


/*Los inputs 'results, 'update' y 'delete', funcionan bien a través de "onclick="this.form.action=" 
pero al hacerlo así no hago validaciones en 'update' y 'delete', ahora quiero poder hacerlo y no 
logro como poder realizarlo*/
<input class='results' type='submit' onclick="this.form.action='survey-results.php'" value='Resultados' />

<input class='update' type='submit' onclick="update();" value='Modificar' />

<input class='delete' type='submit' onclick="this.form.action='survey-back-delete.php'" value='Eliminar' />

</form>


<script>

function update() {

  if (window.confirm("¿Seguro que quieres modificar esta encuesta? ")) { 
  
//aquí quiero poner el script que hace lo mismo que: this.form.action                                                    
      }
}

</script>

1
  • 1
    Evita usar funciones in line, como todos los 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 un id 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.
    – A. Cedano
    Commented el 22 jul. 2020 a las 7:55

2 respuestas 2

1

Facil, solo agrega return al atributo onclick asi:

<input class='update' type='submit' onclick="return update();" value='Modificar' />

agregale la pagina que va a procesar la forma asi:

<form method='post' action="procesa_forma.php">

y pon un if en la funcion javascript asi:

function update() {
   if (window.confirm("¿Seguro que quieres modificar esta encuesta?")) {
      return true;
   }
   else{
      return false;
   }
}

Explicacion: Si el usuario presiona OK el formulario se postea. Si presiona Cancel el formulario no se postea. Listo.

Ejemplo:

function update() {
   if (window.confirm("Do you really want to leave?")) {
      this.form.action = 'modificar.php';
      return true;
   } else {
      return false;
   }
}
<form method='post' action="procesa_forma.php">
   <input class='update' type='submit' onclick="return update();" value='Modificar' />
</form>

1

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.

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.