定时器后提交表单
[英] submit form after timer
本文介绍了定时器后提交表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
function CountDown(duration, display) {如果(！isNaN(持续时间)){var 计时器 = 持续时间，分、秒；var interVal = setInterval(function() {分钟 = parseInt(定时器/60, 10);秒 = parseInt(定时器 % 60, 10);分钟 = 分钟 <10 ?"0" + 分钟:分钟；秒 = 秒 <10 ?"0" + 秒:秒；$(display).html("" + 分钟 + "m :" + 秒 + "s" + " ");if (--timer <0) {计时器 = 持续时间；提交函数();$('#display').empty();清除间隔(间隔)}}, 1000);}}函数 SubmitFunction() {$('#submitted').html('时间到了！');document.getElementById('mcQuestion').submit();}CountDown(5, $('#display'));
<div class="form-group"><button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">提交答案</button>
我为倒数计时器创建了一个 js，其想法是在设置时间后它会自动提交表单，但在我的情况下，在倒数计时器之后没有任何反应并且计时器重置回原始时间并再次倒计时无休止地.
你能帮我找出问题吗?
测验显示
<div class="form-group"><h3><?= $r->quiz_title ?></h3><h3><中心><脚本语言="JavaScript" src="assets\js\timer.js"></script><div id="显示"> <div id="提交">
</中心><span class="help-block"><?= $r->quiz_desc ?></span><p>发布者:<?= ucwords($r->firstname).''.ucwords($r->lastname) ?></p>
<?php if ($r->quiz_type == 1) : ?><?php $questions = unserialize($r->questionnaire);?><!-- 从 1 开始索引--><?php $questions = array_combine(range(1, count($questions)), array_values($questions));?><小时><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" 需要>真 <input type="radio" name="tf-<?= $i ?>"value="False" 需要>错误的</span>
<?php endfor;?>
<div class="form-group"><button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">提交答案</button>
</表单><?php 其他:?><?php$answers = unserialize($r->answers);$mc = 反序列化($r->quiz_mc);//删除所有正确答案对于 ($i=1; $i <61; $i++) {if ($mc[$i]->value <> 'True') {$mc_q[] = $mc[$i]-> 值；}}?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?><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] ?>"必需> <?= $mc_q[$i] ?></li><?php endfor;?>
<div class="form-group"><button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">提交答案</button>
</表单>
<?php endif;?>
定时器.js
function CountDown(duration, display) {如果(！isNaN(持续时间)){var timer = 持续时间、分钟、秒；var interVal= setInterval(function () {分钟 = parseInt(定时器/60, 10);秒 = parseInt(定时器 % 60, 10);分钟 = 分钟 <10 ?"0" + 分钟:分钟；秒 = 秒 <10 ?"0" + 秒:秒；$(display).html("" + 分钟 + "m :" + 秒 + "s" + " ");if (--timer <0) {计时器 = 持续时间；提交函数();$('#display').empty();清除间隔(间隔)}},1000);}}函数 SubmitFunction(){$('#submitted').html('时间到了！');document.getElementById('mcQuestion').submit();}CountDown(5,$('#display'));
解决方案
让我们创建一个 index.php 文件，请检查它.在计时器上提交表单，您可以在 javascript CountDown(5,div) 中传递时间；功能.
<身体><form action="" method="post" name="mcQuestion" id="mcQuestion">名称:"+ 分钟 + "m :" + 秒 + "s" + "</b>";如果(定时器> 0){--定时器；}别的{清除间隔(间隔)提交函数();}},1000);}函数 SubmitFunction(){submit.innerHTML="时间到了！";document.getElementById('mcQuestion').submit();}倒计时(5，div)；</html>
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>
<?=$ 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>
<?=$ 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>
<?=$ 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>
<?=$ 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>
<?=$ 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>
<?=$ 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>
<?=$ 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>
<?=$ 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>
<?=$ 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>
<?=$ 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
<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> <?= $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> <?= $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> <?= $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> <?= $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> <?= $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> <?= $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> <?= $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> <?= $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> <?= $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> <?= $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'));
解决方案
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>
这篇关于定时器后提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
