0

Buenas tardes,

Tengo un par problemas que no he podido solucionar a la hora de enviar el formulario con AJAX.

1. El formulario se envía varias veces si le das un click, y ya si le das todos los que puedas se enviar más veces todavía.

EL formulario se envía con una función en el submit

<button type="submit" class="btn btn-info" onClick="addSolInfo()">Enviar Solicitud de Información</button>

Esta es la función ajax:

function addSolInfo() {
    $(document).on('submit', '#solicitudinfo', function(e) {   
        e.preventDefault();
        e.stopPropagation();
        var data = $(this).serialize();

        $.ajax({            
            type : 'POST',
            url  : '../assets/webla/solicitudinfo.php',
            data : data,
            success :  function(data) {
                $('#nuevasolicitud').modal('hide');
                $("#result").html(data).fadeIn();
                getSolInfo();
            },
            complete: function(){
               setTimeout(function() {
               }, 15000);    
            }
        });
        return false;           
    });
}

He pensado que probablemente se deba a que lo estoy haciendo mal, ya que en el submit llamo a la función addSolInfo() y luego en la propia función le estoy diciendo también $(document).on('submit', '#solicitudinfo', function(e) para que lo envié cuando se pulse el submit, así que he probado a quitar esa parte pero deja de funcionar el formulario.

He probado también usando e.preventDefault(); e.stopPropagation(); pero tampoco funciona y estoy un poco perdido.

2. Al enviar el formulario, uso la función getSolInfo(); para recargar el CRUD con los datos pero además de duplicar la tabla (sale arriba todas las entradas, y abajo se vuelve a repetir), deja de funcionar el plugin DataTables y no filtra las entradas por cantidad (10, 25, 50, 100) si no que salen todas las entradas directamente.

Este es el AJAX de getSolInfo();

function getSolInfo() {
    $('#tBody').html('');
    $.ajax({            
        type : 'POST',
        url  : '../assets/webla/getsolicitudes.php',
        success :  function(data) {
            $('#tBody').append(data);
            $('#solicitudinfo').DataTable();
        },
        complete: function(){
           setTimeout(function() {
           }, 15000);    
        }
    });
    return false;
}

He probado insertando $('#tBody').html(''); para limpiar el tBody y después volverlo a imprimir, pero sigue dando los mismos problemas.

Este es el código HTML de la tabla:

<table class="table table-striped table-bordered table-hover" id="solicitudinfo" data-order='[[ 0, "desc" ]]'>
<script type="text/javascript">

    $(document).ready(function(){
        getSolInfo();
    });

</script>
    <thead>
        <tr>
            <th>ID</th>
            <th>Fecha</th>
            <th>Centro</th>
            <th>Nombre</th>
            <th>Curso</th>
            <th>Edad</th>
            <th>Contacto</th>
            <th>Etiquetas</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody id="tBody">

    </tbody>
</table>
13
  • Para la parte del formulario, yo, personalmente haría que en lugar de $(document) pusieras $("#idForm") o algo que haga referencia a ese formulario. Así al hacer submit, podrás buscar el botón que envía el formulario y deshabilitarlo y evitar así enviar más de una vez los datos (o lo puedes controlar con variables, como más te guste)
    – Zander
    Commented el 10 oct. 2017 a las 14:32
  • Charlie yo a veces he tenido ese problema, a veces por errores en el código, a veces por motivos que no me explico. Para mí es más seguro: (1). Enviar el formulario escuchando el evento click del botón, mediante su id. Ejemplo: $( "#btnActualizar" ).click(function(e) { suponiendo que el botón tenga el id btnActualizar. (2). En cuanto al formulario, lo mejor es identificarlo también por su id y serializarlo, Lo puedes hacer dentro del evento click del botón: e.preventDefault(); var data = $(this).closest('form').serializeArray(); a mi con eso me funciona de maravilla.
    – A. Cedano
    Commented el 10 oct. 2017 a las 14:46
  • Tienes dos preguntas distintas, sepáralas.. para poder responder una por una.
    – Ali
    Commented el 10 oct. 2017 a las 14:47
  • Ah, otra cosa, mis botones son del tipo button, los del tipo submit siempre han sido para mi un dolor de cabeza. Ejemplo del HTML que uso: <button id="btnActualizar" type="button">Actualizar</button> Por otra parte, para que la línea var data = $(this).closest('form').serializeArray(); me recoja todos los datos del formulario, el botón debe estar dentro de él, por supuesto.
    – A. Cedano
    Commented el 10 oct. 2017 a las 14:51
  • 1
    Si, @CharlieClewer sepáralas(fíjate que solo te están respondiendo la primera) las reglas dicen que debe ser una pregunta bien concisa, no solo "problema con envío" y agrupar todos tus problemas ahí. PD: También cambia el título a "Formulario se envía varias veces si le das un click".
    – Ali
    Commented el 10 oct. 2017 a las 16:15

1 respuesta 1

1

Yo he tenido a veces problemas parecidos a este y he resuelto ambas cosas escuchando el botón por su id.

Veamos:

HTML

Creamos el botón del tipo button y le quitamos el onclick. En cambio, le damos un id que debe coincidir con el código jQuery:

<form>
    <button id="btnEnviar" type="button" class="btn btn-info">Enviar Solicitud de Información</button>
</form>

jQuery

Cuando uses elementos del DOM, asegúrate que el mismo esté cargado. Para ello usaremos $(function() {. También, se recomienda usar al menos done y fail para controlar el resultado de las peticiones Ajax (success) es obsoleto desde jQuery3.

Por cierto, asegúrate de estar cargando tu librería jQuery en el documento, de lo contrario, todo esto sería inútil.

$(function() 
{ //Desde jQuery 3 document.ready es deprecated 
    $( "#btnEnviar" ).click(function(e) 
    {
        var data=$(this).closest('form').serializeArray(); 
        e.preventDefault(); 
        //código Ajax... 

        var request = $.ajax
            ({
                url: '../assets/webla/solicitudinfo.php',
                method: 'POST',
                data: data,
                dataType: "html"
            });

            request.done(function( data ) 
            {
                console.log(data);
                $('#nuevasolicitud').modal('hide');
                $("#result").html(data).fadeIn();
                getSolInfo();

            });

            request.fail(function( jqXHR, textStatus ) 
            {
                alert( "Request failed: " + textStatus );
            });

            request.complete(function() 
            {
               setTimeout(function() {
               }, 15000);    
            });

        return false; //¿?           
    });



    function getSolInfo() {
        $('#tBody').html('');

        var request = $.ajax
            ({
                url: '../assets/webla/getsolicitudes.php',
                method: 'POST',
                data: data,
                dataType: "html"
            });

            request.done(function( data ) 
            {
                console.log(data);
                $('#tBody').append(data);
                $('#solicitudinfo').DataTable();

            });

            request.fail(function( jqXHR, textStatus ) 
            {
                alert( "Request failed: " + textStatus );
            });

            request.complete(function() 
            {
               setTimeout(function() {
               }, 15000);    
            });

        return false; //¿?  
    }


});

PHP

Esa es otra historia. Depura lo que te dicen los console.log en caso de que las peticiones Ajax tengan éxito. A veces el problema está en que los archivos del lado del servidor no están funcionando de la manera esperada. Si tienes un alert entonces revisa la url de los archivos php o los archivos mismos.

Espero te sea útil.

2
  • Por lo que he probado, no llega a enviar los datos del formulario ni a insertarlos en la DB. Además de varios errores que estaba dando, como que no encontraba la función de getSolInfo() que ya he solucionado sacando la función fuera de la primera función.
    – Charlie
    Commented el 10 oct. 2017 a las 16:12
  • @CharlieClewer ¿El console.log no dice nada? ¿Seguro que los archivos PHP no tienen error? Si puedes revisa el error_log del servidor.
    – A. Cedano
    Commented el 10 oct. 2017 a las 16:14

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.