I want to add 5 minute countdown timer which submit a form to my php page.
/*timer*/
var seconds = 300;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60),
remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
//form1 is your form name
document.form1.submit();
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
.timer {
width: 100px;
font-size: 2.5em;
text-align: center;
}
<div class="timer">
<time id="countdown">5:00</time>
</div>
<form action="index.php" name="form1" id="form1">
Hope this helps
var trig = setInterval(timer,1000);
var counter=0;
var min=4;
var sec=60;
function timer(){
sec=--sec;
if(sec===0){
min=--min;
sec=59;
counter=++counter;
}
if(counter===5){
sec=0;
min=0;
clearInterval(trig);
functionSubmit();
document.write("Submitted");
}
document.getElementById("output").innerHTML = min+" : "+sec;
}
<p>Autosubmit in <span id="output"></span></p>
Here is what you want, I used a while ago - https://jsfiddle.net/v5uc9wfx/3/
function CountDown(duration, display) {
if (!isNaN(duration)) {
var timer = duration, minutes, seconds;
var interVal = 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).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");
if (--timer < 0) {
timer = duration;
SubmitFunction();
$(display).empty();
clearInterval(interVal)
}
}, 1000);
}
}
Here -
CountDown(duration, display)
Duration is passed in seconds, i.e. 300 second= 5 Minutes. display is another parameter you want to display where.
You might need to clear interval as well-
clearInterval(interVal)
With form
function CountDown(duration, display) {
if (!isNaN(duration)) {
var timer = duration, minutes, seconds;
var interVal= 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).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");
if (--timer < 0) {
timer = duration;
SubmitFunction();
$('#display').empty();
clearInterval(interVal)
}
},1000);
}
}
function SubmitFunction(){
$('form').submit();
}
CountDown(300,$('#display'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display">
</div>
<form action="/" >
<lable>Name: <input type="text"></lable>
</form>
setTimeout()
will fire a function SubmitForm
after 300000
milliseconds = 5 minutes.
function SubmitForm(){
$("form").submit();
};
setTimeout(SubmitForm,300000);//5*60*1000
you can use Window setTimeout() Method to call submit form after 5 minutes
setTimeout(function submitform()
{
document.myform.submit();
}, 60*1000*5);