将 span 内容提交到数据库

Question

只是为了好玩，我正在尝试构建一个简单的时间跟踪器； 该页面从数据库中获取存储的持续时间，然后您可以将更多时间添加到该值，然后将其存储回数据库。

该值以 h:i:s 格式显示，但也有一个隐藏的跨度，时间相同但仅以秒为单位。

我的问题：

我不知道如何将跨度的内容提交到数据库。 如果我将隐藏的跨度内容放在表单输入中，那么内容不会改变； 它只是将原始值提交回数据库。

我真的觉得我正在为此做一顿饭。

这是当前的代码...

<?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>

Answer 1

使用 CBroe 的有用提示，以下工作......虽然我准备和绑定 $_GET 的尝试目前失败了，所以查询本身仍然不安全......

<?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>