Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Show/hide text box on radio button selection

    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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">
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Gardy (12-10-2010)

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •