Een veld laten verschijnen bij aanvinken radiobutton
Ik zit nu met het volgende probleem:
Ik heb een radiobuttonveld met 2 options: Indefinite Period, Temporary Period
Onder dit veld zit het veld "Available from".Nu wil ik dat wanneer er op "Temporary Peroid"gedrukt wordt, er een nieuw veld ontstaat genaamd "Available Until". Dit moet dus verschijnen bij Temporary en verdwijnen bij Indefinite.
Ik heb de volgende code al:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//RADIOBUTTONFIELD, PERIOD
<div class="form_row clearfix">
<label><?php _e(RENTAL_PERIOD_TEXT);?> <span>*</span> </label> <span class="fl user_define"> <input name="proprty_rental_period" type="radio" <?php if($proprty_rental_period=='Indefinite Period' || $proprty_rental_period == ''){echo 'checked="checked"';}?> value="Indefinite Period" /> <?php _e(PERIOD_INDEFINITE_TEXT);?></span>
<span class="fl user_define"> <input name="proprty_rental_period" type="radio" <?php if($proprty_rental_period=='Temporary'){echo 'checked="checked"';}?> value="Temporary" /> <?php _e(PERIOD_TEMPORARY_TEXT);?> </span>
</div>
// TEXTFIELD, AVAILABLE FROM
<div class="form_row clearfix">
<label><?php _e(RENTAL_AVAILABLE_FROM_TEXT);?> <span>*</span> </label>
<input type="text" name="proprty_begin_date" id="proprty_begin_date" class="textfield" value="<?php echo esc_attr(stripslashes($proprty_begin_date)); ?>" />
</div>
// EN DE CODE OM EEN AVILABLE UNTIL VELD AAN TE MAKEN:
<div class="form_row clearfix">
<label><?php _e(RENTAL_AVAILABLE_END_TEXT);?> <span>*</span> </label>
<input type="text" name="proprty_end_date" id="proprty_end_date" class="textfield" value="<?php echo esc_attr(stripslashes($proprty_end_date)); ?>" />
</div>
<div class="form_row clearfix">
<label><?php _e(RENTAL_PERIOD_TEXT);?> <span>*</span> </label> <span class="fl user_define"> <input name="proprty_rental_period" type="radio" <?php if($proprty_rental_period=='Indefinite Period' || $proprty_rental_period == ''){echo 'checked="checked"';}?> value="Indefinite Period" /> <?php _e(PERIOD_INDEFINITE_TEXT);?></span>
<span class="fl user_define"> <input name="proprty_rental_period" type="radio" <?php if($proprty_rental_period=='Temporary'){echo 'checked="checked"';}?> value="Temporary" /> <?php _e(PERIOD_TEMPORARY_TEXT);?> </span>
</div>
// TEXTFIELD, AVAILABLE FROM
<div class="form_row clearfix">
<label><?php _e(RENTAL_AVAILABLE_FROM_TEXT);?> <span>*</span> </label>
<input type="text" name="proprty_begin_date" id="proprty_begin_date" class="textfield" value="<?php echo esc_attr(stripslashes($proprty_begin_date)); ?>" />
</div>
// EN DE CODE OM EEN AVILABLE UNTIL VELD AAN TE MAKEN:
<div class="form_row clearfix">
<label><?php _e(RENTAL_AVAILABLE_END_TEXT);?> <span>*</span> </label>
<input type="text" name="proprty_end_date" id="proprty_end_date" class="textfield" value="<?php echo esc_attr(stripslashes($proprty_end_date)); ?>" />
</div>
Er zijn ook 2 foto's bijgevoegd om het probleem duidelijker te maken.
Ik hoop dat iemand mij kan helpen,
Engin
Gewijzigd op 14/03/2012 12:35:19 door Engin C
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script type='text/javascript'>
function toggle(onoff)
{
var e = document.getElementById('optie');
if(!onoff)
{
e.style.display = 'none';
}
else
{
e.style.display = 'block';
}
}
</script>
</head>
<input name='periode' type='radio' onClick='toggle(1)'>Laten zien</input>
<input name='periode' type='radio' onClick='toggle(0)'>Verdwijn!</input>
<div id='optie' style='display:none;'>Informatie!</div>
<head>
<script type='text/javascript'>
function toggle(onoff)
{
var e = document.getElementById('optie');
if(!onoff)
{
e.style.display = 'none';
}
else
{
e.style.display = 'block';
}
}
</script>
</head>
<input name='periode' type='radio' onClick='toggle(1)'>Laten zien</input>
<input name='periode' type='radio' onClick='toggle(0)'>Verdwijn!</input>
<div id='optie' style='display:none;'>Informatie!</div>
Het gaat dus om het scriptje toggle. Vul in het scriptje ook even in welke div er laten zien/verduistert moet worden. Dan bedoel ik dus document.getElementById('optie');. Nu kun je onClick='toggle(1)' gebruiken om de div tevoorschijn te halen en onClick='toggle(0)' om hem te laten verdwijnen.
Toevoeging op 14/03/2012 18:27:22:
Ok het is gelukt! Ik was de laatste regel vergeten toe te voegen. Erg bedankt voor jullie snelle reacties! :)
Toevoeging op 14/03/2012 18:30:12:
Het enigste wat nog wel mee moet veranderen is de label die ervoor staat die moet ook weggaan/terugkomen. Hoe kan ik dit doen?
Gewijzigd op 14/03/2012 17:58:34 door Engin C
http://api.jquery.com/click/
of
http://api.jquery.com/show/
of
http://api.jquery.com/toggle/
Gewijzigd op 16/03/2012 12:30:50 door raymond van Os