Radio button and input field

Question

I want to create a form in which users can choose from a set of radio buttons, and if they don’t like any choice, they can use the last radio button in which there will be a text box where they can enter custom text.

I have seen this on several sites. just wondering where and how it is implemented

Answer 1

I made you an example, is that what you wanted? http://www.jsfiddle.net/T7gE7/

var temp = '';
function disableTxt() {
    var field = document.getElementById("other");
    if(field.value != '') {
        temp = field.value;
    }
    field.style.display = "none";
    field.value = '';
}
function enableTxt() {
    document.getElementById("other").style.display = "inline";
    document.getElementById("other").value = temp;
}

Answer 2

hmmm @Dai was faster than me: P ... but anyway, this is a non-intrusive way to do the same using Mootools (if you don't want to mix js and html code)

http://jsfiddle.net/raKbZ/1/

$('radio4').addEvent('change',function(E){
    if(E.target.checked){
        enableInput();
    }
});

$$('.normal').each(function(radio){
    radio.addEvent('change',function(E){
         if(E.target.checked){
             disableInput();
         }
    });
});


function enableInput(){
    $('other').set('disabled','');
    $('other').setStyle('background-color','#fff');
}

function disableInput(){
    $('other').set('disabled','disabled');
    $('other').setStyle('background-color','#d4d4d4');
}

Answer 3

create three radio buttons and an input field, and then set the input field to a value. Attach the javascript event to the third radio button that calls the javascript function. This function will then include an input field that allows the user to enter their own option. You must also add javascript events to the other two radio buttons to disable the input field if they were re-selected.