Necesito deshabilitar el botón de submit , cuando se hace clic en el botón y necesito habilitarlo después de 10 minutos .
Uso el local storage para almacenar el valor.
El problema es que una vez recargada la página. No pude ver el botón Submit desactivado. No estoy seguro, por qué sucede .
HTML:
<form method="post" action="someURL"> <input type="submit" id="btnSubmit" /> </form>JS:
const Button = document.querySelector("#btnSubmit"); Button.addEventListener("click", () => { Button.disabled = true; localStorage.setItem("only_once", "true"); setTimeout(() => { Button.removeAttribute('disabled'); }, 60000); }); if (!localStorage.getItem("only_once")) { Button.removeAttribute('disabled'); } Necesito desactivar el button durante 10 minutos , incluso después de recargar la página.
¿Alguien podría ayudar? Muchas gracias.
Cuando la página se descarga durante la actualización, el identificador de su setTimeout() se destruirá y, por lo tanto, nunca ocurrirá.
Si desea que esta lógica cruce los límites de carga de la página, deberá usar una lógica alternativa. Un ejemplo de esto sería almacenar la fecha/hora exacta en que se debe volver a habilitar el botón, luego, cuando la página se carga, use un intervalo de retraso de 1 segundo para verificar si ese tiempo ha pasado. Si no, deshabilite el botón, si lo tiene, habilite el botón y cancele el intervalo.
const button = document.querySelector("#btnSubmit"); const buttonExpirationDataKey = 'button-disabled-expiration'; let startButtonStateCheck = () => { button.dataset.interval = setInterval(updateButtonState, 1000); } let updateButtonState = () => { let expirationDate = new Date(button.dataset.enabledAt); if (expirationDate < new Date()) { button.disabled = false; clearInterval(button.dataset.interval); } else { button.disabled = true; } } let buttonDisableExpiration = localStorage.getItem(buttonExpirationDataKey); if (!buttonDisableExpiration) { // no button state in localStorage, enable button button.disabled = false; } else { // button state held in localStorage, check every 1s for expiration to enable the button again button.dataset.enabledAt = buttonDisableExpiration; updateButtonState(); startButtonStateCheck(); } button.addEventListener("click", () => { button.disabled = true; let now = new Date(); let expirationTime = 1000 * 10; // 10 seconds for this demo let expirationDate = new Date(now.getTime() + expirationTime); localStorage.setItem(buttonExpirationDataKey, expirationDate); button.dataset.enabledAt = expirationDate; startButtonStateCheck(); });Aquí hay un ejemplo de trabajo en un jdFiddle , ya que los fragmentos SO están en un espacio aislado y no permiten el acceso a localStorage. Para ver cómo funciona el efecto, haga clic con el botón derecho en la ventana inferior derecha y elija 'Recargar marco'. El botón permanecerá deshabilitado y se habilitará cuando pase la fecha de vencimiento establecida. Tenga en cuenta que hice que el tiempo de caducidad sea de 10 segundos en la demostración para que el efecto sea más fácil de probar, pero esto se puede cambiar fácilmente.
También vale la pena señalar en este punto que si su plan es mantener la lógica de verificación de tiempo en el lado del cliente, será ridículamente fácil de eludir. Asegúrese de que la lógica comercial del lado del servidor valide el intervalo de tiempo entre la solicitud actual y la última solicitud legítima de los usuarios.
No puedo comentar, así que publicaré aquí,
Necesita obtener los elementos del formulario y evitar el valor predeterminado