0

Estoy intentando enviar un formulario que está dentro de un modal mediante ajax y utilizar las validaciones de html5, pero al hacer esto y dar click en el botón de enviar me redirecciona a la página a dónde envió los datos del formulario.

<div class="modal fade" id="modalNuevo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Agregar Cargo/Cuota</h4>
      </div>
      <div class="modal-body">
      <form action="php/addEdoFinanciero.php" accept-charset="utf-8" method="POST" name="from_addEdoFinanciero" id="from_addEdoFinanciero">
          <label>Fecha del Cargo/Cuota:</label>
          <input type="text" name="date_add" id="datepicker1" class="form-control" required >
          <label>Concepto:</label>
          <input type="text" name="concepto_add" id="concepto" class="form-control input-sm" required >
          <label>Monto:</label>
          <input type="number" name="monto_add" id="monto" class="form-control input-sm" placeholder="100.00" required >
      </div>
      <div class="modal-footer">
      <button class="btn btn-primary" id="new_EdoFinanciero" >Enviar</button> 
      </div>
      </form>       
    </div>
  </div>
</div>

este es el código de javascript

if (from_addEdoFinanciero.checkValidity()){
$(function(){
 $("#new_EdoFinanciero").click(function(){
    //event.preventDefault();// Aqui evitamos que el formulario haga el submit
    var frmData = new FormData($("#from_addEdoFinanciero")[0]);/*elegimos el id del formulario y empieza desde la posicion 0*/
    $.ajax({
           type: "POST",
           url: "php/addEdoFinanciero.php",
           data: frmData, 
           contentType: false,
           processData: false,

            success:function(r){
                if(r==1){   
                    $('#modalNuevo').modal('hide');
                    $('.modal-backdrop').remove();
                    $('#tabla').load('componentes/tablaEdoFinanciero.php');//FUNCION PARA CARGAR LA TABLA 
                    alertify.success("Datos Enviados");
                }else {
                    if (r==2) {//si hubo error en los datos
                        $("#modalErrores").modal("show");
                        alertify.error("Error en los datos");
                    } else{
                        alertify.error("Fallo el servidor");
                    }
                }
            }
         });//cierra ajax

    return false; // Evitar ejecutar el submit del formulario.
 });//cierra funcion de click
});//cierra function
}

Mi pregunta es si se puede evitar que me mande a addEdoFinanciero.php, ya intente cambiar por input type="submit" y ocupar el preventDefault pero ocurre lo mismo. Este es el código de javascript que ya me funcionó para hacer lo que quiero, pero ahora después de dar click en enviar del formulario (se envian los datos y se quita el modal), si quiero volver a abrir el modal éste aparece y se quita de inmediato y se queda la pantalla oscura con la clase modal backdrop. ¿Alguna idea de porque?

  $(document).ready(function(){
 $("#new_EdoFinanciero").click(function(){
    if($("#from_addEdoFinanciero")[0].checkValidity()){
    //event.preventDefault();// Aqui evitamos que el formulario haga el submit
    var frmData = new FormData($("#from_addEdoFinanciero")[0]);/*elegimos el id del formulario y empieza desde la posicion 0*/
    $.ajax({
           type: "POST",
           url: "php/addEdoFinanciero.php",
           data: frmData, // Adjuntar los campos del formulario enviado.
           contentType: false,
           processData: false,

            success:function(r){
                if(r==1){   
                    $('#modalNuevo').modal('hide');//cerramos el modal de nuevo 
                    //$('body').removeClass('modal-open');
                    $('.modal-backdrop').remove();//para quitar la sombra del modal
                    $('#tabla').load('componentes/tablaEdoFinanciero.php');//FUNCION PARA CARGAR LA TABLA 
                    alertify.success("Datos Enviados");
                }else {
                    if (r==2) {//si hubo error en los datos
                        //$("#modalErrores").modal("show");
                        alertify.error("Error en los datos");
                    } else{
                        alertify.error("Fallo el servidor");
                    }
                }
            }
         });//cierra ajax
       return false; // Evitar ejecutar el submit del formulario.+
    }
});//cierra funcion de click

});
1
  • Hola, creo que puedes resolverlo de forma simple, coloca tu boton <button class="btn btn-primary" id="new_EdoFinanciero" >Enviar</button> fuera del formulario (osea debajo de </form>). Commented el 20 abr. 2018 a las 1:54

