We Keep Coding

Submit span content to a database

Just for fun, I'm trying to build a simple time tracker; the page grabs a stored duration from a database, and you can then add more time to that value, and then store it back to the database.
The value is displayed in h:i:s format, but there's also a hidden span with the same time but just in seconds.
My problem:
I cannot figure out how to submit the contents of the span to the database.
If I instead put the hidden span contents inside a form input, then the content doesn't change; it just submits the original value back to the database.
I really feel like I'm making a bit of a meal out of this.
Here's the current code...
<?php
/*
DROP TABLE IF EXISTS my_table;
CREATE TABLE my_table (t TIME NOT NULL DEFAULT 0);
INSERT INTO my_table VALUES ('00:01:50');
*/
require('path/to/connection/stateme.nts');
//wip - for later - and remember to remove the injection!!!
if(sizeof($_POST) != 0){
$query = "UPDATE my_table SET t=SEC_TO_TIME({$_GET['tts']}) LIMIT 1";
$pdo->query($query);
}
//Grab the stored value from the database
$query = "
select t
, time_to_sec(t) tts
, LPAD(HOUR(t),2,0) h
, LPAD(MINUTE(t),2,0) i
, LPAD(SECOND(t),2,0) s
from my_table
limit 1
";
if ($data = $pdo->query($query)->fetch()) {
$t = $data['t'];
$tts = $data['tts'];
$h = $data['h'];
$i = $data['i'];
$s = $data['s'];
} else {
$t = 0;
$tts = 0;
$h = '00';
$i = '00';
$s = '00';
}
?>
#relevant code starts here, I guess
<div>
<div>
<span hidden id="tts"><?php echo $tts; ?></span>
<span id="hour"><?php echo $h; ?></span>:
<span id="min"><?php echo $i; ?></span>:
<span id="sec"><?php echo $s; ?></span>
<input id="startButton" type="button" value="Start/Resume">
<input id="pauseButton" type="button" value="Pause">
<button id="submit" onclick="myFunction()" >Save</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var Clock = {
totalSeconds: <?php echo $tts ?>,
start: function () {
if (!this.interval) {
var self = this;
function pad(val) { return val > 9 ? val : "0" + val; }
this.interval = setInterval(function () {
self.totalSeconds += 1;
$("#hour").text(pad(Math.floor(self.totalSeconds / 3600 % 60)));
$("#min").text(pad(Math.floor(self.totalSeconds / 60 % 60)));
$("#sec").text(pad(parseInt(self.totalSeconds % 60)));
$("#tts").text(pad(parseInt(self.totalSeconds)));
}, 1000);
}
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
this.start();
}
};
$('#startButton').click(function () { Clock.start(); });
$('#pauseButton').click(function () { Clock.pause(); });
</script>
<script>
function myFunction() {
document.querySelectorAll('div').forEach(div => {
div.querySelectorAll('span')
.forEach(span => console.log(span.textContent));
});
}
</script>

