SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb How to enable hidden form fields when a radio button is selected

    hi techie guys!
    can someone give me a javascript logic for enabling the hidden form fields when a radio button is selected?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums.

    When you say "enabling a hidden form field", do you mean that you want to dynamically update its value depending on which radio button was selected?

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (function msgShow() {

    var e1 = document.getElementById('Hidden');
    alert(e1.value);
    })();

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    When you say "enabling a hidden form field", do you mean that you want to dynamically update its value depending on which radio button was selected?
    I suspect that he means when there's a series of radio buttons, with the last one called "other". Selecting that last one results in a new form field being shown.
    I just had to get involved with this one because someone else here has a thing against foo, bar, etc... so what better way to involve them than with a multi choice!

    How you achieve this is to have all the HTML already on the page, and then use scripting to set a class name which results in the field being initially hidden.

    HTML Code:
    <form>
        <fieldset>
            <legend>Radios are in first part of a form</legend>
            <p>What is your favourite metasyntatic syllable?</p>
            <p><input type="radio" name="metasyntatic" value="foo" /> Foo</p>
            <p><input type="radio" name="metasyntatic" value="bar" /> Bar</p>
            <p><input type="radio" name="metasyntatic" value="baz" /> Baz</p>
            <p><input type="radio" name="metasyntatic" value="bat" /> Bat</p>
            <p><input type="radio" name="metasyntatic" value="other" /> Other</p>
            <p><input type="text" name="othermetasyntatic" /></p>
        </fieldset>
         ...
    </form>
    Code css:
    form p {
        margin: 0;
    }
    .hidden {
        display: none;
    }

    I'll try to use techniques here that should work regardless of whether you have one "other" section or multiple of them.
    Here's a breakdown of how things are done.

    First you find the radio buttons called "other" and gain a reference to the field that's related to it, in this case that being "othermetasyntatic"

    Code javascript:
    var otherRadios = getOtherRadios(),
        i,
        radio,
        field;
    for (i = 0; i < otherRadios.length; i += 1) {
        radio = otherRadios[i];
        field = getOtherField(radio);
        ...
    }

    The getOtherRadios and getOtherField functions are easily achieved by using an attribute selector:

    Code javascript:
    function getOtherRadios() {
        var otherRadioSelector = '[type="radio"][value="other"]';
        return document.querySelectorAll(otherRadioSelector);
    }
    function getOtherField(otherRadio) {
        var form = otherRadio.form;
        return form.querySelector('[name="other' + otherRadio.name + '"]');
    }

    Once the for loop has both a radio and it's associated text field, we can hide that field, and setup the form to show/hide it later on when needed.

    Code javascript:
    for (i = 0; i < otherRadios.length; i += 1) {
        ...
        hide(field);
        setupOtherRadioEventHandler(radio);
    }

    The hide and show functions are just a handy shorthand for adding or removing a class name to an element:

    Code javascript:
    function hide(el) {
        el.classList.add('hidden');
    }
    function show(el) {
        el.classList.remove('hidden');
    }

    The setupOtherRadioEventHandler function adds an event handler on to each of the radio buttons with the same name as the "other" one. The reason why that needs to be done is so that when you click on another radio button, the text field can then be removed again.

    Code javascript:
    function setupOtherRadioEventHandler(radio) {
        var fields = radio.form.elements[radio.name],
            i,
            fieldDisplayHandler = function () {
                fieldDisplay(radio);
            };
        for (i = 0; i < fields.length; i += 1) {
            addEventListener(fields[i], 'click', fieldDisplayHandler);
        }
    }

    The addEventListener function is a standard one that we see being used all the time now:

    Code javascript:
    function addEventListener(el, type, func) {
        if (el.addEventListener) {
            el.addEventListener(type, func, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + type, func);
        }
    }

    But the fieldDisplayHandler function may require some discussion. If just the fieldDisplay function was assigned to the event, it wouldn't be easy to gain a reference to the radio button called "other". We already have a variable here called radio which is exactly what we need though.

    When a function is created, that function retains the scope that it was created in. What that means is that knowledge about variables such as radio are retained by that fieldDisplayHandler function that we create, so we can call the fieldDisplay function directly with that radio information - even if it's being used from a different radio button.

    The last piece of the puzzle is to show or hide the text field, which can be easily decided based on whether the "other" radio button is currently selected.

    Code javascript:
    function fieldDisplay(radio) {
        var field = getOtherField(radio);
        if (radio.checked) {
            show(field);
        } else {
            hide(field);
        }
    }

    You can see this all in action at http://jsfiddle.net/pmw57/4sFNA/1/ - as well as copious form-based questions about our beloved foo, bar, baz, and bat metasyntatic variables
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by abhi111 View Post
    can someone give me a javascript logic for enabling the hidden form fields when a radio button is selected?
    Quote Originally Posted by paul_wilkins View Post
    I suspect that he means when there's a series of radio buttons, with the last one called "other". Selecting that last one results in a new form field being shown.
    Either you have psychic powers, or I missed something!
    Great answer though.

  6. #6
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Either you have psychic powers, or I missed something!
    Great answer though.
    yes suppose there are two radio buttons YES & NO .If i click on yes only then some html input filelds should be shown and if i click NO then i should continue with the remaining form.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by abhi111 View Post
    yes suppose there are two radio buttons YES & NO .If i click on yes only then some html input filelds should be shown and if i click NO then i should continue with the remaining form.
    Ahh, yes that's taking the idea even further than with the example provided above.

    Are you wanting a jQuery-based solution or something without that library instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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