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

Question

I have an HTML table in which records from a database are written. Entries from the Call Time column are retrieved from the MySQL database. The entries in the Timer column are not retrieved from the database; this is a Javascript timer.

As soon as the user presses the confirmation button, the timer stops , and the final timer value must be COMPLETED in the database. The next Javascript timer is a slightly modified version of another user's code ( Elapsed time from a specific time in the database )

Problem: I do not know how to insert the Elapsed Time value in the hidden form fields. Please note that for each record there is one hidden form field with id="stoppedtime<?php echo $stopid; ?> , I know that I need to continue to increase the value of the stop variable. I need to insert every elapsed time (after clicking confirmation buttons) in the corresponding fields of the hidden form, so that subsequently the value from these hidden form fields was entered 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> 

Additional Information: Each entry in the table has a UNIQUE FORM like this. I put a hidden field in the form so that each of the TIME RECORDING RECORDING RECORDS can be saved in the value as shown 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="">** ..... 

It would be very appreciated if you could help me with this, thanks!

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

Answer 1

Try it,

 <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

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

 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.