[JQUERY] toggle form

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jasper DS

Jasper DS

03/03/2013 16:40:25
Quote Anchor link
Hoi,

ik wil iets vrij simpel doen met Jquery maar ik bak er niet veel van. Ik heb een option -> zakelijke klant of particlier. Als de select op particulier staat moet de div met classe particulier te voorschijn komen als de select op zakelijk staat moet de div zakelijk te voorschijn komen. Wat doe ik mis?

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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">

        $(document).ready(function() {
            
            var val = $('#type').val();

            if(val)
            {
                $(val).show();
            }
        });

        </script>


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
<form name="register" method="post" action="register/postform" class="register">
    <h4>Aanvullende gegevens:</h4>
    <label for="klant">Type: </label><select id="type"><option value="particulier">Particulier</option> <option value="zakelijk">Zakelijk</option></select>
    <div class="hidden particulier">
        <label for="naam">Naam: </label><input type="text" name="naam"  value="<?php if(isset($_POST['naam'])){ echo $_POST['naam']; } ?>" />
        <label for="voornaam">Voornaam: </label><input type="text" name="voornaam"  value="<?php if(isset($_POST['voornaam'])){ echo $_POST['voornaam']; } ?>" />
        <label for="geboortedatum">Geboortedatum: </label><input type="date" name="geboortedatum" required="required" value="<?php if(isset($_POST['geboortedatum'])){ echo $_POST['geboortedatum']; } ?>"/>
    </div>
    <div class="hidden zakelijk">
        <label for="btw">Btw-nummer: </label><input type="text" name="btw" required="required" value="<?php if(isset($_POST['btw'])){ echo $_POST['btw']; } ?>"/>
        <label for="contactpersoon">Contactpersoon: </label><input type="text" name="contactpersoon" required="required" value="<?php if(isset($_POST['contactpersoon'])){ echo $_POST['contactpersoon']; } ?>"/>
    </div>    

    <label for="adres">Adres: </label><input type="text" name="adres" required="required" value="<?php if(isset($_POST['adres'])){ echo $_POST['adres']; } ?>"/>
    <label for="gemeente">Gemeente: </label><input type="text" name="gemeente"  value="<?php if(isset($_POST['gemeente'])){ echo $_POST['gemeente']; } ?>"/>
    <label for="postcode">Postcode: </label><input type="text" name="postcode"  value="<?php if(isset($_POST['postcode'])){ echo $_POST['postcode']; } ?>"/>
    <label for="telefoon">Telefoon: </label><input type="text" name="telefoon"   value="<?php if(isset($_POST['telefoon'])){ echo $_POST['telefoon']; } ?>"/>
    
    
    
    <label for="agv"></label><input type="checkbox" name="agv" value="true" required="required"><span class="checkbox">Ik ga akkoord met de <a href="#">algemene voorwaarden</a></span>
    <input type="submit" name="submit" value="registreer" />
</form>
Gewijzigd op 03/03/2013 16:41:02 door Jasper DS
 
PHP hulp

PHP hulp

22/10/2020 08:37:39
 
Bo Ter Ham

Bo Ter Ham

03/03/2013 16:49:26
Quote Anchor link
Wanneer wordt dit script getriggered?
Volgens mij alleen als je pagina wordt geladen wordt.
Hier een voorbeeldje:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$(document).ready(function() {
    $('#type').change(function() { //wanneer de waarde word veranderd en andere class laten zien.
        var val = $('#type').val();
        $('.' + val).show(); //vergeet niet de punt omdat het om een class gaat.
    });
});
 
Joakim Broden

Joakim Broden

03/03/2013 16:50:06
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
    $('#type').change(function() {
        $('.particulier, .zakelijk').hide(); // Eerst beide div verbergen...

        $('.' + $(this).val()).show(); // Juiste div tonen...
    });
 
Wouter J

Wouter J

03/03/2013 17:06:56
Quote Anchor link
Ik zou ook meteen jQuery.1.9.x inladen, ipv die zeer oude 1.4.x. (hoger dan 1.9 zou ik niet gaan)
 
Jasper DS

Jasper DS

03/03/2013 22:58:57
Quote Anchor link
Bedankt jongens, het werkt (met jquery 1.9.1 trouwens). Ik heb de lijn er nog eens dubbel bij gezet zodat de code ook al meteen bij het laden van de pagina word uitgevoerd.

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
    <script type="text/javascript">

        $(document).ready(function() {

             var val = $('#type').val();
                $('.' + val).show(); //vergeet niet de punt omdat het om een class gaat.

            $('#type').change(function() { //wanneer de waarde word veranderd en andere class laten zien.
                $('.particulier, .zakelijk').hide(); // Eerst beide div verbergen...
                var val = $('#type').val();
                $('.' + val).show(); //vergeet niet de punt omdat het om een class gaat.
            });
        });

        </script>
 



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.