How To Add 5 Minute Javascript Countdown Timer Which Submit A Form

Question

I want to add 5 minute countdown timer which submit a form to my php page.

Solution 1:

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>

Solution 2:

Baca Juga

/*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">

Solution 3:

you can use Window setTimeout() Method to call submit form after 5 minutes

setTimeout(function submitform()
{
  document.myform.submit();
}, 60*1000*5);

Solution 4:

setTimeout() will fire a function SubmitForm after 300000 milliseconds = 5 minutes.

function SubmitForm(){
    $("form").submit();
};
setTimeout(SubmitForm,300000);//5*60*1000

Solution 5:

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>

JavaScript Download