We Keep Coding

When time is finished for Jquery count down how to popup and submit form?

var timer2 = "00:05";
var interval = setInterval(function() {
var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
if (minutes < 0) clearInterval(interval);
seconds = (seconds < 0) ? 59 : seconds;
seconds = (seconds < 10) ? '0' + seconds : seconds;
//minutes = (minutes < 10) ? minutes : minutes;
$('.demo').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
setTimeout(function() {
$('#form').submit();
alert('Success');
}, 5000);
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="demo"></div>
<form id="form">
<input name="hello" value="hello">
</form>
Hello i prepare a quiz countdown time with jquery, i want to popup that "Quiz is finished" and then submit the form when press "Ok" button.
This is my fiddle..

You are loading a countdown you are not using and you need to move the submit into the if statement
I removed the countdown.js and test if both minutes and seconds are 0
not sure why you want to wait another 5 seconds to submit, but here you go:
var timer2 = "00:05";
var interval = setInterval(function() {
var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
seconds = (seconds < 0) ? 59 : seconds;
seconds = (seconds < 10) ? '0' + seconds : seconds;
//minutes = (minutes < 10) ? minutes : minutes;
$('.demo').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
if (minutes === 0 && seconds <= 0) {
clearInterval(interval);
setTimeout(function() {
$('#form').submit();
alert('Success');
}, 5000);
}
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo"></div>
<form id="form">
<input name="hello" value="hello">
</form>

Resetting the setInterval puts it in a multiple loop interval instead

In this JSfiddle, I have a code where if you click on the button, it automatically creates another set interval within the old one,
I have clearInterval but for some reason, it's not working
(Try clicking on the timer button multiple times)
<span>LIVE: Election results will refresh in <span id="time">2:00</span> minutes.</span>
<input type="button" value="Timer" id="btn">
<script>
$("#btn").on('click', function() {
var twoMinutes = 60 * 2,
display = document.querySelector('#time');
startTimer(twoMinutes, display);
});
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
var interval;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
} </script>
enter link description here

Problem is because you're calling the interval var within the function scope, while you should be declaring it on a global scope, try this
var interval; // global var
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
}

JavaScript count-down-timer with sopporting cancel and restart

Here i have a simple javascript which i want to making a simple CountDownTimer with cancel and restarting features, unfortunately after starting timer using setInterval that's return only 4 number in console and i can't fix that. without assuming this problem clearInterval not working to which i want to support cancel and restart again this time
<script type="text/javascript">
var fiveMinutes = 5, display = document.querySelector('#time');
let myTimer = function (){
let timer = fiveMinutes, minutes, seconds;
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
$('#resend').show();
$('#time').hide();
clearInterval(this);
}
console.log(timer);
};
$('#startTimer').on('click', function(){
$('#resend').hide();
$('#time').show();
setInterval(myTimer , 1000);
});
</script>

Your code fixed below. The main problem was fiveMinutes permanently being reassigned to 5, which I solved with a closure. Also it was not multiplied by 60 to be converted in seconds.
const display = document.querySelector('#time');
let interval;
function myTimer (timer) {
return function () {
let minutes, seconds;
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
$('#resend').show();
$('#time').hide();
clearInterval(interval);
}
console.log(timer);
}
};
$('#startTimer').on('click', function () {
$('#resend').hide();
$('#time').show();
clearInterval(interval);
interval = setInterval(myTimer(5 * 60), 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time"></div>
<button id="startTimer">Start</button>

Javascript timer to use multiple times in a page

I have this Javascript count down timer that works perfectly. Only problem is i can use it for only one time in one page. I want to use it multiple times.
I think script use id ="timer" that is why i am not able to use it multiple times.
Below is the JS code:
<script>
var startTime = 60; //in Minutes
var doneClass = "done"; //optional styling applied to text when timer is done
var space = ' ';
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
var intervalLoop = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = "00" + space + minutes + space + seconds;
if (--timer < 0) {
document.querySelector("#timer").classList.add(doneClass);
clearInterval(intervalLoop);
}
}, 1000);
}
window.onload = function() {
var now = new Date();
var hrs = now.getHours();
var setMinutes = 60 * (startTime - now.getMinutes() - (now.getSeconds() / 100)),
display = document.querySelector("#timer");
startTimer(setMinutes, display);
};
</script>