With CBroe's useful hint, the following works... although my attempts at preparing and binding $_GET are failing at the moment, so the query itself remains insecure...
<?php
/*
DROP TABLE IF EXISTS my_table;
CREATE TABLE my_table (t TIME NOT NULL DEFAULT 0);
INSERT INTO my_table VALUES ('00:01:50');
*/
require('path/to/connection/stateme.nts');
if(sizeof($_GET) != 0){
$query = "UPDATE my_table SET t = SEC_TO_TIME({$_GET['tts']}) LIMIT 1";
$stmt = $pdo->prepare($query);
$stmt->execute();
}
//Grab the stored value from the database
$query = "
select t
, time_to_sec(t) tts
, LPAD(HOUR(t),2,0) h
, LPAD(MINUTE(t),2,0) i
, LPAD(SECOND(t),2,0) s
from my_table
limit 1
";
if ($data = $pdo->query($query)->fetch()) {
$t = $data['t'];
$tts = $data['tts'];
$h = $data['h'];
$i = $data['i'];
$s = $data['s'];
} else {
$t = 0;
$tts = 0;
$h = '00';
$i = '00';
$s = '00';
}
?>
#relevant code starts here, I guess
<form id="myForm">
<input name="tts" type= "hidden" id="tts" value="tts">
<span id="hour"><?php echo $h; ?></span>:
<span id="min"><?php echo $i; ?></span>:
<span id="sec"><?php echo $s; ?></span>
<input id="startButton" type="button" value="Start/Resume">
<input id="pauseButton" type="button" value="Pause">
<button id="submit" onclick="myFunction()" >Save</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var Clock = {
totalSeconds: <?php echo $tts ?>,
start: function () {
if (!this.interval) {
var self = this;
function pad(val) { return val > 9 ? val : "0" + val; }
this.interval = setInterval(function () {
self.totalSeconds += 1;
$("#hour").text(pad(Math.floor(self.totalSeconds / 3600 % 60)));
$("#min").text(pad(Math.floor(self.totalSeconds / 60 % 60)));
$("#sec").text(pad(parseInt(self.totalSeconds % 60)));
$("#tts").val(pad(parseInt(self.totalSeconds)));
}, 1000);
}
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
this.start();
}
};
$('#startButton').click(function () { Clock.start(); });
$('#pauseButton').click(function () { Clock.pause(); });
</script>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
}
</script>

strange error in javascript countdown

