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

Question

我有一个 HTML 表，其中包含从数据库中提取的记录。 “呼叫时间”列中的条目是从 MySQL 数据库中检索的。 “计时器”列中的条目不是从数据库中检索到的，它是一个 Javascript 计时器。

一旦用户点击确认按钮，计时器停止和计时器的最终值必须被插入到数据库中。以下 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>

一些额外信息： 表中的每个条目都有一个像这样的UNIQUE FORM。我在表单中放置了一个隐藏字段，以便每个记录的最终经过时间值都可以存储在值部分中，如下所示。

<?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);
}

Answer 1

试试这个，

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

Answer 2

在$("#Confirm<?php echo $confirmvar; ?>").click(... 函数中，添加：

var stopvalue = $(this).parents('td').prev().text();

$(this).parents('td').find('input:hidden').val(stopvalue);

调整代码使其适用于您的表格布局。