Make a button countdown timer which will be permanently disabled after 5 minutes even on page refresh it should remain disabled

Question

I want to make a count down timer on a two different buttons which will be permanently disabled after 5 minutes even on refresh it will remain disabled. How can i make it in javascript or jquery or ajax ? I just cant seem to make it for my code.Cancel button should be disabled in 5 minutes on load here

<table cellspacing="0" cellpadding="0" border="0" class="tbl_repeat">

    <tr>
        <th>Table No</th>
        <th class="ta_r">Date</th>
        <th class="ta_r col_15">Status</th>
        <th class="ta_r col_15">Total</th>
    </tr>


        <tr>
            <td><?php echo $row['Table_id']; ?></td>
            <td class="ta_r"><?php echo Helper::setDate(1, $row['date']); ?></td>
            <td class="ta_r">
                <?php 
                    $status = $objOrder->getStatus($row['status']);
                    echo $status['name']; 
                ?>
            </td>
            <td class="ta_r">
                &#8360;<?php echo number_format($row['subtotal'], 2); ?>
            </td>
        </tr>
            <th class="ta_r col_15">Cancel Order</th>
            <th class="ta_r col_15">Order Timer</th>
            <tr>
            <td>

                <a href="/pages/delshow/delete.php?delete_id=<?php echo $row['id'];?>" id='abcd'>
                <button class="acount-btn" id="abcd">Cancel</button>
                </a>
            </td>

            <td>
                <a href="pages/countdown.php?timer=<?php echo $row['response'];?>" ><img src="pages/order-images/clock-circle.png"/>
                </a>
            </td>

        </tr>
        <br/><br/><br/>
    <?php } 
    else
    {

    }

    }
    ?>

</table>

You need to store timer state on the server, so that it persists across page refreshes. You can't do this only with javascript. — Sergio Tulentsev, May 07 '16 at 21:08
Related to 1. http://stackoverflow.com/q/31671918/2869791 2. http://stackoverflow.com/q/18959919/2869791 — Sarath Chandra, May 07 '16 at 21:28

Sarath Chandra · Accepted Answer · 2016-05-08T19:05:50.070

Use setTimeout, explained here to set a timer on the element.

function disableElement(){
  $('#elementId').prop('disabled', true);
}

setTimeout(disableElement, 5*60*1000);

However, to solve the "persist on refresh" part, you could store the status change details on the server side or use localStorage or $.cookie. according to your application requirement.

Working Implementation based on localStorage:

<html>
<head>
<script   src="https://code.jquery.com/jquery-2.2.3.js"   
    integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="   
    crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
   var limit = 5*60*1000; // the time limit (in milliseconds) for the disable function
   var timer = setTimeout(disableMyButton, limit);

   function disableMyButton(){
      $('#myButton').prop('disabled', true);
      $("#statusMsg").text("Disabling before page refresh");
      localStorage.setItem("isMyButtonDisabled", "true");
   }

   if(localStorage.getItem("isMyButtonDisabled") == "true"){
     $("#statusMsg").text("Disabling after page refresh");
     $('#myButton').prop('disabled', true);
     window.clearTimeout(timer);
   }
});
</script>
</head>
<input type = "button" id= "myButton" value= "Click me" />
<p id="statusMsg" >  </p>
</html>

Note:

As mentioned in this page, we need to declare the timer variable as a global variable for the clearTimeout to work properly.

@SergioTulentsev: You're right, sir! I've updated my answer to solve that part too. — Sarath Chandra, May 07 '16 at 21:20
Its disabling for 5 minutes but the timeout is still not surviving page reload. — haroon sheikh, May 08 '16 at 05:09
@haroonsheikh I don't know what's going wrong for you. But I've updated the answer with code that's working for me. See if your browser console shows any errors. — Sarath Chandra, May 08 '16 at 19:02

score 1 · Answer 2 · edited May 23 '17 at 12:17

Building upon Sarath's good answer (+1) . . .

Since you've tagged your question with PHP and AJAX, you can also do this using a PHP $_SESSION variable.

PHP $_SESSION variables are stored on the server and are specific to one visitor (a cookie is stored on the visitor's computer that matches up with a variable on the server, which creates an individualized, persistent, SESSION).

AJAX:

var timerOn = true;
$(function(){ //same as $(document).ready(function(){
    checkDisabledElement();
    if (timerOn) var timerDisableElement = setTimeout(disableElement, 5*60*1000);

});


function checkDisabledElement(){
    //This check can be done in PHP while building the page, but for educational purposes let's do it here
    $.ajax({
        type: 'post',
         url: 'ajax.php',
        data: 'request=is_button_disabled',
        success: function(d){
            if (d = 1){
                $('#elementId').prop('disabled', true);
                timerOn = false;
            }else{
            }
        }
    });
}

function disableElement(){
    $.ajax({
        type: 'post',
         url: 'ajax.php',
        data: 'request=disable_button',
        success: function(d){
            if (d = 1){
                $('#elementId').prop('disabled', true);
                timerOn = false;
                clearTimeout(disableTimer);
            }
        }
    });
}

ajax.php

<?php
    session_start(); //must be first instruction in PHP

    if ($_POST['request'] == 'is_button_disabled'){
        if (isset($_SESSION['button_state']) && $_SESSION['button_state']=='disabled') echo 1;
    }else if ($_POST['request'] == 'disable_button'){
        $_SESSION['button_state'] = "disabled";
        echo 1;
    }

Important Note: SESSION variables do not persist forever. Once the browser is closed, that session vanishes. To preserve sessions "forever" (or at least through bouncing the browser) use a MySQL table. What do you store in the MySQL database? You could store the visitor's IP, but that is not foolproof as they tend to change over time... but you are now very close to having a user login system.

Note that there are similar issues with using localstorage. This post might be helpful:

When is localStorage cleared?

daniel.brubeck · Answer 3 · 2016-05-07T22:36:50.257

I would start by storing the time at which you are going to disable the buttons in the local storage, set the timer and check that time on subsequent reloads.

var disableElement = function(){
    // Whatever you wanted to do on the timeout
    $('#elementId').prop('disabled', true);
};

$(document).ready(function(){
    if ( localStorage.getItem("disableTime") ) {
        var currentTime = new Date(),
            disableTime = new Date(localStorage.getItem("disableTime");

        if ( currentTime.getTime() < disableTime.getTime() ) {
           window.setTimeout(disableElement, disableTime.getTime() - currentTime.getTime());
        } else {
           disableElement();
        }
    } else {
        var disableTime = new Date(),
            minutes = 5*60*1000;
        localStorage.setItem("disableTime", new Date().getTime() + minutes);
        window.setTimeout(disableElement, minutes);
    }
})

Thanks for the help Valarauko. – haroon sheikh May 08 '16 at 17:12 — haroon sheikh, May 08 '16 at 17:12

Make a button countdown timer which will be permanently disabled after 5 minutes even on page refresh it should remain disabled

3 Answers3

Linked