Ejecutar una función cuando finace la otra antes de un submit

Question

En un formulario tengo en el evento onsubmit dos funciones: onsubmit="recalcularIVA();return validar_factura(this)" quiero que antes de lanzar el submit pimero recalcule el iva y luego valide la factura, no estoy seguro si es correcta la forma que lo pongo, es decir ¿la funcion validar_factura se lanzara despues de que termine recalcular iva? ¿o existe riesgo de que validar_factura se inicie sin haber finalziado la funcion recalcualr_iva? y si es asi ¿cual seria la forma correcta para asegurarme que finalzia la piemr aantes de ejecutar la segunda?

Gracias

Hola Jorge, bienvenido a SOes. Te recomiendo leer [ask], hacer el [tour] (y ganar así tu primera medalla) y aprender a hacer un [mcve]. — Kiko_L, Feb 12 '19 at 12:30
No entiendo bien cómo tienes montada tu lógica. Pero te recomiendo que **ahorres acciones inútiles al cliente desactivando los botones**. O sea, mientras el formulario no esté validado mantén el botón desactivado. Esto se puede hacer perfectamente escuchando los eventos que cambian los elementos. Dado que no muestras nada del contexto no puedo ser más concreto en mis afirmaciones... — A. Cedano, Feb 12 '19 at 12:33

Ivan Isayenko · Answer 1 · 2019-02-12T14:27:53.640

2

Te propongo lo siguiente. Si quieres esperar antes de validar el formulario que te recalcule el IVA, utiliza Promise() que te da la opción simular una función sincrónica. Quedaría algo así:

function recalcularIVA (){
  return new Promise(function (resolve, reject) {
    //aquí los métodos o la función necesaria para recalcular IVA
    //si se ha hehco todo bien
    //resolve("recalculado");
    //o
    resolve(true);

    //si no se ha hehco todo bien
    //reject("no reclaculdao");
    //o
    //reject(false);
    //reject es para indicar que el metodo no ha ido bien, 
    //si quieres utilizalo, no es obligatorio
  });
}

function validarFactura(){
  //Aquí le estas obligando a que espere hasta que acabe el recalculo de IVA
  recalcularIVA().then(function (response) {
    //si todo correcto, haz tus métodos para validar el form
  }, function(error){
    //no se hizo algo bien en el calculo del IVA
  });
}

Como ves es bastante fácil y la herramienta de Promise() es muy útil. Espero que te sirva.

edited Feb 12 '19 at 14:27

answered Feb 12 '19 at 13:35

Ivan Isayenko

834
3
8

Igual sigue siendo asíncrona. – Gabriel Jeremy Rodriguez River Feb 12 '19 at 14:13
@GabrielJeremyRodriguezRiver en que te basas para decir que sigue siendo asíncrona? yo creo que no – Ivan Isayenko Feb 12 '19 at 14:15
La llamada sigue siendo asíncrona pero el comportamiento simulado es síncrono ya que hasta que no se resuelva la `Promise` no se va a ejecutar lo que el usuario desea (en este caso la validación del formulario). – Kiko_L Feb 12 '19 at 14:21
@Kiko_L exacto! – Ivan Isayenko Feb 12 '19 at 14:22
https://es.stackoverflow.com/questions/64265/qu%C3%A9-es-una-promesa-en-javascript/64403#64403 – Kiko_L Feb 12 '19 at 14:23
Pues, como dice la documentación es lo mismo, pero le añade pros, puedes sincronizar varias peticiones en una sola función de terminación o error, te agrega funciones estándar (then, done, fail) y otras mas que no me acuerdo, pero sigue siendo asíncrona, puedes leer más [aquí](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Usar_promesas) – Gabriel Jeremy Rodriguez River Feb 12 '19 at 14:26

score 0 · Answer 2 · answered Feb 12 '19 at 15:12

Saludos porque no intentas algo como esto:

<form action="" method="POST" id="miFormulario">
  producto:
  <input type="text" id="producto" value="test"><br>
  PRECIO:
  <input type="text" id="valor" value="1.50"><BR>
  IVA:
  <input type="text" id="iva" value="0.25">
  <input type="submit" value="Aceptar" onclick="recalcularIVA(event);">
</form>
<script>
function recalcularIVA(event){
    event.preventDefault();
  //calculo deseado
  //...
  //...
  miSiguienteFuncion();
}//end function recalcularIVA

function miSiguienteFuncion(){
 //lo que sea
 //..
 //...
 var r = confirm("Desea enviar su factura ?");
 if (r == true) {
    document.getElementById("miFormulario").submit();
 } else {
   alert('Factura no enviada');
 } 
}//end function miSiguienteFuncion
</script>

si te fijas primero envio a una funcion recalcularIVA, al terminar la misma llamo a otra funcion .. y mediante una confirmacion hago el submit mediante un id del form..es una forma pero hay muchas mas..!!

score 0 · Answer 3 · answered Feb 12 '19 at 15:20

Supon que quieres validar la forma antes de enviarla; en lugar de la validacion que agregue puedes sustituir por la que tu requieras

<form id="signUpForm">
 email: <input type="email" id="emailField" required>
  <button id="okButton" >OK</button>
</form>

<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const okButton = document.getElementById('okButton');

  
okButton.addEventListener('click', function (event) {
//agregas tu funcion a ejecutar
isValidEmail = emailField.checkValidity();
 if ( isValidEmail ) {
     signUpForm.submit();
  } else {
 return false;
  }

});
</script>

Ejecutar una función cuando finace la otra antes de un submit

3 Answers3