Search code examples
javascriptphpjqueryformstimer

How to add 5 minute javascript countdown timer which submit a form


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

        <form name="myfm" id="myfm" method="post" action="Quiz.php">
        <table width=100%> <tr> <td width=30><td></td></td></tr> <table border=0>
        <?php $n=$n+1; ?>
        <tr><td>Question  <?php echo $n." "; echo $row[2]; ?></td></tr>
        <tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]" value=1><?php echo $row[3]; ?></td></tr>
        <tr><td class=style8> <input type="radio" name="ques['<?php echo $n; ?>'][]" value=2><?php echo $row[4];?></td></tr>
        <tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]"  value=3><?php echo $row[5];?></td></tr>
        <tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]"  value=4><?php echo $row[6];?></td></tr>

    <?php 
        }
        echo "<tr><td><input type=submit name=submit id='result' value='Get Result'></form>";
        ?>
        </table></table>
        </form>

Please help me..I am doing a quiz page that automatically submit form when countdown ends.Thankyou...


Solution

  • 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>