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.

PHP Code:


			
<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.

Code:

function toggle(value){
if(value=='show')
 document.getElementById('mytext').style.visibility='visible';
else
 document.getElementById('mytext').style.visibility='hidden';
}

Code:

<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.