...

View Full Version : Show/hide text box on radio button selection



Gardy
12-10-2010, 02:34 PM
Hey all,

I'm a bit of a noob to this, so hoping that it is a nice easy one! Basically, I have a form that has 3 radio buttons and one text box. If the first radio button is selected I'd like the text box to be visible, and if either of the bottom two are selected I'd like for the text box to be hidden.

Below is my HTML for the form, and I'd be very greatful if someone could help me out.

Thanks.


<p>
<label for="<?php echo $this->get_field_id('style_list'); ?>">
<input class="" id="<?php echo $this->get_field_id('style_list'); ?>" name="<?php echo $this->get_field_name('testimonials_style'); ?>" type="radio" value="style_list" <?php if($testimonials_style === 'style_list'){ echo 'checked="checked"'; } ?> />
<?php _e('List style (Multiple)'); ?>
</label><br />
<!-- Textbox - Show if 'style_list' selected, hide else -->
<label for="<?php echo $this->get_field_id('numposts'); ?>">
<?php _e('Display this many testimonials:'); ?>
<input class="widefat" id="<?php echo $this->get_field_id('numposts'); ?>" name="<?php echo $this->get_field_name('numposts'); ?>" type="text" value="<?php echo $numposts; ?>" />
</label><br />

<label for="<?php echo $this->get_field_id('style_sidebar'); ?>">
<input class="" id="<?php echo $this->get_field_id('style_sidebar'); ?>" name="<?php echo $this->get_field_name('testimonials_style'); ?>" type="radio" value="style_sidebar" <?php if($testimonials_style === 'style_sidebar'){ echo 'checked="checked"'; } ?> />
<?php _e('Sidebar style (Single)'); ?>
</label><br />

<label for="<?php echo $this->get_field_id('style_box'); ?>">
<input class="" id="<?php echo $this->get_field_id('style_box'); ?>" name="<?php echo $this->get_field_name('testimonials_style'); ?>" type="radio" value="style_box" <?php if($testimonials_style === 'style_box'){ echo 'checked="checked"'; } ?> />
<?php _e('Box style (Single)'); ?>
</label>
</p>

abduraooft
12-10-2010, 02:40 PM
Basically, the following is what you need to achieve.
function toggle(value){
if(value=='show')
document.getElementById('mytext').style.visibility='visible';
else
document.getElementById('mytext').style.visibility='hidden';
}

<input type="radio" name="myradio" checked="checked" onclick="toggle('show');">
<input type="radio" name="myradio" checked="checked" onclick="toggle('hide');">
<input type="radio" name="myradio" checked="checked" onclick="toggle('hide');">
----------
<input type="text" name="mytext" id="mytext">

Gardy
12-10-2010, 03:10 PM
Thank you for that. While it achieves what I was looking for, I wonder if there is a simple way to make the page slide up/down when the textbox is hidden, just so it looks neater for users?

Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum