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>

Answer 1

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>

Answer 2

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
}