Insert values into multiple hidden fields each in a different form using Javascript

Question

I have a HTML table which has records pulled in from the database. The entries from the Column "Time of Call" is retrieved from the MySQL Database. The entries in the column "Timer" is not retrieved from the database, it's a Javascript timer.

enter image description here

Once the user clicks on the Confirm Button, the timer Stops and the final value of the timer must be INSERTED into the database. The following Javascript timer is a slightly modified version of someone else's code (Elapsed time from a given time in the database)

Problem: I don't know how to insert the Elapsed time Value into the Hidden Form Fields. Please note that there is One Hidden form field for each entry with the ID id="stoppedtime<?php echo $stopid; ?> , I know I have to keep incrementing the value of the stopid variable. I need to insert every single elapsed time (after the confirm button is pressed) into the corresponding hidden form fields so that the value from these hidden form fields can later be INSERTED into the database.

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

Some Extra Information: Every entry in the table has a UNIQUE FORM like this. I have placed a hidden field in the form so that each of the records' FINAL ELAPSED TIME VALUE can be stored in value part as in below.

<?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="">**
.....

Would really appreciate it if you could help me with this, Thank you!

EDIT:

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

So what's the problem? You have a hidden input field, they all have IDs. Just use `document.getElementById('stoppedtime'+id).value=value_you_want;` — Nick Pickering, Feb 22 '13 at 08:46
What are `$datevar` and `$elapsedvar`....is they work properly..? — Sherin Jose, Feb 22 '13 at 08:54
@Sherin Jose, They are just variables so that I can give the divs different IDs like #date1,#date2 , same goes for $elapsedvar — Belgarion, Feb 22 '13 at 08:56
Then similarly you can access the hidden inputs using the ID #hiden1,#hiden2....then use `document.getElementById('#id').value=yourvalue;` — Sherin Jose, Feb 22 '13 at 08:59
I think `$stopid`,`$datevar` and `$elapsedvar` indicates the same values...is it...???? — Sherin Jose, Feb 22 '13 at 09:08
@Sherin Jose, Haha! Yes, I will remove them later and combine them into a single count variable — Belgarion, Feb 22 '13 at 09:12
@NicholasPickering, I updated the update function, where else do I have to change? I'm sorry, I'm really new to Javascript — Belgarion, Feb 22 '13 at 09:13
`x.value=; prettyPrintTime(Math.floor(elapsedTime / 1000)) ` is broken, move the semicolon to the end of the line. — Nick Pickering, Feb 22 '13 at 09:15
After that just add an onclick event to your button: `onclick="update(correctID)` — Nick Pickering, Feb 22 '13 at 09:18
@NicholasPickering, Don't I have to change this part, as update now takes in an id argument? timer = setInterval(function() {update()}, interval * 1000); — Belgarion, Feb 22 '13 at 09:21
`timeLogger.start();` needs to be something like `timeLogger.start(document.getElementById('element_id').id);` — Nick Pickering, Feb 22 '13 at 09:31
@NicholasPickering, Thanks! The other solution was more elegant. =) — Belgarion, Feb 22 '13 at 11:25

score 1 · Answer 1 · answered Feb 22 '13 at 08:59

1

In the $("#Confirm<?php echo $confirmvar; ?>").click(... function, add this:

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

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

Adjust the code so that it works with your table layout.

answered Feb 22 '13 at 08:59

silkfire

24,585
15
82
105

score 1 · Accepted Answer · answered Feb 22 '13 at 09:26

Try this,

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

$(hiden) -> This finds for elements with the ID hiden right? The elements have different IDs so I don't think this will work =) — Belgarion, Feb 22 '13 at 09:36

Insert values into multiple hidden fields each in a different form using Javascript

2 Answers2

Linked