How to populate multiple fields with the time in HTML form using a Javascript function?

Question

I have a VERY extensive HTML form for collecting data during a complex manufacturing process. The data collection requires users to stamp the date and time in perhaps 80 separate fields - and I am using buttons as labels for each of the data fields.

I have a JavaScript function which gives me the desired results for an individual field - but I don't want to have to duplicate the code for the function and change the name for each required entry.

I'm a novice at Javascript and only a beginner at HTML - but I know this can be done... I just can't figure out how. I know it has to do with passing the ID tag for my HTML fields (into a loop?) to be used as variables in the code... but I'm not clear on how.

Here's the code I'm thinking of using for my timestamp (setup for 1 field):

<script type="text/javascript">
function getClockTime()
{
   var now    = new Date();
   var hour   = now.getHours();
   var minute = now.getMinutes();
   var second = now.getSeconds();
   if (hour   < 10) { hour   = "0" + hour;   }
   if (minute < 10) { minute = "0" + minute; }
   if (second < 10) { second = "0" + second; }
   var timeString= hour +
                    ':' +
                    minute +
                    ':' +
                    second
document.getElementById("txtTime").value = timeString;
}
</script> 

If someone can give me a clue about how to approach this I'd sure appreciate it.

Answer 1

Firstly, if you modify your JS function to return a value, you can call it more than once and reuse the code. So substitute:

document.getElementById("txtTime").value = timeString;

for

return timeString;

Then, as you have jQuery available, you can iterate through the fields that need dates. If you give them a class of "dateField" (for example), ie <input class="dateField" type="text" name="whatever" /> , you can then do:

$(".dateField").val(getClockTime());

EDIT: other answer correctly points out that calling getClockTime() is unnecessarily intensive (it also will potentially get you different times). So, as suggested, a more fool-proof and better performing version:

theTime=getClockTime();
$(".dateField").val(theTime);

Answer 2

If you're using jQuery (which I recommend you do for a task like this, especially since you tagged the question as "jquery"), you can use the following:

function getClockTime()
{
    var now    = new Date();
    var hour   = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    if (hour   < 10) { hour   = "0" + hour;   }
    if (minute < 10) { minute = "0" + minute; }
    if (second < 10) { second = "0" + second; }
    var timeString= hour +
                    ':' +
                    minute +
                    ':' +
                    second
    return timeString;
}

$(document).ready(function() {
    var time = getClockTime();
    $("input.needsTime").val(time);
});

Then, for every input that needs a time inserted, simply use:

<input type="text" name="whatever" class="needsTime" />

See this demo .

Your original getClockTime function is used to get the current time. Then, when the document is done loading, this function is set to the variable time so it doesn't have to be called more than one (saves a bunch of calculations and performance). Finally, jQuery cycles through all input elements with the class needsTime and sets their values accordingly.

Answer 3

I've found that this works - rather well:

<!-- Posts current time (HH:MM:SS) into a field with same id + "Time" as the button.
Each button must have an id value and onclick="inserttime(this.id)" -->
<script type="text/javascript">
function inserttime(butID) {
var timeFLD = (butID+"Time")
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
  if (minutes < 10) {minutes = "0" + minutes}
  if (seconds < 10) {seconds = "0" + seconds}
  pTime= hours + ":" + minutes + ":" + seconds + " "
document.getElementById(timeFLD).value = pTime
}
</script>