Bouton radio et un champ de saisie

Question

Je veux mettre en place un formulaire où les utilisateurs peuvent choisir parmi un ensemble de boutons radio et s'ils n'aiment aucun choix, ils peuvent utiliser le dernier bouton radio qui aura un champ de texte où ils peuvent entrez le texte personnalisé.

J'ai vu cela sur quelques sites. demandez-vous où et comment il a été implémenté

Answer 1

Je vous ai fait un exemple, c'est ce que vous vouliez? 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

Créez trois cases d'option et votre champ de saisie, puis définissez le champ de saisie à désactiver. Joignez un événement javascript au troisième bouton radio qui appelle une fonction javascript. Cette fonction activera alors le champ de saisie permettant à l'utilisateur d'entrer sa propre option. Vous devez également ajouter des événements javascript aux deux autres boutons radio pour désactiver le champ de saisie s'ils sont de nouveau sélectionnés.

Answer 3

hmmm @Dai était plus rapide que moi: P ... mais de toute façon, c'est une façon non intrusive de faire la même chose en utilisant Mootools (si vous ne voulez pas mélanger les js et le code html)

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'); 
}