I am new to php and javascript so please excuse my ignorance. I am trying to create a javascript to insert a timestamp to multiple cells. I did have a button to insert or update the mysql database to input the timestamp now(), but thats not the route I'm looking for. If someone has a better idea please let me know. Basically I would like to click on a button to insert time into the <td><center><input id="field" type="text" name="time[]" size="11"></center></td>.
<?php
include 'config.php';
?>
<html>
<head>
<script>
function getTimeStamp(id) {
var now = new Date();
return (now.getHours() + ':' + ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())));
}
function setTime() {
document.getElementById('field').value = getTimeStamp();
</script>
</head>
<body >
<div>
<button type="button" onclick="setTime();">TimeStamp</button>
<table >
<tr >
<td >id</td>
<td >First Name</td>
<td >Last Name</td>
<td >Location</td>
<td >Remarks</td>
<td >Timestamp</td>
</tr>
<?php
while ($row = mysqli_fetch_array($sql)){
print '<tr>
<td><input type="hidden" name="id[]" value="'. $row[0] .'">' .$row[0]. '</td>
<td><input type="hidden" name="first[]" value="'. $row[1] .'">' .$row[1]. '</td>
<td><input type="hidden" name="last[]" value="'. $row[2] .'">' .$row[2]. '</td>
<td><input name="location[]" value="'. $row[3] .'">' .$row[3]. '</td>
<td><center><input type="text" name="remarks[]" size="43"></center></td>
<td><center><input id="field" type="text" name="time[]" size="11"></center></td>
</tr>';
}
?>
</table>
</div>
</body>
</html></div>
If I understood correctly you want to set the timestamp in all of the input fields time[] by clicking a button?
I couldn't fully test the function because your getTimestamp function calls other functions not defined here but it should work...
function setTime() {
var col=document.querySelectorAll('input[type="text"][name="time[]"]');
if(col){
for( var n in col ) if(col[n].nodeType==1) col[n].value=getTimeStamp();
}
}
Based upon your comment
If you wish to set the timestamp uniquely to each text input based upon clicking into the field then the function and assignments needs to be a little different. As you would no longer need the button with attached setTime function you could instead use something like this and remove the button and delete the setTime function...
function bindTimeEvents(){
var col=document.querySelectorAll('input[type="text"][name="time[]"]');
if( col ){
for( var n in col )if( col[ n ].nodeType ==1 ){
col[n].addEventListener('click',function(e){
this.value=getTimeStamp();
}.bind( col[n] ),false);
}
}
}
document.addEventListener('DOMContentLoaded',bindTimeEvents,false);
You first need to add a class not id as id is unique & class can be duplicate so rather using <input id="field" type="text" name="time[]" size="11"> this change to <input id="field" class="timestamp-fields" type="text" name="time[]" size="11"> then
change setTime function
function setTime() {
var elements = document.getElementsByClassName('timestamp-fields'), l = elements.length, t = getTimeStamp();
for (var i = 0; i < l; i++) {
elements[i].value = t;
}
}
But you must remember you are using clients
Datewhich is notUTC/GMT 0so you might need to convert it to your server end using PHP.