Radio Button and an Input field

Question

I wanna set up a form where users can choose from a set of radio buttons and if they dont like any choice they can use the last radio button which will have a text field to it where they can enter the custom text.

i have seen this on a few sites. just wondering where and how it was implemented

Answer 1

I made you an example, is this 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 thing by using Mootools (if you dont want to mix the 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 your input field then set the input field to be disabled. Attach a javascript event to the third radio button that calls a javascript function. This function will then enable the input field allowing the user to enter their own option. You should also add javascript events to the other two radio buttons to disable the input field if they are re-selected.