2 respuestas 2

0

Si mandas a traer primero tu checkValidity y dentro tu ajax, por alguna razón entra en conflicto el proceso y la ejecución del ajax no se termina de ejecutar, solo cambia el orden de las peticiones, primero manda a llamar tu evento click y dentro tu checkValidity, así funcionará

$(document).ready(function(){

$('#new_EdoFinanciero').click(function(){
    if($("#from_addEdoFinanciero")[0].checkValidity()) {
        var frmData = new FormData($("#from_addEdoFinanciero")[0]);/*elegimos el id del formulario y empieza desde la posicion 0*/
        event.preventDefault();// Aqui evitamos que el formulario haga el submit
        $.ajax({
               type: "POST",
               url: "php/addEdoFinanciero.php",
               data: frmData, 
               contentType: false,
               processData: false,

                success:function(r){
                    if(r==1){   
                        $('#modalNuevo').modal('hide');
                        $('.modal-backdrop').remove();
                        $('#tabla').load('componentes/tablaEdoFinanciero.php');//FUNCION PARA CARGAR LA TABLA 
                        alertify.success("Datos Enviados");
                    }else {
                        if (r==2) {//si hubo error en los datos
                            $("#modalErrores").modal("show");
                            alertify.error("Error en los datos");
                        } else{
                            alertify.error("Fallo el servidor");
                        }
                    }
                }
             });//cierra ajax
    }else console.log("invalid form");
});

});

Espero te sea de utilidad.

6
  • Si se ejecuta el código de javascript (mande un alert), pero cambiando el código como me dices no sirven las validaciones de html. Ese es el problema que tengo, si quito el checkValidity no sirven las validaciones de html5 pero si funciona el ajax; en cambio si dejo el checkValidity si funcionan las validaciones de html5 pero se recarga la página aunque mande los datos por ajax y por lo tanto no me sirven los alertify. Commented el 20 abr. 2018 a las 3:07
  • Antes de llamar el ajax podrías poner en un try el $('#from_addEdoFinanciero')[0].checkValidity(), si todo sale bien se ejecuta el ajax, de lo contrario no dejas continuar tu scrip Commented el 20 abr. 2018 a las 3:17
  • Actualice el código, después del evento click invoco el checkValidity(), prueba por favor Commented el 20 abr. 2018 a las 3:39
  • 1
    ya funcionó así, si manda los datos. Quite el de event porque no es tipo submit mi botón pero sirve igual. Ahora por alguna razón, despues de que doy click en enviar y querer volver a abrir el modal, se quita y se pone la pantalla oscura con la clase modal-backdrop, ¿Alguna idea porque? Commented el 20 abr. 2018 a las 3:51
  • Modifique mi publicación para mostrar como me quedo el código de javascript (el html se quedó igual) Commented el 20 abr. 2018 a las 3:59
0

Prueba quitando el comentario al script

//event.preventDefault();

A

event.preventDefault();

Y eliminando en el HTML la acción del formulario

<form action="php/addEdoFinanciero.php" ...>

Por

<form  ...>
9
  • Me funcionó parcialmente, ya no me envía al php pero me recarga la página, entonces los alertify no funcionan Commented el 20 abr. 2018 a las 2:33
  • Ok, entonces elimina completamente el action del formulario
    – TecniDEV
    Commented el 20 abr. 2018 a las 2:43
  • Me sigue recargando la página, quite el checkValidity y funciona bien el ajax (no recarga la pagina), pero al hacer esto no funcionan las validaciones de html5. No se si este utilizando mal el checkValidity Commented el 20 abr. 2018 a las 3:00
  • Usa $("#from_addEdoFinanciero")[0].checkValidity() como condicional dentro de la función $("#new_EdoFinanciero").click. Cuando valides, ahi si ejecutas el AJAX
    – TecniDEV
    Commented el 20 abr. 2018 a las 3:11
  • edite mi publicación para mostrarte como pongo el código, pero sigue igual, recarga la página. Commented el 20 abr. 2018 a las 3:25

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.