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>