0

Estoy tratando de evitar que al dar N clicks a un botón se ejecute N veces la operación. Por ejemplo: si doy clic dos veces a un botón, se inserta dos veces a la base de datos. Lo que intenté hacer es que cuando de el primer click se deshabilite el botón, y sí lo deshabilita pero aunque esté deshabilitado ejecuta el submit. Les dejo el código que tengo:

HTML:

<button type="submit" id="btnAddState" name="btnAddState" class="btn btn-success col-sm-4 col-5 mx-1" onclick="myFunction()">Guardar</button>

JavaScript:

function myFunction() {
      if ($('#name').val() !== undefined && $('#name').val().trim() == '') {
            alert('Ingresá un Nombre');
            return;
      }
      $('#btnAddState').addClass("disabled");
}

Gracias de antemano!!

2
  • Hola, intenta deshabilitarlo por atributo, no como clase para que deje de aceptar clicks. el 2 oct. 2021 a las 18:07
  • Hola, así como comentas sí me lo deshabilita pero no me ejecuta ninguna acción el 2 oct. 2021 a las 18:12

2 respuestas 2

2

yo hago uso de esta función para resolver el problema que tu indicas

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

function checkSubmit() {
  if (!enviando) {
   enviando= true;
   return true;
 } else {
   return false;
 }
}
1

Te comparto como yo lo haría con jquery, capturaría el evento click del botón y ahí valido el formulario, si todo ok, desabilito el botón y disparo el submit. Espero te sirva.

$('#btnAddState').on('click', function(e){
  e.preventDefault(); // Para evitar se dispare el submit

  // Aplicas tus validaciones
  if ($('#name').val() !== undefined && $('#name').val().trim() == '') {
      alert('Ingresá un Nombre');
      return;
  }

  $(this).prop('disabled', true); // Desactivas el botón
  $(this).submit(); // Disparas el submit una vez desactivado el botón
});


// Esto solo para mostrar que el submit no se envía mas de una vez
$('form').on('submit', function(){
  console.log('send'); 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
    <button type="submit" id="btnAddState" name="btnAddState" class="btn btn-success col-sm-4 col-5 mx-1">Guardar</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.