disable button with PHP and JavaScript when time is gone

Question

I try to disable Apply button when application deadline is over. I used php and I successfully got time on each button. Now different time is print on different button.

<td><input type='submit' value='Apply' id='button' name='button' date-time='$closedate' /></td>

I used jquery/ javascript to disable button after expired time (after deadline of application), it cannot disable and it always enable.

In the code below code I used for disable button but it not works.

<script>

    $(document).ready(function() {
        var timer = setInterval(function() {
        var current = $("#button").data('time');
        // get the current value of the time in seconds
        var newtime = current - 1;
        if (newtime <= 0) {
            // time is less than or equal to 0
            // so disable the button and stop the interval function
            $("#button").prop('disabled', true);
            clearInterval(timer);
        } else {
            // timer is still above 0 seconds so decrease it
            $("#button").data('time', newtime);
        }
    }, 1000);
});

</script>

Scott Marcus · Answer 1 · 2017-05-05T01:38:42.437

A few of issues...

First, in your HTML, you have date-time instead of data-time, so when you go to get the attribute later with: $("#button").data('time'), you won't get anything.

Second, you must remember to convert HTML data (which is always a string) to numbers to do math with them.

Third, you need to verify that $closedate is a string that can be converted into a valid number. You indicated in a comment below that $closedate will be something like: 2017-03-17. But that is not a value that you can subtract from.

Lastly, updating the HTML is costly in terms of performance. You are modifying the data-time attribute upon each iteration of your setInterval(), which is roughly every second. This can and should be avoided. It can be done by keeping the time left in a variable instead of writing it back to the document.

Here's a working version:

$(document).ready(function() {

  // Always cache references to elements you will use more than once:
  var $btn = $("#button");
  
  // When gettting data from HTML, you get strings. You must convert
  // them to numbers to do math with them. Also, we are using 5 seconds
  // here instead of $closedate for testing purposes.
  var current = parseInt($btn.data('time'), 10);  
  
  // Initialize the newtime for comparison
  var newtime = current;
  
  var timer = setInterval(function() {
  
    newtime--; // Decrease the time left
    
    // Just testing the variables:
    console.log(current, newtime);
    
    if (newtime <= 0) {
      // time is less than or equal to 0
      // so disable the button and stop the interval function
      $btn.prop('disabled', true);
      clearInterval(timer);
    } 
      
    current--;  // Decrease the counter
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' value='Apply' id='button' name='button' data-time='5'>

score 0 · Answer 2 · answered May 04 '17 at 19:46

0

based on what you have put down, it seems there are a few simple errors that need to be looked at
1) looks like a simple typo -- date-time should be data-time
2) you are not actually outputting the value of $closedate try changing it to

without knowing what the value of $closedate is, we won't be able to help further than that

answered May 04 '17 at 19:46

Craig Bezuidenhout

215
1
5

I get closing date which I stored in mysql database using php variable $closedate. like 2017-03-17. $closedate = $row_op['closedate']; – Akshit Patel May 04 '17 at 19:57
In that case, your javascript is going to be a problem , you will need to convert the closedate to a value that represents the difference between now and that date in seconds. This will allow your javascript to countdown, based on the current logic. : see this link to get the difference in seconds http://stackoverflow.com/questions/5988450/difference-between-2-dates-in-seconds – Craig Bezuidenhout May 06 '17 at 11:38

buydadip · Answer 3 · 2017-05-04T20:24:32.253

Here is a fiddle that replicates an example...https://jsfiddle.net/o2gxgz9r/6656/

Your main issue is that you are mispelling the data-time attribute in your code as date-time. Your html should be as follows...

<input type='submit' value='Apply' id='button' name='button' data-time='$closedate' />

After fixing that, you should be able to reference the data value. Moreover, you are not updating the data value, so every time setInterval is called, the variable $closedate remains the same, and so the if statement if (newtime <= 0) is never reached...

var timer = setInterval(function() {

    // get the current value of the time in seconds
    var current = $("#button").data('time');

    // decrement the time
    var newtime = current - 1;

    // update $closedate
    $("#button").data('time', newtime);

    if (newtime <= 0) {
        // time is less than or equal to 0
        // so disable the button and stop the interval function
        $("#button").prop('disabled', true);
        clearInterval(timer);
    } else {
        // timer is still above 0 seconds so decrease it
        $("#button").data('time', newtime);
    }
}, 1000);

I am not sure what the value of $closedate is but I made an assumption in my fiddle.

disable button with PHP and JavaScript when time is gone

3 Answers3