1

I have a button with an "onclick" function that disables the button for 15 seconds. After that it will be automatically clickable, but in between 15 seconds of time period after a click, if I do refresh the page, it doesn't count the remaining seconds and the button is now clickable.

function up(){
    $(document).ready(function () {
          $("#upside").attr("disabled", true);
          document.getElementById("downside").disabled = true;
            setTimeout(function () {
              $("#upside").removeAttr("disabled");
              $("#downside").removeAttr("disabled");
              window.location ='/Balnce_add';
                  },15000);
  });
    }

And here is my HTML button code:

<button id="upside" onclick="up()" type="submit" class="btn btn-success">Up</button>
TylerH
  • 20,799
  • 66
  • 75
  • 101
LEGENDRYzZzZ
  • 115
  • 1
  • 8
  • 3
    There's no need to use `$(document).ready()` inside an event handler like that. And when the page is refreshed, everything about the previous page will be gone; nothing survives that transition, including your timeout handler. – Pointy Sep 22 '21 at 16:47
  • [This](https://stackoverflow.com/questions/3527041/prevent-any-form-of-page-refresh-using-jquery-javascript) is worth reading regarding that. – Rob Moll Sep 22 '21 at 16:48
  • so sir how do i prevent this thing please it very important for me – LEGENDRYzZzZ Sep 22 '21 at 16:48
  • 4
    If you want information to persist between page reloads, save it in `sessionStorage`. When you disable the button, save the start time in session storage. When the page reloads, get the start time from session storage, disable the button if it's <15 seconds since then, and start another timer to re-enable the button. – Barmar Sep 22 '21 at 16:54

2 Answers2

2

The idea is save the startTime to localStorage. And then when we reload page, we will get the remainingTime = startTime + timer - currentTime. If remainingTime > 0, we will keep disable the button. If not, we do nothing.

And based on that idea, I updated your code to let it works. You can check the demo by the below code:

<html>
   <head>
      <title>Demo</title>
   </head>
   <body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <button id="upside" onclick="up(true)" type="submit" class="btn btn-success">Up</button>
      <script>
         function getRemainingTimer(isNew) {
           var now = new Date();
           var timer = 15000;
           var remainingTimer = 0;
           var startTime = localStorage.getItem("startTime");
           if (startTime === null) {
             if (!isNew) return 0;
             localStorage.setItem("startTime", now.getTime());
             remainingTimer = timer;
           } else {
             remainingTimer = timer + parseInt(startTime) - now.getTime();
           }
           
           return remainingTimer;
         }
         
         
         
         
         function up(isNew) {
          
         var remainingTimer = getRemainingTimer(isNew);
         console.log(remainingTimer);
         
         if (remainingTimer > 0) {
           $("#upside").attr("disabled", true);
           $("#downside").attr("disabled", true);
           
           var timeout = setTimeout(function() {
             $("#upside").removeAttr("disabled");
             $("#downside").removeAttr("disabled");
             window.location = '/Balnce_add';
            
            localStorage.removeItem("startTime");
            
           }, remainingTimer);
         } else {
           localStorage.removeItem("startTime");
         }
         
         }
         
         up(false);
         
      </script>
   </body>
</html>

Also, you can check the live demo at https://codepen.io/tuandaodev/pen/NWgBjbv

Tuan Dao
  • 2,647
  • 1
  • 10
  • 20
  • hey your demo code is working absolutely fine but when I tried in my file it shows the same problem, after refreshing it get enabled it done not count reaming time to enable it – LEGENDRYzZzZ Sep 23 '21 at 04:20
  • can you please help me with that what could be the problem – LEGENDRYzZzZ Sep 23 '21 at 04:21
  • Done my friend it started running abolutly fine in my file also Really very thankful of you . – LEGENDRYzZzZ Sep 23 '21 at 04:54
  • if I have a down button also which has to open URL /Balance_sub with the same 15 seconds, then how I should format the code. I tried putting this function below Up(isnew) with name down(isnew),but it was again calling up(isnew) if we reload while down is already clicked. Can you please help me with this problem? – LEGENDRYzZzZ Sep 26 '21 at 12:10
  • @LEGENDRYzZzZ so you want another timer for a down button? – Tuan Dao Sep 26 '21 at 13:20
  • 1
    @LEGENDRYzZzZ I have another version for you with the down button. Please let me know if it suits your requirements. https://codepen.io/tuandaodev/pen/powQgYj – Tuan Dao Sep 26 '21 at 13:36
  • Yes , by the way you said you have updated here but I don't seem any differece – LEGENDRYzZzZ Sep 26 '21 at 14:37
  • 1
    @LEGENDRYzZzZ did you see in the new codepen URL? – Tuan Dao Sep 26 '21 at 14:40
  • ok, sir here small need can please disable both button whatever clicked up or down for 15 sec and then enable both after 15 seconds. – LEGENDRYzZzZ Sep 26 '21 at 15:06
  • Yes, it works!! you're amazing. Actually, I practice backend (spring) hence HTML/JS seems to be a puzzle every time when I work. But you solved it like an angel. Thank you so much! Let's stay connected :) – LEGENDRYzZzZ Sep 26 '21 at 15:18
  • 1
    @LEGENDRYzZzZ That's my pleasure to help you. I'm a newbie on StackOverflow, also. – Tuan Dao Sep 26 '21 at 15:21
  • Hey Tartarus can please do lill help kindly change when button for up and down is clicked it perform /Balance_add and /Balance_sub first then blocks button for 15sec and for 15sec both button will be blocked – LEGENDRYzZzZ Sep 27 '21 at 14:31
1

It depends on how the app is setup, but an easy way to do it would be to store something in localhost with the ID of the button was clicked.

myButton.addEventListener('click', (evt) => {
  evt.preventDefault();
  let dateTime = new Date();
  localStorage.setItem('clickedButtons', [{id: myButton.id, clickedAt: dateTime}]
});

$(document).ready(() => {
  let storageButton = localStorage.getItem('clickedButtons')[0];
  let dateTime = new Date();
  if (dateTime - storageButton.clickedAt < 15000) {
    let btn = $(`#${storageButton.id}`);
    btn.attr('disabled') = true;
  }
})

I wrote this pretty quickly so it's probably a bit rough, but the general idea is when the button is clicked, add something to localstorage with the time it was clicked, and on page load check localstorage, and if it hasn't been 15 seconds since the button was clicked, disable it

Leshawn Rice
  • 617
  • 4
  • 13