I need to pass totalSeconds var to HTML form element

[schwim]

Hi there guys!

I’m trying to figure out how to pass totalSeconds to the HTML form element

<input type="hidden" id="seconds" name="seconds" value="NEED IT HERE">

Timer js:

var hours, minutes, seconds; // variables for time units
var timer = document.getElementById("tiles"); // get tag element
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
	++totalSeconds;
	seconds = pad(totalSeconds % 60);
	minutes = pad(parseInt(totalSeconds / 60));
	hours = pad(parseInt(totalSeconds / 3600));

	// format timer string + set tag value
	timer.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
	
  
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

How do I do this? My script is printing to the timer on the page so I know I should be able to figure this out but I’m failing to pass it successfully.

[m_hutley]

Well you’ve got all the bits and pieces of what you need to figure it out. Let’s take a look.

@schwim

<input type=“hidden” id=“seconds” name=“seconds” value=“NEED IT HERE”>

So we know what attribute we want to modify.

@schwim

var timer = document.getElementById(“tiles”); // get tag element

We have an example (even labelled) of how to get a reference to an element by using its ID.…

@schwim

timer.innerHTML = “<span>” + hours + “</span><span>”…

And we have an example of setting an attribute of a tag to a value.

Stick them together:
instead of innerHTML, we want to change the value attribute.
instead of looking up the ID for tiles, we want to change an element with id “seconds”.
instead of making it this long string, we want to change it to the value of totalSeconds.

Try it yourself, or if you’re truly stuck…

document.getElementById(“seconds”).value = totalSeconds;

[schwim]

Hi there @m_hutley and thanks for the help!

I tried to figure it out with your instruction but kept messing up with the implementation then I found the hidden line Thanks for that!

Unfortunately, I’m still unable to implement it properly. When I submit the form, it just results in 0.

You can find a demo page here: http://schw.im/timer.php . If you use the form, it will display the seconds captured from $_POST[‘seconds’] .

and so you don’t have to dig through all of it, here’s the form(the js is there just until I figure out what I’m doing wrong).

What am I messing up now?

<form name="timetracker" method="POST" action="/timer.php">
<input type="hidden" id="seconds" name="seconds" value="">
<div class="row" style="min-height: 250px;">
	<div id="timer">
		<div id="tiles"></div>
		<ul class="labels">
			<li>Hours</li>
			<li>Mins</li>
			<li>Secs</li>
		</ul>
	</div>
	<script>
		(function(d) {
			"use strict";
			var seconds = 0, si, h0, m0, s0, flag = true;

			var timer = d.getElementById( "tiles" ),
			start = d.getElementById( "start" ),
			reset = d.getElementById( "reset" );

			timer.innerHTML = "<span>00</span><span>00</span><span>00</span>";

			start.addEventListener("click", 
			function() {
				if ( flag === true ) {
					seconds ++;
					si = setInterval(  
					function(){
						h0 = pad( parseInt( seconds / 3600 ) );
						m0 = pad( parseInt( seconds / 60 % 60 ) );
						s0 = pad( seconds % 60 );
						timer.innerHTML = "<span>" + h0 + "</span><span>" + m0 + "</span><span>" + s0 + "</span>";
						seconds ++;
					}, 1000 );
					start.textContent = "stop";
					flag = false;
				}
				else {
					clearInterval(si);
					start.textContent = "start"; 
					flag = true;
			}}, false );

			reset.addEventListener("click", 
				function() {
				clearInterval( si );
				start.textContent = "start"; 
				flag = true;
				timer.innerHTML = "<span>00</span><span>00</span><span>00</span>";
				seconds = 0;
			}, false );

			function pad( n ) {
				return ( n < 10 ? "0" : "" ) + n;
			}
			
			function eventFire(el, etype){
				if (el.fireEvent) {
					el.fireEvent("on" + etype);
				} else {
					var evObj = document.createEvent("Events");
					evObj.initEvent(etype, true, false);
					el.dispatchEvent(evObj);
				}
			}
			
			// This should enter seconds to pass to the HTML form.
			document.getElementById("seconds").value = seconds;
			
			// Only if you need to continue the timer on page load
			eventFire(document.getElementById("start"), "click");
			
		}(document));
	</script>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" style="text-align:center;">
	<input type="submit" name="submit" value="submit">
</div>
</form>

[schwim]

Well, I’ve tried moving the important line around in the script, moving it to it’s own script, renaming the var(I thought maybe it was conflicting with the form element) but I can’t get any value other than zero when the form is submitted.

Any help getting the seconds passed to the form element would be greatly appreciated!

[Paul_Wilkins]

The section of code where you have the following comment:

// This should enter seconds to pass to the HTML form.

is a misleading comment.

That section of code is only run on page load, which is why you’re getting zero.

I recommend that you take the span elements around the time values, and whenever they are updated, copy their values to hidden input fields. That way those values will be submitted with the form.

[schwim]

I never thought of that, which is embarrassing. I assumed that the loop would set the var, which could then be used outside of it.

Thanks so much for your help!