Krijg het allemaal niet werkend.
Heb o derstaande code gekopieerd van een formulier, daar werkt alles perfect, alleen helaas niet op mijn website. Ik mis ik iets essentieel?
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digitale inschrijfbalie Grijze Jager Junior HIT</title>
<script src="../Javascript/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../Style/inschrijfbalie.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../Javascript/inschrijfbalie.js"></script>-->
<script>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
</script>
</head>
<body>
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Algemene gegevens</li>
<li>In geval van nood</li>
<li>Overige gegevens</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Algemene gegevens</h2>
<h3 class="fs-subtitle">Hieronder staan de algemene gegevens over het lid.</h3>
<input type="text" name="naamDeelnemer" placeholder="Naam deelnemer" />
<input type="text" name="woonplaatsDeelnemer" placeholder="Woonplaats" />
<input type="text" name="subgroepDeelnemer" placeholder="Subgroep" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">In geval van nood</h2>
<h3 class="fs-subtitle">Controleer hieronder de contactgegevens voor noodgevallen</h3>
<input type="text" name="naamOuder" placeholder="Naam contact 1" />
<input type="text" name="telefoonOuder" placeholder="Telefoon contact 1" />
<input type="text" name="naamOuder2" placeholder="Naam contact 2" />
<input type="text" name="telefoonOuder2" placeholder="Telefoon contact 2" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>, , ,
<h2 class="fs-title">Overige gegevens</h2>
<h3 class="fs-subtitle">Hieronder de laatste controleerbare gegevens</h3>
<input type="text" name="allergie" placeholder="Allergie" />
<input type="text" name="medicatie" placeholder="Medicatie" />
<input type="text" name="bijzonderheden" placeholder="Bijzonderheden" />
<input type="text" name="fotosSocial" placeholder="Mogen we foto's maken en online plaatsen?" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<a href="https://twitter.com/GoktepeAtakan" class="submit action-button" target="_top">Submit</a>
</fieldset>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digitale inschrijfbalie Grijze Jager Junior HIT</title>
<script src="../Javascript/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../Style/inschrijfbalie.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../Javascript/inschrijfbalie.js"></script>-->
<script>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
</script>
</head>
<body>
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Algemene gegevens</li>
<li>In geval van nood</li>
<li>Overige gegevens</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Algemene gegevens</h2>
<h3 class="fs-subtitle">Hieronder staan de algemene gegevens over het lid.</h3>
<input type="text" name="naamDeelnemer" placeholder="Naam deelnemer" />
<input type="text" name="woonplaatsDeelnemer" placeholder="Woonplaats" />
<input type="text" name="subgroepDeelnemer" placeholder="Subgroep" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">In geval van nood</h2>
<h3 class="fs-subtitle">Controleer hieronder de contactgegevens voor noodgevallen</h3>
<input type="text" name="naamOuder" placeholder="Naam contact 1" />
<input type="text" name="telefoonOuder" placeholder="Telefoon contact 1" />
<input type="text" name="naamOuder2" placeholder="Naam contact 2" />
<input type="text" name="telefoonOuder2" placeholder="Telefoon contact 2" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>, , ,
<h2 class="fs-title">Overige gegevens</h2>
<h3 class="fs-subtitle">Hieronder de laatste controleerbare gegevens</h3>
<input type="text" name="allergie" placeholder="Allergie" />
<input type="text" name="medicatie" placeholder="Medicatie" />
<input type="text" name="bijzonderheden" placeholder="Bijzonderheden" />
<input type="text" name="fotosSocial" placeholder="Mogen we foto's maken en online plaatsen?" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<a href="https://twitter.com/GoktepeAtakan" class="submit action-button" target="_top">Submit</a>
</fieldset>
</form>
</body>
</html>
Misschien mis je een js-file.
Gewijzigd op 11/02/2024 22:21:41 door - Ariën -
Christiaan de kleine op 11/02/2024 13:08:54:
Heb o derstaande code gekopieerd van een formulier, daar werkt alles perfect, alleen helaas niet op mijn website. Ik mis ik iets essentieel?
1. begrip van wat je aan het doen bent
2. een poging om het werkend te krijgen (wat heb je zelf geprobeerd)
3. een duidelijke uitleg aan PHP Hulp waar je op vast loopt
4. een constructieve opstelling
- Ariën - op 11/02/2024 22:21:23:
Wat gebeurt er? Kan je wat spannends uit de debugger van je browser halen?
Misschien mis je een js-file.
Misschien mis je een js-file.
Hoi Arien,
Er gebeurt vrij weinig helaas. Het 1e formulier wordt getoond, met de navigatie knoppen, maar daar blijft het helaas bij. Zelf geen kaas gegeten van javascript en jquery. Vandaar de copy paste van een bestaand formulier waar ik alleen de text van de inputs veranderd heb. Maar zelfs als ik het gewoon zo copy paste, doet er helemaal niks. Kan met next / previous buttons niet naar 2e of 3e formulier.
Terwijl dit in de omgeving waar ik het gelopieerd heb wel gebeurt.
Als er een js-file mist, dan werkt het natuurlijk niet.
De debugger van je browser, die bereikbaar is onder Ctrl+Shift+i, en dan specifiek de console- en netwerk-tab moeten wel duidelijkheid geven wat er mis is. Als je in de netwerk-tab een 404 ziet, dan mist er duidelijk iets aan bestanden op je site, wat mogelijk de correcte werking ervan verstoort.
Ik zet mijn roepies in op een missende ../Javascript/inschrijfbalie.js, of een pad wat niet goed is.
Gewijzigd op 12/02/2024 12:31:05 door - Ariën -