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

JavaScript
1

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

2

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

(function msgShow() {

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

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! :smiley:

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.


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



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”


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:


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.


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:


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.


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:


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.


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 :smiley:

5

Either you have psychic powers, or I missed something!
Great answer though.

6

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

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?