Search code examples
javascripthttp-redirecttimetimercountdowntimer

Countdown timer automaticaly trigger the Submit Button


I am making an Online Exam Project on PHP.

I want the countdown timer to trigger submit button automaticaly when timeout ?

Also if possible, display another div tag below the timer if the timer reaches 1 minute mark.

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  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 = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var examTime = 60 * 5,
    display = document.querySelector('#time');
  startTimer(examTime, display);
};
#timediv {
  background-color: #003300;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
}
<div id="timediv">Exam ends in <span id="time">05:00</span> minutes!</div>
<form action="samepage.php" method="post">
  <input type="text" />
  <input type="submit" value="Submit Answer Paper" />
</form>


Solution

  • I hope the following will be fairly easy to understand. The question is a little vague when it comes to " if possible, display another below the timer if the timer reaches 1 minute mark." so I interpreted that to mean "provide a warning or some sort" to the user when there is 1 minute left in the exam.

    The command to submit the form is called when the countdown timer has reached it's designated time - the method is simply Form.submit() where Form is a reference to the form, derived in whichever manner suits.

    FYI - the timer has been modified to a little over 1minute initially so that the effect can be seen without waiting, and waiting and waiting...

    Also - in the code here I used alert to indicate that time was running out... it would be better to display a message on screen!

    function startTimer(duration, display) {
    	var timer = duration;
    	var minutes, seconds;
    	var warning = 60;
    	var ok=false;
    	var form=document.forms.exam;
    	
    	var t=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 = minutes + ":" + seconds;
    		
    		if( timer <= warning && !ok ){
    			alert('Time is running out.... less than 1 minute to go!');
    			ok=true;
    		}
    
    		if (--timer <= 0) {
    			timer = duration;
    
    			if( !isNaN( t ) )clearInterval( t );
    			
    			// submit the form...
    			form.submit();
    		}
    	}, 1000);
    }
    
    window.onload = function() {
    	var examTime = 60 * 1.1;
    	var display = document.querySelector('#time');
    	startTimer(examTime, display);
    };
    <div id='timediv'>Exam ends in <span id='time'>05:00</span> minutes!</div>
    <form name='exam' action='samepage.php' method='post'>
      <input type='text' />
      <input type='submit' value='Submit Answer Paper' />
    </form>