JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<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>
    <fieldset>
        <legend>Radios are in another part of the same form</legend>
    <p>What is your least favoured metasyntatic syllable?</p>
    <p><input type="radio" name="metasyntatic2" value="foo" /> Foo</p>
    <p><input type="radio" name="metasyntatic2" value="bar" /> Bar</p>
    <p><input type="radio" name="metasyntatic2" value="baz" /> Baz</p>
    <p><input type="radio" name="metasyntatic2" value="bat" /> Bat</p>
    <p><input type="radio" name="metasyntatic2" value="other" /> Other</p>
    <p><input type="text" name="othermetasyntatic2" /></p>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>Radios are in a different form</legend>
    <p>Which metasyntatic syllable needs more air time?</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>

CSS

.hidden {
    display: none;
}
form {
    margin-bottom: 2em;
}
form p {
    margin: 0;
}

JavaScript

function addEventListener(el, type, func) {
    if (el.addEventListener) {
        el.addEventListener(type, func, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, func);
    }
}
function hide(el) {
    el.classList.add('hidden');
}
function show(el) {
    el.classList.remove('hidden');
}
function getOtherField(otherRadio) {
    var form = otherRadio.form;
    return form.querySelector('[name="other' + otherRadio.name + '"]');
}
function fieldDisplay(radio) {
    var field = getOtherField(radio);
    if (radio.checked) {
        show(field);
    } else {
        hide(field);
    }
}
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);
    }
}
var otherRadioSelector = 'input[type="radio"][value="other"]',
    otherRadios = document.querySelectorAll(otherRadioSelector),
    i,
    radio,
    field;
for (i = 0; i < otherRadios.length; i += 1) {
    radio = otherRadios[i];
    field = getOtherField(radio);
    hide(field);
    setupOtherRadioEventHandler(radio);
}