Form opslaan verwerken aan het einde
Het is inderdaad wel een oplossing. Maar ik ga niet graag met cookies werken in deze situatie. Het lijkt mij ( ook al weet ik nu zelf het antwoord ook niet helemaal ) niet de logischte manier om dit aan te pakken.
Bedankt voor het meedenken!
answers.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
session_start();
if (!isset($_SESSION['time']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
// de gebruiker zou hier niet mogen komen
exit;
}
else {
// wat je hier print, wordt als respons gestuurd naar javascript
$interval = time() - $_SESSION['time'];
echo 'tijd: ' . $interval;
echo '<pre>' . print_r($_POST, true) . '</pre>';
// sessie resetten
unset($_SESSION['time']);
exit;
}
?>
session_start();
if (!isset($_SESSION['time']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
// de gebruiker zou hier niet mogen komen
exit;
}
else {
// wat je hier print, wordt als respons gestuurd naar javascript
$interval = time() - $_SESSION['time'];
echo 'tijd: ' . $interval;
echo '<pre>' . print_r($_POST, true) . '</pre>';
// sessie resetten
unset($_SESSION['time']);
exit;
}
?>
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<?php
session_start();
if (!isset($_SESSION['time'])) {
$_SESSION['time'] = time(); // wordt gereset door answers.php, voor dit voorbeeld. Zie zelf hoe je het moet doen
}
?>
<style>
#my_form li {
display: none;
}
#my_button {
display: none;
}
</style>
<form id="my_form" action="" method="post">
<ul>
<li><input name="item[]"> vraag 1: bla bla</li>
<li><input name="item[]"> vraag 2: bla bla</li>
<li><input name="item[]"> vraag 3: bla bla</li>
<li><input name="item[]"> vraag 4: bla bla</li>
<li><input name="item[]"> vraag 5: bla bla</li>
</ul>
<input type="button" id="my_button" value="Verzend">
</form>
<div id="clock"></div>
<div id="messages"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// elementen cachen
var form = $('#my_form'),
button = $('#my_button'),
clock = $('#clock'),
messages = $('#messages'),
lis = form.find('li'),
inputs = form.find('li input');
// settings en zo
var totalTime = 2*60*1000, // 2 min
timeDown = totalTime / 1000,
url = 'answers.php';
var clockTimer = null,
inputTimer = null,
inputIndex = 0;
// events (wat doet de gebruiker met de HTML-elementen)
form.submit(function(e) {
e.preventDefault(); // verhinder dat het formulierwordt verstuurd op klassieke wijze
var a = 1;
});
button.click(function(e) {
button.attr('disabled', 'disabled');
inputs.removeAttr('disabled');
// formulier versturen;
$.ajax({
url: url,
type: 'post',
data: form.serialize(), // haalt de data uit de form
success: function(data) {
// data is de Ajax respons
messages.html(data);
}
});
});
// de boel in gang trekken
new_input();
clock_tick();
//// werking ...
// inputs gradueel zichtbaar maken. recursief (de functie spreekt zich elf aan)
function new_input() {
if (inputIndex < lis.length) {
// <li> zichtbaar maken
lis.eq(inputIndex).show();
inputs.eq(inputIndex).focus();
if (inputIndex) {
inputs.eq(inputIndex - 1).attr('disabled', 'disabled');
}
inputIndex++;
setTimeout(
new_input,
Math.floor( totalTime / lis.length)
);
}
else {
// button tonen
button.show();
inputs.attr('disabled', 'disabled');
}
}
// klok
function clock_tick() {
var inputTime = Math.floor(totalTime / lis.length / 1000); // in (s)
var timeLeft = timeDown % inputTime;
if (timeDown > 0) {
setTimeout(clock_tick, 1000);
}
timeDown--;
clock.html(
timeLeft.toFixed(0) + ' / ' + (totalTime/1000).toFixed(0)
);
}
});
</script>
session_start();
if (!isset($_SESSION['time'])) {
$_SESSION['time'] = time(); // wordt gereset door answers.php, voor dit voorbeeld. Zie zelf hoe je het moet doen
}
?>
<style>
#my_form li {
display: none;
}
#my_button {
display: none;
}
</style>
<form id="my_form" action="" method="post">
<ul>
<li><input name="item[]"> vraag 1: bla bla</li>
<li><input name="item[]"> vraag 2: bla bla</li>
<li><input name="item[]"> vraag 3: bla bla</li>
<li><input name="item[]"> vraag 4: bla bla</li>
<li><input name="item[]"> vraag 5: bla bla</li>
</ul>
<input type="button" id="my_button" value="Verzend">
</form>
<div id="clock"></div>
<div id="messages"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// elementen cachen
var form = $('#my_form'),
button = $('#my_button'),
clock = $('#clock'),
messages = $('#messages'),
lis = form.find('li'),
inputs = form.find('li input');
// settings en zo
var totalTime = 2*60*1000, // 2 min
timeDown = totalTime / 1000,
url = 'answers.php';
var clockTimer = null,
inputTimer = null,
inputIndex = 0;
// events (wat doet de gebruiker met de HTML-elementen)
form.submit(function(e) {
e.preventDefault(); // verhinder dat het formulierwordt verstuurd op klassieke wijze
var a = 1;
});
button.click(function(e) {
button.attr('disabled', 'disabled');
inputs.removeAttr('disabled');
// formulier versturen;
$.ajax({
url: url,
type: 'post',
data: form.serialize(), // haalt de data uit de form
success: function(data) {
// data is de Ajax respons
messages.html(data);
}
});
});
// de boel in gang trekken
new_input();
clock_tick();
//// werking ...
// inputs gradueel zichtbaar maken. recursief (de functie spreekt zich elf aan)
function new_input() {
if (inputIndex < lis.length) {
// <li> zichtbaar maken
lis.eq(inputIndex).show();
inputs.eq(inputIndex).focus();
if (inputIndex) {
inputs.eq(inputIndex - 1).attr('disabled', 'disabled');
}
inputIndex++;
setTimeout(
new_input,
Math.floor( totalTime / lis.length)
);
}
else {
// button tonen
button.show();
inputs.attr('disabled', 'disabled');
}
}
// klok
function clock_tick() {
var inputTime = Math.floor(totalTime / lis.length / 1000); // in (s)
var timeLeft = timeDown % inputTime;
if (timeDown > 0) {
setTimeout(clock_tick, 1000);
}
timeDown--;
clock.html(
timeLeft.toFixed(0) + ' / ' + (totalTime/1000).toFixed(0)
);
}
});
</script>
Gewijzigd op 09/01/2013 21:20:00 door Kris Peeters