Como desactivar un botón con JavaScript

En este mundo hay gente que le cuesta mucho esperar. No quieren esperar a recibir o enviar algo ni 5 segundos y esto puede hacer que tu aplicación o formulario pueda fallar por no considerar la existencia de este tipo de individuos, ya que estos suelen pulsar los botones repetidamente si entienden que no ha funcionado a la primera y tu como programador tienes que evitar que se envíen peticiones múltiples para no saturar un servidor.

Bien es cierto que es importantísimo que tu página web cargue rápido y brinde la información al usuario en el mínimo tiempo posible pero en algunos casos es inevitable tener que hacer que el usuario espere unos instantes para facilitarle una información.

Por ese motivo, en este artículo quiero ofrecerte 2 posibilidades para desactivar un botón con JavaScript mientras se ejecuta un proceso.

Acompañado a esto, siempre es bueno mostrar al usuario algo que indique que debe esperar un momento para procesar su petición.

Este proceso puede ser el registro en base de datos de una información concreta, la subida de un archivo o la obtención de algún dato que el usuario solicita, entre otras muchas funciones que puede realizar una página Web.

Entiende que esto te va a resultar útil siempre que la información vaya a ser procesada de forma asíncrona ya sea con Ajax, Fetch o cualquier otra forma que conozcas para buscar, recoger o enviar información al servidor sin cargar la página.

Desactivar botón con el evento «click»

En tu archivo HTML puedes incorporar un botón de la siguiente forma:

Source code

<button id="myButton" class="btn btn-primary">Pulsar</button>

Luego, en tu archivo JavaScript o dentro de un etiqueta <script> puedes hacer lo siguiente:

Source code

const myButton = document.getElementById('myButton');
 
myButton.addEventListener('click', function() {
    myButton.disabled = true;
    myButton.style.opacity = 0.7;
    myButton.textContent = 'Ejecutando proceso...';
 
    //simulación de espera para ejecución de un proceso
    setTimeout(function() {
        myButton.textContent = 'Pulsar';
        myButton.style.opacity = 1;
        myButton.disabled = false;
    }, 5000);
});

El elemento botón con identificador «myButton» lo obtenemos con getElementById().

Luego, con el evento «click» de este botón desactivo el botón, le aplico un estilo para darle una opacidad de 0.7, cambio el texto del botón para que en el momento de ejecución indique «Ejecutando proceso…» y, finalmente, utilizo setTimeOut para simular la ejecución del proceso durante 5 segundos para ver el efecto.

Después de transcurrir esos 5 segundos, vuelvo a activar el botón, cambiar el texto del mismo para que muestre «Pulsar» y vuelvo a poner una opacidad de 1 para que se muestre sin opacidad.

En una ejecución por Ajax o Fetch, en el success o respuesta de la operación deberás incorporar esto último para que justamente después de finalizar la operación se restablezca el botón.

Desactivar botón con el atributo «onclick»

Otra opción para desactivar el botón no menos interesante es crear una función en el código JavaScript y llamarla en el atributo «onclick» del elemento button.

En este caso, puedes crear el botón de la siguiente forma:

Source code

<button id="myButton2" class="btn btn-primary" onclick="executeProcess()">Pulsar</button>

Y en el JavaScript crear la siguiente función:

Source code

function executeProcess() {
    const myButton = document.getElementById('myButton2');
    myButton.disabled = true;
    myButton.style.opacity = 0.7;
    myButton.textContent = 'Ejecutando proceso...';
 
    //simulación de espera para ejecución de un proceso
    setTimeout(function() {
        //console.log('Espera por favor...');
        myButton.textContent = 'Pulsar';
        myButton.style.opacity = 1;
        myButton.disabled = false;
    }, 5000);
}

Se trata del mismo código pero dentro de una función y sin usar el event «click» con addEventListener().

Conclusiones

Aunque no lo creas hay usuarios muy impacientes que desesperadamente suelen pulsar botones varias veces con la intención de acelerar la respuesta pero, lamentablemente, el resultado no será el que desean y esto puede conllevar a sus frustración.

Por eso, puede ser verdaderamente importante considerar este pequeño detalle para hacer que la visita de cualquier usuario a tu sitio web sea más agradable.

Está claro que lo que se comenta en este artículo es un pequeño detalle que puede resultar hasta insignificante pero, te aseguro que en los detalles vas a marcar la diferencia.

Te he estado hablando de 2 formas de conseguir este efecto de desactivar el botón cuando se ejecuta un proceso. Con addEventListener y el evento «click» o con el atrubuto «onclick» en el mismo botón.

Las 2 opciones son buenas y funcionan pero, mi experiencia me dice que debo confiar más en el segundo método más funcional ya que cuando ejecutas eventos dentro de otros eventos, en algunos casos addEventListener no funciona.

Usando el atributo «onclick» llamando a una función siempre funciona.

Ver demo Descargar