How to do a counter with JavaScript

Question

I'm making a countdown, which I want to set with a form. Also, I would like to store the data I'm sending in.

I need this counter to be called in other parts of the site as I'm doing this for the admin of a web page.

I'm not sure if local storing or AJAX would be the best option, because I don't want to add a table just for three variables.

That's my question: which way would help me better, or how can I store the data I need? Am I missing something?

Here is my form:

<form action="counter.php"  method="post" > <br>
  <p>Only numbers</p>
  <input type="number" name="year" id="year" placeholder="year" required="true"><br>
  <input type="number" name="month" id="month" placeholder="month" required="true"><br>
  <input type="number"  name="day" id="day" placeholder="day" required="true"><br>
  <br>
  <input type="submit" name="" onclick="sendData()">
</form>

My idea was to pass it by post, but it didn't work as I expected, because every time I call counter.php it sends me an "Undefined index: year" error.

Next, my counter.php:

 <?php

$dty = $_POST['year'];
$dtm = $_POST['month'];
$dtd = $_POST['day'];

echo $dty; ?>

<div class="row">    
  <div class="col-xs-12" align="rigth">
    <table class="countdownContainer" >
      <tr class="info">
        <td align="center" id="days"></td>
        <td align="center" id="hours"></td>
        <td align="center" id="minutes"></td>
        <td align="center" id="seconds"></td>
      </tr>
      <tr>
        <td class="px7" align="center">Día</td>
        <td class="px7" align="center">hora</td>
        <td class="px7" align="center">min</td>
        <td class="px7" align="center">seg</td>
      </tr>
    </table>
  </div>    
  <br><br>
</div>

<br>
</div>
</div>

Finally, I'm using this JavaScript to make the countdown. Right now it's static; the plan is to store the data somewhere so I can pass it to the countDown function.

<script type="text/javascript">

    function  countDown(){
        var now = new Date();
        var eventDay = new Date(2018,11,12);// año, dia, mes
        var currentTime = now.getTime();
        var eventTime = eventDay.getTime();

        var remTime = eventTime - currentTime;
        var s = Math.floor(remTime/1000);
        var m = Math.floor(s/60);
        var h = Math.floor(m/60);
        var d = Math.floor(h/24);

        h %= 24;
        m %= 24;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

        document.getElementById('days').textContent = d;
        document.getElementById('days').innerText = d;

        document.getElementById('hours').textContent = h;
        document.getElementById('minutes').textContent = m;
        document.getElementById('seconds').textContent = s;


        setTimeout(countDown, 1000);
    }

    countDown();

</script>

You could perhaps use PHP and store it as a session variable. That way it is controlled server side instead of client side. — Loaf, Jan 05 '17 at 18:14

BjornvanSchie · Accepted Answer · 2017-01-05T20:58:21.770

As far as i understood you want to make a basic countdown? that is running clientside. I've modified you're code to make it work, if you have any questions regarding the code feel free to ask them!

Counter

  if(isset($_POST)) { // Check if POST is send
    if(isset($_POST['year']) && isset($_POST['month']) && isset($_POST['day'])) { // Check if post contains year, month, day
      $year = $_POST['year']; // Overule default data with post data
      $month = $_POST['month'];
      $day = $_POST['day'];
    }
  }
?>

<div class="row">
  <div class="col-xs-12" align="rigth">
    <table class="countdownContainer" >
        <tr class="info">
          <td align="center" id="days"></td>
          <td align="center" id="hours"></td>
          <td align="center" id="minutes"></td>
          <td align="center" id="seconds"></td>

        </tr>
        <tr>
          <td class="px7" align="center">Día</td>
          <td class="px7" align="center">hora</td>
          <td class="px7" align="center">min</td>
          <td class="px7" align="center">seg</td>
        </tr>
    </table>
    </div>
</div>

<script type="text/javascript">
var year = "<?=$year?>"; // Create javascript variables filled with php variables
var month = "<?=$month?>";
var day = "<?=$day?>";
countDown();

