0

que tal? Estoy teniendo un pequeño inconveniente con una aplicacion que estoy realizando y es que tengo una funcion llamada GuardarDatos(), esta funcion lo que hace es que guarda ciertos datos que tengo en un formulario html mediante AJAX. El problema que estoy teniendo es que esta funcion en ocasiones (cuando le provoca), me ingresa el mismo reegistro hasta dos y tres veces en la base de datos (duplica el mismo registro pero con IDs diferentes).

Leyendo un poco intente hacer lo siguiente:

beforeSend: function () {
                      $("#botonGuardar").prop("disabled",true);
                },
                success:  function (response) {
                     $("#botonGuardar").prop("disabled",false);

                }   

Sin embargo sigue haciendo lo mismo en ocasiones.

El codigo de la funcion GuardarDatos() es el siguiente:

 <!DOCTYPE html>
<html>
<head>
<title>Pruebas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="nombre" id="nombre">
<input type="text" name="apellido" id="apellido">
<input type="text" name="cedula" id="cedula">
<button onclick="GuardarDatos();" id="botonGuardar">Guardar</button>

<script type="text/javascript">


    function GuardarDatos(){
        var nombre = $("#nombre").val();
        var apellido = $("#apellido").val();
        var cedula = $("#cedula").val();
        var parametros = {
                "nombre" : nombre,
                "apellido" : apellido,
                "cedula" : cedula
        };
        $.ajax({
                data:  parametros,
                url:   'confirmar.php',
                type:  'post',
               beforeSend: function () {
                      $("#botonGuardar").prop("disabled",true);
                },
                success:  function (response) {
                     $("#botonGuardar").prop("disabled",false);

                }    
        });
}
</script>
</body>
</html>

Agradesco mucho su ayuda.

6
  • Puedes publicar desde donde se llama esta funcion?
    – jolsalazar
    Commented el 24 jun. 2019 a las 19:17
  • Exactamente a que te refieres? Solo tengo un formulario y un boton que dice GuardarDatos que llama a esa funcion.
    – Carlos
    Commented el 24 jun. 2019 a las 19:18
  • claro, el codigo del formulario, el cual llama a esta funcion
    – jolsalazar
    Commented el 24 jun. 2019 a las 19:31
  • Edité la pregunta con el codigo fuente de la pagina que llama a esa funcion .
    – Carlos
    Commented el 24 jun. 2019 a las 19:43
  • Hola Carlos qué tal? encontraste la solución?, ahora en este momento estoy teniendo el mismo problema
    – Victor
    Commented el 14 mar. 2022 a las 22:40

2 respuestas 2

0

qué bueno que seas parte de la comunidad.

Es muy probable que la versión de jquery tengas inconvenientes, pero acá te propongo una solución que tu servidor a creado:

    <!DOCTYPE html>
       <html>
         <head>
           <title>Pruebas</title>
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        </head>
     <body>
          <form id="formDatos" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        Nombre: <input type="text" name="nombre" id="nombre" required="">
        Apellidos: <input type="text" name="apellido" id="apellido" required="">
        Cédula: <input type="text" name="cedula" id="cedula" required="">
        <button type="submit" name="submit" id="botonGuardar">Guardar</button>
    </form>
    <div id="response"></div> 
    <script type="text/javascript">

        //FORMULARIO DE ENVIO DE DATOS
        //Para aprovechar las validaciones de HTML5, hacemos que sea la llamada de un 
       //formulario y no de un evento onclick en el botón.

        var datosPersForm = $('#formDatos'); //Declaramos una variable formulario
        datosPersForm.on('submit', function (ev) {
            ev.preventDefault();
          //Capturas los datos, podrías utilizar el método serialize(), pero así está 
         // bien
            var nombre = $("#nombre").val();
            var apellido = $("#apellido").val();
            var cedula = $("#cedula").val();
            var parametros = {
                "nombre": nombre,
                "apellido": apellido,
                "cedula": cedula
            };
            $.ajax({
                data: parametros,
               //Acá tu archivo php que procesa los datos: confirmar.php
                url: 'confirmar.php', 
                type: 'post',
                beforeSend: function () {
                    $("#botonGuardar").html('Espere...').attr('disabled', 'disabled'); //Deshabilitas el botón para evitar el inconveniente que se tiene.
                },
                success: function (response) {
                    $("#botonGuardar").html('Guardar').removeAttr('disabled');//Habilitar de nuevo
                    //                      window.location = "confirmar.php"; //En este punto lo redireccionas a una ruta en específico
                    //o bien, limpias los campos:
                    $("#nombre").val("");
                    $("#apellido").val("");
                    $("#cedula").val("");
                      //Le muestras la confirmación de datos ingresados
                    $("#response").html(response);


                }
            });
        });
    </script>
</body>

Lo siguiente es recomendable que valides las entradas del lado del servidor, por razones didácticas las muestro así:

     if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        echo '<hr>';
        echo "Datos ingresados: ";
        echo '<br>';
        echo "Nombre: " . $_POST["nombre"];
        echo '<br>';
        echo "Apellido: " . $_POST["apellido"];
        echo '<br>';
        echo "Cédula: " . $_POST["cedula"];
     }

Si no deseas valores duplicados, debes validar como valor único al menos la cédula en la base de datos.

0

Hola un gusto saludarte,

Normalmente si envias un formulario via ajax con la propiedad submit debes agregar un return false despues de ejecutar ajax.

Te dejo un ejemplo con tu código:

<!DOCTYPE html>
<html>
<head>
<title>Pruebas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <form id="form" action="confirmar.php" method="post">
<input type="text" name="nombre" id="nombre">
<input type="text" name="apellido" id="apellido">
<input type="text" name="cedula" id="cedula">
<button type="submit" id="botonGuardar">Guardar</button>
</form>
<script type="text/javascript">


    $("#form").submit(function() {
        $.ajax({
            type: $(this).prop("method"),
                url: $(this).prop("action"),
                data: $(this).serialize(),
               beforeSend: function () {
                      $("#botonGuardar").prop("disabled",true);
                },
                success:  function (response) {
                     $("#botonGuardar").prop("disabled",false);

                }    
        });
        return false;
});
</script>
</body>
</html>

Que sucede: el formulario al pulsar el boton de submit este ejecuta el form y el ajax, para evitar que se envie el formulario como tal y solo se envie mediante el ajax debes indicarle que retorne false.

Espero haber podido ayudarte o guiarte en tu solución, saludos..

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.