Show hide form elements

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Casper B

Casper B

01/07/2011 09:11:09
Quote Anchor link
Beste mensen,

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>


Maar dit werkt niet. Aangezien ik er meerdere dingen al heb aan toegevoegd.
Kan iemand mij helpen aub!

mvg, Casper
 
PHP hulp

PHP hulp

29/03/2024 07:01:39
 
Vincent Huisman

Vincent Huisman

01/07/2011 10:02:32
Quote Anchor link
wat zegt de errorconsole? (in chrome: ctrl+shift+j)
 
Casper B

Casper B

01/07/2011 10:19:14
Quote Anchor link
Hij doet het nu wel, maar alles blijft nu openstaan. Weet iemand waarom?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
$(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");
        }
    });

});
 
Vincent Huisman

Vincent Huisman

01/07/2011 10:23:58
Quote Anchor link
Vincent Huisman op 01/07/2011 10:02:32:
wat zegt de errorconsole? (in chrome: ctrl+shift+j)
 
Casper B

Casper B

01/07/2011 10:27:58
Quote Anchor link
Deze zegt dat er geen fouten zijn...
Gewijzigd op 01/07/2011 10:29:51 door Casper B
 
Wouter J

Wouter J

01/07/2011 11:26:24
Quote Anchor link
@Vincent, je mag op zich best wel wat meer moeite doen om een vraag te beantwoorden. Altijd bij JavaScript dingen gewoon zeggen 'wat zegt de errorconsole' of het zelf niet eens meer zeggen maar gewoon quoten vind ik eigenlijk not done. Als je even geen tijd hebt om iemand te helpen, reageer dan niet en laat het antwoord aan een ander over.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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');
            }
        });
    });
    
});


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
 
Casper B

Casper B

01/07/2011 13:27:29
Quote Anchor link
@ Wouter J Hartelijk dank voor jou moeite. Ik snap de code geheel. 1 ander vraagje. Weet jij hoe ik een voorwaarde aan een checkbox kan geven met behulp van jquery.

Want ik ben bezig met algemene voorwaarde die de mensen eerst moeten accepteren voordat ze op "verzenden" kunnen klikken.
 
Wouter J

Wouter J

01/07/2011 13:58:01
Quote Anchor link
Voorwaarden op een checkbox? Je bedoelt dat je eerst een hoop tekst krijgen en daaronder een checkbox moeten aanvinken en dat je dan pas op een button kan 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

PHP Scripter

01/07/2011 14:05:18
Quote Anchor link
Is het niet mogelijk om alle forms die verplicht moeten worden ingevuld of worden aangevinkt een bepaalde id of class mee te geven, en zodra die allemaal voltooid zijn wordt de submit actief?
 
Vincent Huisman

Vincent Huisman

01/07/2011 14:08:56
Quote Anchor link
Wouter, ik ga niet eerst een heel script doorlezen en uitzoeken wat er aan de hand is wanneer het misschien ook wel gewoon in de errorconsole staat
 
Casper B

Casper B

01/07/2011 14:17:57
Quote Anchor link
@Wouter J Bedankt, dat moet wel lukken:)
@ PHP Scripter, ja als jij zegt dat dat ook mogelijk is.. Ik weet alleen niet hoe je dat dan moet doen?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.