title: submit form after timer
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 10 ? "0" + minutes : minutes;
        seconds = seconds &lt; 10 ? "0" + seconds : seconds;
  
        $(display).html("&lt;b&gt;" + minutes + "m : " + seconds + "s" + "&lt;/b&gt;");
        if (--timer &lt; 0) {
          timer = duration;
          SubmitFunction();
          $('#display').empty();
          clearInterval(interVal)
        }
      }, 1000);
    }
  }
  
  function SubmitFunction() {
    $('#submitted').html('Time is up!');
    document.getElementById('mcQuestion').submit();
  }
  
  CountDown(5, $('#display'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="mcQuestion"&gt;
    &lt;div class="form-group"&gt;
      &lt;h5&gt;1. &lt;?= $mc_q[0] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=1; $i &lt; 5; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_1" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;2. &lt;?= $mc_q[5] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=6; $i &lt; 10; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_2" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;3. &lt;?= $mc_q[10] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=11; $i &lt; 15; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_3" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;4. &lt;?= $mc_q[15] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=16; $i &lt; 20; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_4" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;5. &lt;?= $mc_q[20] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=21; $i &lt; 25; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_5" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;6. &lt;?= $mc_q[25] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=26; $i &lt; 30; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_6" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;7. &lt;?= $mc_q[30] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=31; $i &lt; 35; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_7" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;8. &lt;?= $mc_q[35] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=36; $i &lt; 40; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_8" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;9. &lt;?= $mc_q[40] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=41; $i &lt; 45; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_9" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
  
      &lt;h5&gt;10. &lt;?= $mc_q[45] ?&gt;&lt;/h5&gt;
      &lt;ul class="list-unstyled mcq"&gt;
        &lt;?php for ($i=46; $i &lt; 50; $i++) : ?&gt;
        &lt;li&gt;
          &lt;input type="radio" name="mc_a_10" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;
          &lt;?=$ mc_q[$i] ?&gt;
        &lt;/li&gt;
        &lt;?php endfor; ?&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;button type="submit" class="btn btn-primary btn-xs" data-qid="&lt;?= $r-&gt;quiz_id ?&gt;"&gt;Submit Answer&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I created a js for a countdown timer and the idea is that after the time set it will automatically submit the form but in my case after the countdown timer nothing happens and the timer resets back to the original time and count down again doing it endlessly.</p>
  
  <p>Can you help me find the issue?</p>
  
  <p>Quiz Display</p>
  
  <pre><code>&lt;?php foreach ($quiz as $r) : ?&gt;
  
  &lt;div class="form-group"&gt;
      &lt;h3&gt;&lt;?= $r-&gt;quiz_title ?&gt;&lt;/h3&gt;
      &lt;h3&gt;&lt;center&gt;
      &lt;script language="JavaScript" src="assets\js\timer.js"&gt;&lt;/script&gt;
  
      &lt;div id="display"&gt;
  
      &lt;/div&gt;
      &lt;div id="submitted"&gt;
  
      &lt;/div&gt;
  
      &lt;/center&gt;
      &lt;/h3&gt;
      &lt;span class="help-block"&gt;&lt;?= $r-&gt;quiz_desc ?&gt;&lt;/span&gt;
      &lt;p&gt;Posted by: &lt;?= ucwords($r-&gt;firstname).' '.ucwords($r-&gt;lastname) ?&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;?php if ($r-&gt;quiz_type == 1) : ?&gt;
  
      &lt;?php $questions = unserialize($r-&gt;questionnaire); ?&gt;
      &lt;!-- start index at 1 --&gt;
      &lt;?php $questions = array_combine(range(1, count($questions)), array_values($questions)); ?&gt;
  
      &lt;hr&gt;
  
      &lt;form id="tfQuestion"&gt;
          &lt;div class="form-group"&gt;
  
              &lt;?php for ($i=1; $i&lt;11; $i++) : ?&gt;
                  &lt;div class="mb-25px"&gt;
                      &lt;h5&gt;&lt;?= $i.'. '.$questions[$i] ?&gt;&lt;/h5&gt;
                      &lt;span class="quiz-item-tf"&gt;
                          &lt;input type="radio" name="tf-&lt;?= $i ?&gt;" value="True" required&gt; True &amp;nbsp;
                          &lt;input type="radio" name="tf-&lt;?= $i ?&gt;" value="False" required&gt; False
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;?php endfor; ?&gt;
  
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;button type="submit" class="btn btn-primary btn-xs" data-qid="&lt;?= $r-&gt;quiz_id ?&gt;"&gt;Submit Answer&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
  &lt;?php else : ?&gt;
  
      &lt;?php
          $answers     = unserialize($r-&gt;answers);
          $mc          = unserialize($r-&gt;quiz_mc);
          // remove all True answers
          for ($i=1; $i &lt; 61; $i++) {
              if ($mc[$i]-&gt;value &lt;&gt; 'True') {
                  $mc_q[] = $mc[$i]-&gt;value;
              }
          }
      ?&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
  
              &lt;form id="mcQuestion"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;h5&gt;1. &lt;?= $mc_q[0] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=1; $i &lt; 5; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_1" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;2. &lt;?= $mc_q[5] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=6; $i &lt; 10; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_2" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;3. &lt;?= $mc_q[10] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=11; $i &lt; 15; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_3" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;4. &lt;?= $mc_q[15] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=16; $i &lt; 20; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_4" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;5. &lt;?= $mc_q[20] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=21; $i &lt; 25; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_5" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;6. &lt;?= $mc_q[25] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=26; $i &lt; 30; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_6" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;7. &lt;?= $mc_q[30] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=31; $i &lt; 35; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_7" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;8. &lt;?= $mc_q[35] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=36; $i &lt; 40; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_8" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;9. &lt;?= $mc_q[40] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=41; $i &lt; 45; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_9" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
  
                      &lt;h5&gt;10. &lt;?= $mc_q[45] ?&gt;&lt;/h5&gt;
                      &lt;ul class="list-unstyled mcq"&gt;
                          &lt;?php for ($i=46; $i &lt; 50; $i++) : ?&gt;
                              &lt;li&gt;&lt;input type="radio" name="mc_a_10" value="&lt;?= $mc_q[$i] ?&gt;" required&gt;&amp;nbsp;&amp;nbsp;&lt;?= $mc_q[$i] ?&gt;&lt;/li&gt;
                          &lt;?php endfor; ?&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;button type="submit" class="btn btn-primary btn-xs" data-qid="&lt;?= $r-&gt;quiz_id ?&gt;"&gt;Submit Answer&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;?php endif; ?&gt;
  </code></pre>
  
  
  
  <p>Timer.js</p>
  
  <pre><code>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 &lt; 10 ? "0" + minutes : minutes;
                  seconds = seconds &lt; 10 ? "0" + seconds : seconds;
  
                  $(display).html("&lt;b&gt;" + minutes + "m : " + seconds + "s" + "&lt;/b&gt;");
                  if (--timer &lt; 0) {
                      timer = duration;
                     SubmitFunction();
                     $('#display').empty();
                     clearInterval(interVal)
                  }
                  },1000);
          }
      }
  
      function SubmitFunction(){
     $('#submitted').html('Time is up!');
       document.getElementById('mcQuestion').submit();
      }
  
       CountDown(5,$('#display'));
  </code></pre>