Just declare intervalLoop outside of the startTimer function, it'll be available globally.
var intervalLoop = null
function startTimer(duration, display) {
intervalLoop = setInterval(function() { .... }
})
function stopTimer() {
clearInterval(intervalLoop) // Also available here!
})

window.setInterval(function(){ Your function }, 1000);
Here 1000 means timer 1 sec

I think something like this could be helpful:
Timer object declaration
var timerObject = function(){
this.startTime = 60; //in Minutes
this.doneClass = "done"; //optional styling applied to text when timer is done
this.space = ' ';
return this;
};
timerObject.prototype.startTimer = function(duration, display) {
var me = this,
timer = duration,
minutes, seconds;
var intervalLoop = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = "00" + me.space + minutes + me.space + seconds;
if (--timer < 0) {
// not sure about this part, because of selectors
document.querySelector("#timer").classList.add(me.doneClass);
clearInterval(intervalLoop);
}
}, 1000);
}
Use it like
var t1 = new timerObject();
var t2 = new timerObject();
t1.startTimer(a,b);
t2.startTimer(a,b);
JS Fiddle example:
UPD1 commented part so the the timer could be stopped
https://jsfiddle.net/9fjwsath/1/

Pomodoro Timer: Variable value goes to 'NaN'

I'm trying to build a Pomodoro clock like http://codepen.io/GeoffStorbeck/full/RPbGxZ/. The value of seconds goes to NaN randomly and then returns to normal after starting 'break'.
$('#circle a').click(function() {
var timer = $('.time > span').html();
timer = timer.split(':');
var minutes = timer[0]; //Value of minutes
var seconds = timer[1]; //Value of seconds
var settimer = setInterval(function() {
seconds -= 1;
console.log(seconds);
if (seconds < 0 && minutes != 0) {
minutes -= 1;
minutes = String(minutes);
seconds = 59;
} else if (seconds < 10 && seconds.length != 2)
seconds = '0' + seconds;
if (minutes < 10 && minutes.length < 2)
minutes = '0' + minutes;
$('.time > span').html(minutes + ':' + seconds);
//Start break when session is completed
if (minutes == 0 && seconds == 0) {
$('.upper').find('h1').text('BREAK');
var time = $('#break').find('span').text();
$('.time > span').html('0' + time + ':00');
$('#circle a').trigger("click"); //Start timer for break
}
}, 1000);
});
Here's the link to the codepen
http://codepen.io/ibrahimjarif/pen/wMKJWN
How do I fix the NaN issue?
And is there any better way to implement this?

The code $('#circle a').trigger("click"); //Start timer for break recursively calls the function that was executing originally. This call starts a new timer while the original one was in progress.
The seconds value for the original timer went to NaN when the new timer was executing. There were two values for second due to two timers. The value of seconds in the original timer caused the unexplained appearance of NaN.
NOTE: Both the timers were running simultaneously all the time.
The simplest fix was to stop the current timer before starting a new one.
Here's the updated code
$('#circle a').click(function() {
var timer = $('.time > span').html().split(':');;
var minutes = Number(timer[0]),
seconds = Number(timer[1]);
var settimer = setInterval(function() {
seconds -= 1;
if (seconds < 0 && minutes != 0) {
minutes -= 1;
seconds = 59;
} else if (seconds < 10 && seconds.length != 2)
seconds = '0' + seconds;
if (minutes < 10 && minutes.toString().length < 2)
minutes = '0' + minutes;
$('.time > span').html(minutes + ':' + seconds);
if (minutes == 0 && seconds == 0) {
clearInterval(settimer); //Stop the current timer
var upper_text = $('.upper').find('h1');
var time;
if (upper_text.text() == 'BREAK') {
upper_text.text('Session');
time = $('#session').find('span').text();
} else {
upper_text.text('BREAK');
time = $('#break').find('span').text();
}
$('.time > span').html(time + ':00');
$('#circle a').trigger("click"); //Start new timer
}
}, 1000);
});