This topic is locked
[SOLVED]

Need to get data from JavaScript Onload Event

6/11/2024 9:43:17 AM
ASPRunner.NET General questions
G
Garyl author

I am sure that there is an easy way to do this, I just been going around for the past two days trying to figure this out.

I have create a timer on a page, and it works great, but when saved I need to capture the time and save it to a field then store it in the database.

My code in the JavScript OnLoad Event is here:

var Clock = {
totalSeconds: 0,
startTimer: function() {
if (!this.interval) {
var self = this;
function pad(val) {
return val > 9 ? val : '0' + val;
}
this.interval = setInterval(function() {
self.totalSeconds += 1;
document.getElementById('minutes').innerHTML =
pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById('seconds').innerHTML =
pad(parseInt(self.totalSeconds % 60));
// Update hidden input field with totalSeconds
}, 1000);
}
},
getTimer: function(){
Clock.totalSeconds;
},
resetTimer: function() {
Clock.totalSeconds = null;
clearInterval(this.interval);
document.getElementById('minutes').innerHTML = '00';
document.getElementById('seconds').innerHTML = '00';
delete this.interval;
},
pauseTimer: function() {
clearInterval(this.interval);
delete this.interval;
},
resumeTimer: function() {
this.startTimer();
},
};

document.getElementById('startbtn').addEventListener('click', function() {
Clock.startTimer();
});
document.getElementById('pausebtn').addEventListener('click', function() {
Clock.pauseTimer();
});
document.getElementById('resumebtn').addEventListener('click', function() {
Clock.resumeTimer();
});
document.getElementById('resetbtn').addEventListener('click', function() {
Clock.resetTimer();
});

In designer I have my HTML code

<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="timer">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div id="control">
<button id="startbtn">START</button>
<button id="pausebtn">PAUSE</button>
<button id="resumebtn">RESUME</button>
<button id="resetbtn">RESET</button>
<input type="hidden" id="totalSeconds" value="0" />
</div>
</body>
</html>

And my CSS

timer{

font-size: 100px;
font-weight: bold;
color: darkblue;

}

control>#startbtn{

background-color:green;
color:white;

}

control>#pausebtn{

background-color:blue;
color:white;

}

control>#resumebtn{

background-color:orange;
color:white;

}

control>#resetbtn{

background-color:red;
color:white;

}

img alt

So all that works great,

Now when the user clicks save I need to be able to capture that time and save it to a field, i looked through the documentation, just cannot figure it out.

Thanks
Gary

G
Garyl author 6/11/2024

I figured it out,

Thanks
Gary

F
FR 8/5/2024

Perhaps post the solution?

G
Garyl author 8/26/2024

In response to posting the solution, not sure if it is right or wrong, but it works, I just added this code right here. The field on the screen is readonly and is updated at the same time the time updates. When you now perform a save the total time is already there and saves to the DB.

img alt

Gary