submit form after timer

问题

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() {
  $('#submitted').html('Time is up!');
  document.getElementById('mcQuestion').submit();
}

CountDown(5, $('#display'));

<form id="mcQuestion">
  <div class="form-group">
    <h5>1. <?= $mc_q[0] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=1; $i < 5; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_1" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>2. <?= $mc_q[5] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=6; $i < 10; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_2" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>3. <?= $mc_q[10] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=11; $i < 15; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_3" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>4. <?= $mc_q[15] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=16; $i < 20; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_4" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>5. <?= $mc_q[20] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=21; $i < 25; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_5" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>6. <?= $mc_q[25] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=26; $i < 30; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_6" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>7. <?= $mc_q[30] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=31; $i < 35; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_7" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>8. <?= $mc_q[35] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=36; $i < 40; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_8" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>9. <?= $mc_q[40] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=41; $i < 45; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_9" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>10. <?= $mc_q[45] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=46; $i < 50; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_10" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">Submit Answer</button>
  </div>
</form>

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.

Can you help me find the issue?

Quiz Display

<?php foreach ($quiz as $r) : ?>

<div class="form-group">
    <h3><?= $r->quiz_title ?></h3>
    <h3><center>
    <script language="JavaScript" src="assets\js\timer.js"></script>

    <div id="display">

    </div>
    <div id="submitted">

    </div>

    </center>
    </h3>
    <span class="help-block"><?= $r->quiz_desc ?></span>
    <p>Posted by: <?= ucwords($r->firstname).' '.ucwords($r->lastname) ?></p>
</div>

<?php if ($r->quiz_type == 1) : ?>

    <?php $questions = unserialize($r->questionnaire); ?>
    <!-- start index at 1 -->
    <?php $questions = array_combine(range(1, count($questions)), array_values($questions)); ?>

    <hr>

    <form id="tfQuestion">
        <div class="form-group">

            <?php for ($i=1; $i<11; $i++) : ?>
                <div class="mb-25px">
                    <h5><?= $i.'. '.$questions[$i] ?></h5>
                    <span class="quiz-item-tf">
                        <input type="radio" name="tf-<?= $i ?>" value="True" required> True &nbsp;
                        <input type="radio" name="tf-<?= $i ?>" value="False" required> False
                    </span>
                </div>
            <?php endfor; ?>

        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">Submit Answer</button>
        </div>
    </form>

<?php else : ?>

    <?php
        $answers     = unserialize($r->answers);
        $mc          = unserialize($r->quiz_mc);
        // remove all True answers
        for ($i=1; $i < 61; $i++) {
            if ($mc[$i]->value <> 'True') {
                $mc_q[] = $mc[$i]->value;
            }
        }
    ?>
    <div class="row">
        <div class="col-md-12">

            <form id="mcQuestion">
                <div class="form-group">
                    <h5>1. <?= $mc_q[0] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=1; $i < 5; $i++) : ?>
                            <li><input type="radio" name="mc_a_1" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>2. <?= $mc_q[5] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=6; $i < 10; $i++) : ?>
                            <li><input type="radio" name="mc_a_2" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>3. <?= $mc_q[10] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=11; $i < 15; $i++) : ?>
                            <li><input type="radio" name="mc_a_3" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>4. <?= $mc_q[15] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=16; $i < 20; $i++) : ?>
                            <li><input type="radio" name="mc_a_4" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>5. <?= $mc_q[20] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=21; $i < 25; $i++) : ?>
                            <li><input type="radio" name="mc_a_5" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>6. <?= $mc_q[25] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=26; $i < 30; $i++) : ?>
                            <li><input type="radio" name="mc_a_6" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>7. <?= $mc_q[30] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=31; $i < 35; $i++) : ?>
                            <li><input type="radio" name="mc_a_7" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>8. <?= $mc_q[35] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=36; $i < 40; $i++) : ?>
                            <li><input type="radio" name="mc_a_8" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>9. <?= $mc_q[40] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=41; $i < 45; $i++) : ?>
                            <li><input type="radio" name="mc_a_9" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>10. <?= $mc_q[45] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=46; $i < 50; $i++) : ?>
                            <li><input type="radio" name="mc_a_10" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">Submit Answer</button>
                </div>
            </form>

        </div>
    </div>

<?php endif; ?>

Timer.js

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(){
   $('#submitted').html('Time is up!');
     document.getElementById('mcQuestion').submit();
    }

     CountDown(5,$('#display'));

回答1:

You call the countdown function everytime you display your page without checking whether you have answers are not.

You should not call that JS function CountDown(5,$('#display')); in the timer.js

You should call it inside your PHP file instead, after having checked if answers have been provided or not

回答2:

Let's create a index.php file please check it. form submit on timer you can pass time through in javascript CountDown(5,div); function.

            <html>
            <body>
              <form action="" method="post" name="mcQuestion" id="mcQuestion">
                Name:<input type="test" name="name" value="Test">
              <div><span id="display" style="color:#FF0000;font-size:15px"></span></div>
            <div><span id="submitted" style="color:#FF0000;font-size:15px"></span></div>
            </form>
            <script>
            var div = document.getElementById('display');
            var submitted = document.getElementById('submitted');

              function CountDown(duration, display) {

                        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.innerHTML ="<b>" + minutes + "m : " + seconds + "s" + "</b>";
                            if (timer > 0) {
                               --timer;
                            }else{
                       clearInterval(interVal)
                                SubmitFunction();
                             }

                       },1000);

                }

              function SubmitFunction(){

                submitted.innerHTML="Time is up!";
                document.getElementById('mcQuestion').submit();

               }
               CountDown(5,div);
            </script>

            </body>
            </html>

来源：https://stackoverflow.com/questions/42186043/submit-form-after-timer

标签

javascript

php

timer