php – 使用Javascript将值插入到多个隐藏字段中,每个字段都以不同的形式

2019年8月4日 295次阅读

我有一个
HTML表,其中包含从数据库中提取的记录.从
MySQL数据库中检索“调用时间”列中的条目. “Timer”列中的条目不是从数据库中检索的,而是一个
Javascript计时器.

一旦用户单击确认按钮,计时器Stops和计时器的最终值必须插入数据库.以下Javascript计时器是其他人代码的略微修改版本(Elapsed time from a given time in the database)

问题：我不知道如何将经过时间值插入隐藏表单字段.请注意,每个条目都有一个隐藏的表单字段ID ID =“stoppedtime<？php echo $stopid;？>”,我知道我必须继续增加stopid变量的值.我需要插入每个单独的已经过的时间(在按下确认按钮之后)到相应的隐藏表单字段中,以便稍后可以将这些隐藏表单字段中的值插入到数据库中.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
ElapsedTimeLogger = function(dateElementId, elapsedElementId, interval) {
    var container = $(elapsedElementId);
    var time = parseDate($(dateElementId).text());
    var interval = interval;
    var timer;

    function parseDate(dateString) {
        var date = new Date(dateString);
        return date.getTime();
    }

    function update() {
        var systemTime = new Date().getTime();
        elapsedTime = systemTime - time;
        container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
       // I Know I have to do something here to put the elapsed time into the hidden field
       //But I don't know how exactly to do it
x = document.getElementById("stoppedid");  // The Problem here is that there are Multiple IDs!!  
x.value=; prettyPrintTime(Math.floor(elapsedTime / 1000))   // Change the hidden input field value
    }

    function prettyPrintTime(numSeconds) {
        var hours = Math.floor(numSeconds / 3600);
        var minutes = Math.floor((numSeconds - (hours * 3600)) / 60);
        var seconds = numSeconds - (hours * 3600) - (minutes * 60);

        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        var time = hours + ":" + minutes + ":" + seconds;

        return time;
    }

    this.start = function() {

        timer = setInterval(function() {update()}, interval * 1000);
    }

    this.stop = function() {
        clearTimeout(timer);
    }
}
$(document).ready(function () {
    <?php 
    $count= $totalRows; // Total Number of Entries in the Database
    $datevar=1;
    $elapsedvar =1;
    $timeloggervar= 1;
    $confirmvar=1;      

if ($count > 0){
        do { 
        $count--;
        $timeloggervar++;
        $confirmvar++;
        $datevar++;
        $elapsedvar++;?>
        var timeLogger<?php echo $timeloggervar; ?> = new ElapsedTimeLogger("#date<?php echo $datevar; ?>", "#elapsed<?php echo $elapsedvar; ?>", 1);
        timeLogger<?php echo $timeloggervar; ?>.start();

        $("#Confirm<?php echo $confirmvar; ?>").click(function() { //Stop timer upon clicking the Confirm Button 
            timeLogger<?php echo $timeloggervar; ?>.stop();

        });
        <?php } while ($count > 0);}?>

    });

    </script>

一些额外信息：
表中的每个条目都有这样的独特形式.我在表单中放置了一个隐藏字段,以便每个记录的最终ELAPSED TIME VALUE可以存储在值部分中,如下所示.

<?php echo'<form action="'.$_SERVER['PHP_SELF'].'" method="post" id="form'.$formid.'">';?>
<input name="Num" type="hidden" value="<?php echo $results['Time of Call']; ?>" />
**<input type="hidden" name="stoppedtime" id="stoppedtime<?php echo $stopid; ?>" value="">**
.....

如果你能帮我这个,真的很感激,谢谢！

编辑：

   function update(id) {
        var systemTime = new Date().getTime();
        elapsedTime = systemTime - time;
        container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
       // I Know I have to do something here to put the elapsed time into the hidden field
       //But I don't know how exactly to do it
x = document.getElementById("stoppedid"+id);  // The Problem here is that there are Multiple IDs!!  
x.value= prettyPrintTime(Math.floor(elapsedTime / 1000));   // Change the hidden input field value
    }


this.start = function(id) { 
    timer = setInterval(function(id) {update(id)}, interval * 1000);
}

最佳答案 试试这个,

<script>
ElapsedTimeLogger = function(dateElementId, elapsedElementId, hiden, interval) {
.
.
.
function update() {
    var systemTime = new Date().getTime();
    elapsedTime = systemTime - time;
    container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
$(hiden).val(prettyPrintTime(Math.floor(elapsedTime / 1000)));
}
.
.
.

$(document).ready(function () {
<?php
for($id=1; $id<$totalRows; $id++){
?>
    var timeLogger = new ElapsedTimeLogger("#date<?php echo $id;?>", "#elapsed<?php echo $id;?>","#stoppedid<?php echo $id;?>", 1);
    timeLogger.start();

   $("#Confirm<?php echo $id; ?>").click(function() { //Stop timer upon clicking the Confirm Button 
        timeLogger.stop();

    });
<?php
}
?>
});
</script>
点赞