I'm building a webpage that shows multiple consecutive countdowns, depending from a text file.
Almost everything works now, only one thing still doesn't want to work.
The problem is this: when the timer hit's 00:00:00, it should switch to the next countdown, and start counting down, but what is does is showing some kind of glitch, it flashes between nan:nan:nan and 23:59:xx, like the countdown started again, counting down to the next day. I wrote some stuff to the console, and here I see that my function to set a new deadline in javascript is called, and the deadlinecounter does go up; but it goes up from 0 to 6 first, en later from 0 to 7. very strange I would say. Hope someone can help me!
this is my code:
<!DOCTYPE html>
<!-- php functions -->
<?php
$deadlineH = null;
$deadlineM = null;
$deadlineS = null;
$deadlineTitle = null;
$filename = "data.txt";
$fp = fopen($filename, "r");
$content = fread($fp, filesize($filename));
$fullArray = setFullArray($content);
$length = count($fullArray);
for ($i = 0; $i < $length - 1; $i++) {
$value = $fullArray[$i];
echo "var " . ($i + 1) . ": " . $fullArray[$i] ." <br>";
if((($i+1) % 4) == 0){
echo " ";
}
}
$hoursArray = [];
$minutesArray = [];
$secondsArray = [];
$titlesArray = [];
setArrays($fullArray);
function setArrays($fullArray){
$length = count($fullArray);
for ($i=0; $i < $length - 1; $i = $i+4) {
array_push($GLOBALS['hoursArray'], $fullArray[$i]);
}
for ($j=1; $j < $length - 1; $j = $j+4) {
array_push($GLOBALS['minutesArray'], $fullArray[$j]);
}
for ($k=2; $k < $length - 1; $k = $k+4) {
array_push($GLOBALS['secondsArray'], $fullArray[$k]);
}
for ($l=3; $l < $length - 1; $l = $l+4) {
array_push($GLOBALS['titlesArray'], $fullArray[$l]);
}
}
$numberoflines = getNumberOflines($fullArray);
echo "number of lines: " . $numberoflines . "<br>";
showDeadlines($fullArray);
function setFullArray($content){
$fullArray = preg_split("/(:|\n)/" ,$content); // splits the whole data txt file into small chunks, everything apart
return $fullArray;
}
function getNumberOflines($fullArray){
$numberoflines = (sizeof($fullArray) - 1) / 4;
return $numberoflines;
}
function showDeadlines($fullArray){ // won't be used in final thing
$length = count($fullArray);
for ($i=0; $i < $length-1; $i = $i + 4) {
$deadlineNumber = ($i + 4)/4;
$deadlineH = $fullArray[$i];
$deadlineM = $fullArray[$i+1];
$deadlineS = $fullArray[$i+2];
$deadlineTitle = $fullArray[$i+3];
echo "deadline " . $deadlineNumber . ": " . $deadlineH . ":" . $deadlineM . ":" . $deadlineS . " titel : " . $deadlineTitle . "<br>";
}
}
function setDeadline($fullArray){
$length = count($fullArray);
for ($i=0; $i < $length-1; $i = $i + 4) {
$deadlineNumber = ($i + 4)/4;
$GLOBALS['deadlineH'] = $fullArray[$i];
$GLOBALS['deadlineM'] = $fullArray[$i+1];
$GLOBALS['deadlineS'] = $fullArray[$i+2];
$GLOBALS['deadlineTitle'] = $fullArray[$i+3];
}
}
?>
<!-- end php functions -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="startTime()">
<div id="visible">
<div id="clock"><span> </span> </div><br>
<div id="countdown"> </div>
<div id="countdown"> </div>
<div id="title"> </div>
</div>
<p>
<?php
echo json_encode($hoursArray);
echo json_encode($minutesArray);
echo json_encode($secondsArray);
echo json_encode($titlesArray);
?>
</p>
</div>
<!-- javascript scripts -->
<script>
var hoursArray = [];
var minutesArray = [];
var secondsArray = [];
var titlesArray = [];
var deadlineCounter;
function startTime() {
var now = new Date();
// year, month, day, hours, minutes, seconds, milliseconds
var deadline = new Date(2016, 11, 20, 00 ,00 ,00 ,00);
deadlineCounter = 0;
var clockH = now.getHours();
var clockM = now.getMinutes();
var clockS = now.getSeconds();
setArrays();
setInitialDeadline(deadline);
startClock('clock');
startCountdown('countdown', deadline);
var t = setTimeout(startTime, 500);
}
function setArrays(){
hoursArray= <?php echo json_encode($hoursArray); ?>;
console.log( hoursArray );
minutesArray= <?php echo json_encode($minutesArray); ?>;
console.log( minutesArray );
secondsArray= <?php echo json_encode($secondsArray); ?>;
console.log( secondsArray );
titlesArray= <?php echo json_encode($titlesArray); ?>;
console.log( titlesArray );
}
function setInitialDeadline(deadline) {
deadline.setHours(hoursArray[0]);
deadline.setMinutes(minutesArray[0]);
deadline.setSeconds(secondsArray[0]);
document.getElementById("title").innerHTML = titlesArray[0];
}
function setNewDeadline(deadline){
console.log('new deadline set');
deadline.setHours(hoursArray[deadlineCounter]);
deadline.setMinutes(minutesArray[deadlineCounter]);
deadline.setSeconds(secondsArray[deadlineCounter]);
document.getElementById("title").innerHTML = titlesArray[deadlineCounter];
}
function getCountdown(deadline){
var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
var countdownS = Math.floor( (countdownTotal/1000) % 60 );
var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
return{
'countdownTotal': countdownTotal,
'countdownH': countdownH,
'countdownM': countdownM,
'countdownS': countdownS
}
}
function startClock(id){
var clock = document.getElementById(id);
var timeInterval = setInterval(function(){
var now = new Date();
var nowH = now.getHours();
var nowM = now.getMinutes();
var nowS = now.getSeconds();
nowH = checkTime(nowH);
nowM = checkTime(nowM);
nowS = checkTime(nowS);
clock.innerHTML = nowH + ':' + nowM + ':' + nowS;
}, 1000);
}
function startCountdown(id, deadline){
var countdown = document.getElementById(id);
var timeInterval = setInterval(function(){
var t = getCountdown(deadline);
//console.log(t);
//console.log(deadlineCounter);
countdown.innerHTML = checkTime(t.countdownH) + ':' + checkTime(t.countdownM) + ':' + checkTime(t.countdownS);
if(t.countdownH == 0 && t.countdownM == 0 && t.countdownS == 0){
deadlineCounter++;
setNewDeadline(deadline);
t = getCountdown(deadline);
}
}, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<!-- //end javascript -->
</body>
</html>
Thanks!

Correct calling the function startTime() inside itself like this: var t = setTimeout(startTime, 500);. Maybe it's better to remove this line from func body and write:
<body onload="setTimeout(startTime(), 500)">

multiple textbox values storing in same column in php

I an using Javascript when click add button to show multiple text box. but i don't how to store these text box values in database table single column. here i attached my form input coding and javascript for add number of textbox. after submit my form it stores somthing like Array into my table.
<?php
if(isset($_POST['submit']))
{
Include 'db.php';
//$digits = 5;
//$staff_id=STAF.rand(pow(10, $digits-1), pow(10, $digits)-1);
$fromlocation = $_POST['fromlocation'];
$fromlatitude = $_POST['fromlatitude'];
$fromlongitude = $_POST['fromlongitude'];
$tolocation = $_POST['tolocation'];
$tolatitude = $_POST['tolatitude'];
$tolongitude = $_POST['tolongitude'];
// $routes = $_POST['routes'];
//$routesmore = $_POST['routes_more'];
$date=date('Y-m-d H:i:s');
$status=1;
//$usertype=1;
$count = $_POST['count'];
for($i = 0 ; $i < $count ; $i++)
{
//$count++;
$routesmore = $_POST['routes_more'];
$routesmore2 = explode('.', $routesmore[0]);
}
$query = mysqli_query($connect,"INSERT INTO `motorpark-db`.`tbl_route` (`from_location`, `from_latitude`, `from_longitude`, `to_location`, `to_latitude`, `to_longitude`, `route1`, `status`, `created_date`) VALUES ('$fromlocation', '$fromlatitude', '$fromlongitude', '$tolocation', '$tolatitude', '$tolongitude', '$routesmore2', '$status', '$date');");
if($query)
{
header('location:create_route.php#managepart');
}
else
{
header('location:create_staff.php');
}
}
?>
my input box:
<div class="col-lg-8" id="img_upload">
<!-- <input type="text" id="file0" name="routes" style="background:none;width:185px;"> -->
<div id="divTxt"></div>
<p><a onClick="addproductimageFormField(); return false;" style="cursor:pointer;width:100px;" id="add_img_btn" class="btn btn-primary">Add Route</a></p>
<input type="hidden" id="aid" value="1">
<input type="hidden" id="count" name="count" value="0">
My Javascript:
<script type="text/javascript">
function addproductimageFormField()
{
var id = document.getElementById("aid").value;
var count_id = document.getElementById("count").value;
if(count_id < 2)
{
document.getElementById('count').value = parseInt(count_id)+1;
var count_id_new = document.getElementById("count").value;
jQuery.noConflict()
jQuery("#divTxt").append("<div id='row" + count_id + "' style='width:100%'><fieldset class='gllpLatlonPicker'><label for='text- input'>Stop</label><span style='color:red;'> *</span><input type='text' class='gllpSearchField' name='routes_more"+count_id+"' id='file"+count_id_new+"' /></fieldset> &nbsp<a href='#' onClick='removeFormField(\"#row" + count_id + "\"); return false;' style='color:#F60;' >Remove</a></div>");
jQuery('#row' + id).highlightFade({speed:1000 });
id = (id - 1) + 2;
document.getElementById("aid").value = id;
}
}
function removeFormField(id)
{
//alert(id);
var count_id = document.getElementById("count").value;
document.getElementById('count').value = parseInt(count_id)-1;
jQuery(id).remove();
}
</script>

Change In JS - Append routes_more[] in jQuery("#divTxt").append in place of routes_more'+count+'.
<script type="text/javascript">
function addproductimageFormField()
{
var id = document.getElementById("aid").value;
var count_id = document.getElementById("count").value;
if(count_id < 2)
{
document.getElementById('count').value = parseInt(count_id)+1;
var count_id_new = document.getElementById("count").value;
jQuery.noConflict()
jQuery("#divTxt").append("<div id='row" + count_id + "' style='width:100%'><fieldset class='gllpLatlonPicker'><label for='text- input'>Stop</label><span style='color:red;'> *</span><input type='text' class='gllpSearchField' name='routes_more[]' id='file"+count_id_new+"' /></fieldset> &nbsp<a href='#' onClick='removeFormField(\"#row" + count_id + "\"); return false;' style='color:#F60;' >Remove</a></div>");
jQuery('#row' + id).highlightFade({speed:1000 });
id = (id - 1) + 2;
document.getElementById("aid").value = id;
}
}
function removeFormField(id)
{
//alert(id);
var count_id = document.getElementById("count").value;
document.getElementById('count').value = parseInt(count_id)-1;
jQuery(id).remove();
}
</script>
Change in PHP Code - Find total count of routes_more textbox. And do accordingly. (No Need of checking how much count was there in your html code.)
<?php
if(isset($_POST['submit']))
{
include 'db.php';
//$digits = 5;
//$staff_id=STAF.rand(pow(10, $digits-1), pow(10, $digits)-1);
$fromlocation = $_POST['fromlocation'];
$fromlatitude = $_POST['fromlatitude'];
$fromlongitude = $_POST['fromlongitude'];
$tolocation = $_POST['tolocation'];
$tolatitude = $_POST['tolatitude'];
$tolongitude = $_POST['tolongitude'];
// $routes = $_POST['routes'];
//$routesmore = $_POST['routes_more'];
$date=date('Y-m-d H:i:s');
$status=1;
//$usertype=1;
//For Routes More
$totalRoutesCount = sizeof($_POST['routes_more']);
$totalRoutes="";
for($i=0;$i<$totalRoutesCount;$i++)
{
$totalRoutes = $totalRoutes.$routesmore[$i].",";
}
$totalRoutes = rtrim($totalRoutes, ',');
$query = mysqli_query($connect,"INSERT INTO `motorpark-db`.`tbl_route` (`from_location`, `from_latitude`, `from_longitude`, `to_location`, `to_latitude`, `to_longitude`, `route1`, `status`, `created_date`) VALUES ('$fromlocation', '$fromlatitude', '$fromlongitude', '$tolocation', '$tolatitude', '$tolongitude', '$totalRoutes', '$status', '$date');");
if($query)
{
header('location:create_route.php#managepart');
}
else
{
header('location:create_staff.php');
}
}
?>

HTML :
<input type="text"
id="file0" name="routes[]"
style="background:none;width:185px;">
PHP:
INSERT Query:
'routes'(BD column) = serialize( $post['routes'] );
Display Time:
unserialize the column routes and print with foreach loop

How to get specific radio value from PHP

I'm not getting the right value from my radio buttons on my 'Thank You' page.
I want that after my user end the payment and he get redirected to the thank you page some values from the filled form to be posted there. And I have archive just that with this script on the form.php file:
<script type="text/javascript">
function CookieTheFormValues() {
var cookievalue = new Array();
var fid = document.getElementById(FormID);
for (i = 0; i < fid.length; i++)
{
var n = escape(fid[i].name);
if( ! n.length ) { continue; }
var v = escape(fid[i].value);
cookievalue.push( n + '=' + v );
}
var exp = "";
if(CookieDays > 0)
{
var now = new Date();
now.setTime( now.getTime() + parseInt(CookieDays * 24 * 60 * 60 * 1000) );
exp = '; expires=' + now.toGMTString();
}
document.cookie = CookieName + '=' + cookievalue.join("&") + '; path=/' + exp;
return true;
}
</script>
And than by putting this script on the thank you page :
<?php
$CookieName = "PersonalizationCookie";
$Personal = array();
foreach( explode("&",#$_COOKIE[$CookieName]) as $chunk )
{
list($name,$value) = explode("=",$chunk,2);
$Personal[$name] = htmlspecialchars($value);
}
?>
So far so good I get all right values from other inputs but from radios I get always the last in class name value? This mean for eg if I have this code:
<input type="radio" name="emotion" id="basi" value="Basic Pack" />
<input type="radio" name="emotion" id="deli" value="Deluxe Pack" />
<input type="radio" name="emotion" id="premi" value="Premium Pack"/>
And in the Thank you page I put this code for eg
Thank you for chosing <?php echo(#$Personal["emotion"]); ?>
I get always this Thank you for choosing Premium Pack even when i check the basic or deluxe radio why this?

Your loop:
for (i = 0; i < fid.length; i++)
{
var n = escape(fid[i].name);
if( ! n.length ) { continue; }
var v = escape(fid[i].value);
cookievalue.push( n + '=' + v );
}
will push all three of the radios into your cookie value. Each one will overwrite the previous, because they have the same name. So ultimately you're left with the value 'Premium Pack' mapped to the "emotion" name. You need to check if the radio is selected before you push the val, maybe something like:
for (i = 0; i < fid.length; i++)
{
var n = escape(fid[i].name);
if( ! n.length ) { continue; }
var v = escape(fid[i].value);
// Only push in the selected emotion radio button
if (n == "emotion") {
if (fid[i].checked == true) cookievalue.push( n + '=' + v );
}
else cookievalue.push( n + '=' + v );
}

javascript for loop in codeigniter

Here's my view :
$(".qty").keyup(function(){
var qty = $(this).val();
var bt = (this.id);
var bts = $('#bts'+bt).val();
var edge = $('#edge'+bt).val();
for (var i = 1; i<edge; ++i) {
var batas = $('#bts'+i).val();console.log(batas);
}
});
<input type="hidden" id="<?php echo 'edge'.$items['id']?>" value="<?php echo $items['options']['jum']?>"/>
<?php
foreach ($items['options']['stok'] as $stok) {
$er = $stok['stokbagus'];
$length = $items['options']['jum'];
for ($i=1; $i< $length; $i++) {
echo '<input type="text" rel="'.$items['rowid'].'" id="bts'.$i.'" value="'.$er.'"/>';
}
}
?>
$items['options']['jum'] contains = 2.
$stok['stokbagus'] contains = 30 and 21.
It'll display the first one (30). How to display all $stok['stokbagus'] in javascript?
Because i want to compare $(".qty").val() with all of $stok['stokbagus']

Okay. Here is what you should do.
If your $stok['stokbagus'] variable is array, then you should select the first and the second variable like this:
$first = $stok['stokbagus'][0];
$second = $stok['stokbagus'][1];
Else if, your $stok['stokbagus'] variable is a string and has 30,21 like this;
$vars = explode(",", $stok['stokbagus']);
$first = $vars[0];
$second = $vars[0];
You are saying that $stok['stokbagus'] variable has 30 and 21 values then it must be an array.
To show all values in your $stok['stokbagus'];
implode(', ', $stok['stokbagus']; // or just use $er.
Full:
echo '<input type="text" rel="'.$items['rowid'].'" id="bts'.$i.'" value="'.implode(', ', $er).'"/>';
Update:
<?php
foreach ($items['options']['stok'] as $stok) {
$er = $stok['stokbagus'];
$length = $items['options']['jum'];
for ($i=1; $i < $length; $i++) {
if(is_array($er)) {
foreach($er as $key => $value) {
echo '<input type="text" rel="'.$items['rowid'].'" class="bts" data-id="'.$i.'" value="'.$value.'"/>';
}
} else {
echo '<input type="text" rel="'.$items['rowid'].'" id="bts'.$i.'" value="'.$er.'"/>';
}
}
}
Js:
$(".qty").keyup(function(){
var qty = $(this).val();
var bt = (this.id);
var bts = $('#bts'+bt).val();
var edge = $('#edge'+bt).val();
for (var i = 1; i<edge; ++i) {
// I don't know what do you want to do with batas variable...
if($('.bts').length > 1) {
$('.bts').each(function(){
console.log($(this).val());
});
} else {
var batas = $('#bts'+i).val();console.log(batas);
}
}
});