3

Tengo un formulario el cual mando datos a traves de un post pero a veces el servidor tarda en responder y si uno le da otra vez en el boton guardar me duplica la informacion como hago para que se deshabilite el boton guardar cuando ya se ha dado una vez clic en guardar? Encabezado del formulario:

form action="<?php echo base_url();?>movimientos/ventas/store" method="post" id="form-venta">

este es el boton:

<div class="form-group">
     <button type="submit" class="btn btn-success btn-flat">Guardar</button>
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-default2">Aplicar Descuento</button>
</div>
8
  • podrias usar algo como esto en tu boton submit: <input type="submit" value="grabar datos" id="btn_submit" onclick="javascript:document.getElementById('btn_submit').style.visibility = 'hidden';"> Commented el 25 jun. 2018 a las 15:57
  • y una vez que se ha grabado los datos para volver a mostrar el boton seria con esto: document.getElementById('btn_submit').style.visibility = 'visible'; Commented el 25 jun. 2018 a las 15:59
  • 1
    puedes verlo aqui: jsfiddle.net/vxcpgky0/4 Commented el 25 jun. 2018 a las 16:00
  • 1
    Cuidado. Ese es un problema típico, se va a presentar cuando un usuario haga recargar página e incluso cuando por configuración el usuario abra el navegador si lo tiene configurado a iniciar mostrando su último estado. De modo que la solución debe implementarse del lado del servidor controlando que los datos no se pisen y que no haya doble inserción de datos que se presumen nuevos. sólo son nuevos los no registrados nunca los que se creían nuevos al servir el formulario.
    – quevedo
    Commented el 25 jun. 2018 a las 16:21
  • 1
    lo que deberías usar es lo que te deje en la respuesta. $("button").prop("disabled", false);
    – vicasas
    Commented el 25 jun. 2018 a las 17:14

4 respuestas 4

3

La mejor opción por estática y UI es deshabilitar el botón al momento de hacer submit hasta que este se complete la solicitud.

Has pruebas en tus funciones javascript usando el siguiente script

$("button").prop("disabled", false);

Para volver a habilitar el botón basta con cambiar el false por un true

Coloca el siguiente código en tu archivo.

$(document).ready(function(){
    $("button").click(function(){
        $("button").prop("disabled", false);
    });
});

Lo que hara sera cuando el dom este listo ejecutara todo lo que esta dentro, pero al momento de hacer click en tu boton o al hacer un submit le agregara la propiedad disabled a este.

No se si lo estas utilizando con Ajax, si es así esto seria de otra forma.

Me avisas como te va con esto.

9
  • Como hago la funcion soy nuevo en esto de jQuery :(
    – WilsonicX
    Commented el 28 jun. 2018 a las 1:33
  • y como lo coloco en el html
    – WilsonicX
    Commented el 28 jun. 2018 a las 1:33
  • Tienes que crear un document.ready o bien una funcion onClick, te edito la respuesta en unos segundos
    – vicasas
    Commented el 28 jun. 2018 a las 12:37
  • Listo chequea lo que edite.
    – vicasas
    Commented el 28 jun. 2018 a las 12:41
  • Como seria con Ajax?
    – WilsonicX
    Commented el 16 jul. 2018 a las 17:20
3

Puedes evitarlo de la siguiente manera;

Creamos una funcion javascript;

enviando = false; //Obligaremos a entrar el if en el primer submit

function checkSubmit() {
    if (!enviando) {
        enviando= true;
        return true;
    } else {
        //Si llega hasta aca significa que pulsaron 2 veces el boton submit
        alert("El formulario ya se esta enviando");
        return false;
    }
}

Y en tu codigo HTML del formulario agregar lo siguiente;

onsubmit="return checkSubmit();"

Quedando algo como esto;

    enviando = false; //Obligaremos a entrar el if en el primer submit
    
    function checkSubmit() {
        if (!enviando) {
    		enviando= true;
    		return true;
        } else {
            //Si llega hasta aca significa que pulsaron 2 veces el boton submit
            alert("El formulario ya se esta enviando");
            return false;
        }
    }
    <form name="form2" method="post" action="#" onsubmit="return checkSubmit();">
    <div>
      <input type="text" name="mi_texto" required>
    </div>
    <div>
      <input type="submit" value="Enviar datos">
    </div>
    </form>

NOTA: Haz doble click rapidamente para que pruebes, si haces 1 solo click aca arrojara un error, esto lo puedes interpretar como 'submit valido'

0

Tengo una posible solución:

<form action="" onsubmit="enviar();">
  <input type="text" required>
  <button id="btn" type="submit">ENVIAR</button>
</form>
<script>
    function enviar(){
    var btn = document.getElementById('btn');
    btn.setAttribute('disabled','');
    alert('botón disabled');
  }
</script>

1
-1

Tambien puedes utilizar

$('#formulario')[0].reset();
1

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.