Show hide form elements
Ik ben bezig met een offerte formulier te maken. Dit met behulp van JQuery.
Ik heb een lijst van categorien:
huisstijl
promotioneel
printen
overig.
Wanneer iemand op huisstijl klikt komt er een menu van wat voor product. Wanneer iemand bijv. briefpapier kiest moet vervolgens 't nieuwe menu erbij komen, waar het aantal grams van papier moet komen te staan.
ik had dit als script
Quote:
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#huisstijl, #briefpapier, #step3").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#optie_1").click(function(){
// If checked
if ($("#optie_1").is(":checked"))
{
//show the hidden div
$("#huisstijl").show("fast");
}
else
{
//otherwise, hide it
$("#huisstijl").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#optie_2").click(function(){
// If checked
if ($("#optie_2").is(":selected"))
{
//show the hidden div
$("#briefpapier").show("fast");
}
else
{
//otherwise, hide it
$("#briefpapier").hide("fast");
}
});
</script>
$(document).ready(function(){
//Hide div w/id extra
$("#huisstijl, #briefpapier, #step3").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#optie_1").click(function(){
// If checked
if ($("#optie_1").is(":checked"))
{
//show the hidden div
$("#huisstijl").show("fast");
}
else
{
//otherwise, hide it
$("#huisstijl").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#optie_2").click(function(){
// If checked
if ($("#optie_2").is(":selected"))
{
//show the hidden div
$("#briefpapier").show("fast");
}
else
{
//otherwise, hide it
$("#briefpapier").hide("fast");
}
});
</script>
Maar dit werkt niet. Aangezien ik er meerdere dingen al heb aan toegevoegd.
Kan iemand mij helpen aub!
mvg, Casper
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
$(document).ready(function(){
//Hide div w/id extra
$("#huisstijl").css("display","none");
$("#briefpapier").css("display","none");
$("#enveloppen").css("display","none");
$("#visitekaartjes").css("display","none");
$("#complimentcards").css("display","none");
$("#etiketten").css("display","none");
$("#overig").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#option_1").click(function(){
// If checked
if ($("#option_1").is(":checked"))
{
//show the hidden div
$("#huisstijl").show("fast");
}
else
{
//otherwise, hide it
$("#huisstijl").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1a").click(function(){
// If checked
if ($("#option_1a").is(":selected"))
{
//show the hidden div
$("#briefpapier").show("fast");
}
else
{
//otherwise, hide it
$("#briefpapier").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1b").click(function(){
// If checked
if ($("#option_1b").is(":selected"))
{
//show the hidden div
$("#enveloppen").show("fast");
}
else
{
//otherwise, hide it
$("#enveloppen").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1c").click(function(){
// If checked
if ($("#option_1c").is(":selected"))
{
//show the hidden div
$("#visitekaartjes").show("fast");
}
else
{
//otherwise, hide it
$("#visitekaartjes").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1d").click(function(){
// If checked
if ($("#option_1d").is(":selected"))
{
//show the hidden div
$("#complimentcards").show("fast");
}
else
{
//otherwise, hide it
$("#complimentcards").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1e").click(function(){
// If checked
if ($("#option_1e").is(":selected"))
{
//show the hidden div
$("#etiketten").show("fast");
}
else
{
//otherwise, hide it
$("#etiketten").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1f").click(function(){
// If checked
if ($("#option_1f").is(":selected"))
{
//show the hidden div
$("#overig").show("fast");
}
else
{
//otherwise, hide it
$("#overig").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_2").click(function(){
// If checked
if ($("#option_2").is(":checked"))
{
//show the hidden div
$("#promotioneel").show("fast");
}
else
{
//otherwise, hide it
$("#promotioneel").hide("fast");
}
});
});
//Hide div w/id extra
$("#huisstijl").css("display","none");
$("#briefpapier").css("display","none");
$("#enveloppen").css("display","none");
$("#visitekaartjes").css("display","none");
$("#complimentcards").css("display","none");
$("#etiketten").css("display","none");
$("#overig").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#option_1").click(function(){
// If checked
if ($("#option_1").is(":checked"))
{
//show the hidden div
$("#huisstijl").show("fast");
}
else
{
//otherwise, hide it
$("#huisstijl").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1a").click(function(){
// If checked
if ($("#option_1a").is(":selected"))
{
//show the hidden div
$("#briefpapier").show("fast");
}
else
{
//otherwise, hide it
$("#briefpapier").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1b").click(function(){
// If checked
if ($("#option_1b").is(":selected"))
{
//show the hidden div
$("#enveloppen").show("fast");
}
else
{
//otherwise, hide it
$("#enveloppen").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1c").click(function(){
// If checked
if ($("#option_1c").is(":selected"))
{
//show the hidden div
$("#visitekaartjes").show("fast");
}
else
{
//otherwise, hide it
$("#visitekaartjes").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1d").click(function(){
// If checked
if ($("#option_1d").is(":selected"))
{
//show the hidden div
$("#complimentcards").show("fast");
}
else
{
//otherwise, hide it
$("#complimentcards").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1e").click(function(){
// If checked
if ($("#option_1e").is(":selected"))
{
//show the hidden div
$("#etiketten").show("fast");
}
else
{
//otherwise, hide it
$("#etiketten").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_1f").click(function(){
// If checked
if ($("#option_1f").is(":selected"))
{
//show the hidden div
$("#overig").show("fast");
}
else
{
//otherwise, hide it
$("#overig").hide("fast");
}
});
// Add onclick handler to checkbox w/id checkme
$("#option_2").click(function(){
// If checked
if ($("#option_2").is(":checked"))
{
//show the hidden div
$("#promotioneel").show("fast");
}
else
{
//otherwise, hide it
$("#promotioneel").hide("fast");
}
});
});
Vincent Huisman op 01/07/2011 10:02:32:
wat zegt de errorconsole? (in chrome: ctrl+shift+j)
Gewijzigd op 01/07/2011 10:29:51 door Casper B
Want als je dit scriptje nu zelf had getest zie je dat het script helemaal klopt, alleen dat er iets misgaat bij het kijken met :selected.
@Casper, ik zie inderdaad ook het probleem. Het is vreemd, net alsof iets altijd :selected blijft. Ik zal eens kijken of dit ook nog op een andere manier kan.
EDIT
Oplossing gevonden. Het probleem was dat we niet 2 keer op hetzelfde element klikken. De code van hide en show werkt pas als we op het item klikken. Maar zodra je iets anders selecteert werkt klik je niet meer op dat betreffende item.
Vandaar dat ik even de code wat herschreven hebt, het is nu ook iets dynamiser:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function() {
// Het stukje .html($(this).attr('id')) moet je hieruit weglaten (was even makkelijk voor mij)
$('div').each(function() {
$(this).html($(this).attr('id')).hide();
});
// Voor elke option
$('option').each(function(i) {
// Als er op deze option wordt geklikt
$(this).click(function() {
// Hide alle tags waarvan het id begin met optie
$('*[id^=optie]').hide('fast');
// Als dit element is geselecteerd
if( $(this).is(':selected') ) {
// Zoek dan naar een element met het id #optie + nummer van de option
// en hide deze
$('#optie'+(i+1)).show('fast');
}
});
});
});
// Het stukje .html($(this).attr('id')) moet je hieruit weglaten (was even makkelijk voor mij)
$('div').each(function() {
$(this).html($(this).attr('id')).hide();
});
// Voor elke option
$('option').each(function(i) {
// Als er op deze option wordt geklikt
$(this).click(function() {
// Hide alle tags waarvan het id begin met optie
$('*[id^=optie]').hide('fast');
// Als dit element is geselecteerd
if( $(this).is(':selected') ) {
// Zoek dan naar een element met het id #optie + nummer van de option
// en hide deze
$('#optie'+(i+1)).show('fast');
}
});
});
});
Deze code werkt alleen als je maar 1 dropdown option hebt. Als je dat niet hebt moet je de $('option') wat preciezer aangeven.
Hoe deze code werkt is dat als je klikt op een option hij alle elementen waarvan het id begin met optie verbergen. Zodra je op het 3e option veld klikt hij gaat zoeken naar een element met het id gelijk aan #optie3. Zodra hij deze gevonden heeft laat hij deze zien.
Vervolgens klik je op het 4e option veld. Dan verbergt hij eerst #optie3 en gaat hij vervolgens zoeken naar een div met het id #optie4 en laat die zien.
Gewijzigd op 01/07/2011 12:00:25 door Wouter J
Want ik ben bezig met algemene voorwaarde die de mensen eerst moeten accepteren voordat ze op "verzenden" kunnen klikken.
Dan moet je gebruik maken van het attribuut disabled. En dan moet je hetzelfde trucje toepassen als hierboven. Alleen i.p.v. checkboxes kun je hier beter gebruik maken van radio buttons en dan de selector :checked. Voorbeeldje: http://jsfiddle.net/xyTLB/
@ PHP Scripter, ja als jij zegt dat dat ook mogelijk is.. Ik weet alleen niet hoe je dat dan moet doen?