function  countDown(){
  var now = new Date();
  var eventDay = new Date(year,month,day);// año, dia, mes
  var currentTime = now.getTime();
  var eventTime = eventDay.getTime();

  var remTime = eventTime - currentTime;
  var s = Math.floor(remTime/1000);
  var m = Math.floor(s/60);
  var h = Math.floor(m/60);
  var d = Math.floor(h/24);

  h %= 24;
  m %= 24;
  s %= 60;

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  document.getElementById('days').textContent = d;
  document.getElementById('days').innerText = d;

  document.getElementById('hours').textContent = h;
  document.getElementById('minutes').textContent = m;
  document.getElementById('seconds').textContent = s;

  setTimeout(countDown, 1000);
}
</script>

Index

<form action="counter.php" method="POST">
  <p>Only numbers</p>
  <input type="number" name="year" id="year" placeholder="year" required="true">
  <input type="number" name="month" id="month" placeholder="month" required="true">
  <input type="number"  name="day" id="day" placeholder="day" required="true">
  <input type="submit" value="Set timer">
</form>

UPDATE 05-01-2017 (21:54) Found a way to store the "year", "month", "day" variables in a text document. this way its possible to edit data and keep it as long as the server is "alive".

New counter page

  // Set default timer data
  $year = "2018";
  $month = "11";
  $day = "12";

  if(isset($_POST)) { // Check if POST is send
    if(isset($_POST['year']) && isset($_POST['month']) && isset($_POST['day'])) { // Check if post contains year, month, day
      $year = $_POST['year']; // Overule default data with post data
      $month = $_POST['month'];
      $day = $_POST['day'];

      file_put_contents($filename, $year + "," + $month + "," + $day);
    }
  } else if(file_exists($filename)) {
      $fileData = file_get_contents($filename);
      $fileData = explode(",", $fileData);

      $year = $fileData[0];
      $month = $fileData[1];
      $month = $fileData[2];
  }
?>

<div class="row">
  <div class="col-xs-12" align="rigth">
    <table class="countdownContainer" >
        <tr class="info">
          <td align="center" id="days"></td>
          <td align="center" id="hours"></td>
          <td align="center" id="minutes"></td>
          <td align="center" id="seconds"></td>

        </tr>
        <tr>
          <td class="px7" align="center">Día</td>
          <td class="px7" align="center">hora</td>
          <td class="px7" align="center">min</td>
          <td class="px7" align="center">seg</td>
        </tr>
    </table>
    </div>
</div>

<script type="text/javascript">
var year = "<?=$year?>";
var month = "<?=$month?>";
var day = "<?=$day?>";

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;

countDown();

function  countDown(){
  var now = new Date();
  var end = new Date(year,month,day);// año, dia, mes
  var distance = end - now;
  if(distance > 0) {
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('days').innerHTML = days;
    document.getElementById('hours').innerHTML = hours;
    document.getElementById('minutes').innerHTML = minutes;
    document.getElementById('seconds').innerHTML = seconds;

    setTimeout(countDown, 1000);
  }
}
</script>

thkx it work great but i still have a question. :D At this point table countdownContainer have al the data in couter.php but when i try to call it, it's empty. I guess it's cause is not storaged ... ??? — E.Rawrdríguez.Ophanim, Jan 05 '17 at 19:41
Exactly, this is because its stored in $_POST, post will only "live" 1 page (in this case counter.php). If you reopen it it will be empty again because the $_POST is gone. An option to resolve this problem is to use session variables. these session variables will "live" while the browser is open. this way the data will be accessible as long as you dont close the browser. If you want i will make an example using sessions. It will be handy to learn for the feature. — BjornvanSchie, Jan 05 '17 at 20:30
it would be great but i still need this to stay always in server — E.Rawrdríguez.Ophanim, Jan 05 '17 at 20:41
Eduardo, please see the awnser above, i've added a new counter page that will save the date in a .txt file. This way the data is always there and it will be updated by the form page. If you have any questions feel free to ask them! — BjornvanSchie, Jan 05 '17 at 21:04

score 0 · Answer 2 · answered Jan 05 '17 at 19:33

The problem you have is that you try to load the post parameters even on page load, that is a get request. To make sure you only handle your post parameters in case of post, do the following:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Put here the code you need to run in case of post request only
}

How to do a counter with JavaScript

2 Answers2