Why Button disabled is not working after the page reload?-CodePudding

I need to disable the submit button , When the button is clicked and need to enable it after 10 minutes.

I use the local storage to store the value.

The problem is, once the page is reloaded. I could not see the Submit button disabled. Not sure ,why it happens.

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');
       }

I need to disable the button for 10 minutes, even after the page is reloaded.

Could anyone please help? Many thanks.

CodePudding user response：

When the page is unloaded during the refresh the handle to your setTimeout() will be destroyed and so it will never occur.

If you want this logic to cross page load boundaries you will need to use alternative logic. An example of this would be to store the exact date/time the button should be re-enabled, then when the page loads use a 1 second delay interval to check if that time has passed. If not, disable the button, if it has, enable the button and cancel the interval.

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();
});

Here's a working example in a jdFiddle, as SO snippets are sandboxed and disallow access to localStorage. To see the effect working, right click the lower right window and choose 'Reload frame'. The button will remain disabled, and will enable when the set expiration date passes. Note that I made the expiration time 10 seconds in the demo to make the effect easier to test, but this can easily be changed.

It's also worth noting at this point that if your plan is to keep the time-checking logic on the client-side it will be ridiculously easy to bypass. Make sure your server-side business logic validates the time interval between the current request and the users last legitimate request they made.

CodePudding user response：

I cant comment so I'll post here ,

You need to get the form elements and prevent default