[JQUERY] toggle form

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Typescript Developer / Cloud platform/ 3.500 euro

Functieomschrijving Ben jij een Typescript Developer en werk je graag aan innovatieve producten? Lees dan snel verder! (Door)Ontwikkelen van het cloud platform; (Door)Ontwikkelen van microservices; Bouwen van nieuwe functionaliteiten; Verbeteringen aandragen voor het cloud platform; Sparren met de business. Functie-eisen HBO werk- en denkniveau; Minimaal twee jaar ervaring met Typescript; Ervaring met scripttalen zoals Python en/of Powershell is een pre; Kennis van microservice development; Kennis van VMware producten, Azure, AWS en/of Google Cloud. Bedrijfsomschrijving Onze opdrachtgever, gevestigd in regio Eindhoven, levert een compleet dienstenpakket op het gebied van IT. Zij pakken verschillende (complexe) vraagstukken van grote organisaties op. De sfeer

Bekijk vacature »

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

29/09/2020 02:12:07
 
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.