[JQUERY] toggle form
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>
<script type="text/javascript">
$(document).ready(function() {
var val = $('#type').val();
if(val)
{
$(val).show();
}
});
</script>
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
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>
<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
Volgens mij alleen als je pagina wordt geladen wordt.
Hier een voorbeeldje:
Code (php)
1
2
3
4
5
6
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.
});
});
$('#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.
});
});
Code (php)
1
2
3
4
5
2
3
4
5
$('#type').change(function() {
$('.particulier, .zakelijk').hide(); // Eerst beide div verbergen...
$('.' + $(this).val()).show(); // Juiste div tonen...
});
$('.particulier, .zakelijk').hide(); // Eerst beide div verbergen...
$('.' + $(this).val()).show(); // Juiste div tonen...
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>
$(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>