Ajout bouton radio dans form

Bonjour,

Comment faire pour ajouter des boutons radio dans une form ?

soit (peut-être : pas essayé) (position et non pas positioon)

function ajout() {
var position = document.getElementsByName("maforme")[0].length ;
var element = document.createElement("input") ;
element.type = 'radio' ;
element.name = 'mesradios' ;
element.value = 'label' ;
document.getElementsByName("maforme")[0].elements[position] = element ;
}

soit :

function ajout() {
var element = document.createElement("input") ;
element.type = 'radio' ;
element.name = 'mesradios' ;
element.value = 'label' ;
var cible = document.getElementsByName("maforme")[0];
cible.appendChild(element);
}


--
Stephane Moriaux et son [moins] vieux Mac

merci,

le premier ne marche pas ni sous IE, ni sous mozilla, deuxième marche
sans pb (pour l'instant sous mozilla).

Mais alors, comment faire pour lui ajouter du texte avec <br> ,
sauve-moi encore une foi, car je suis comme un enfant dans un
brouillard

Et aussi, si je peux abuser, explique-moi : Il semble bien que pour
chaque problème existe quelques solutions differents, certains
reconnues par IE, l'autre Netscape et heritiers voire par les deux.
Quelle est la meilleure approche si'l y en a ?

Merci encore et une révérence pour le vieux Mac.

Jacek

merci,

deuxième marche
sans pb (pour l'instant sous mozilla).

doit fonctionner aussi sans pb sous IE (et bp d'autres)
excepté pour IE Mac qui butte sur l'attribut 'type' à insérrer.

Mais alors, comment faire pour lui ajouter du texte avec <br> ,
sauve-moi encore une foi, car je suis comme un enfant dans un
brouillard

Je n'ai pas compris la question.

<script type="text/javascript">
var x = 0;
function ajout() {
x++;
var para = document.createElement('P');
var radio = document.createElement('INPUT');
radio.id = 'radio_'+x;
radio.name = 'radio_';
radio.type = 'radio';
para.innerHTML = 'Nouveau radio-bouton ('+x+') : ';
para.appendChild(radio);
document.forms['monForm'].appendChild(para);
}
</script>
<form name="monForm">
<p><input type=button onclick="ajout()" value="ajout" >
</form>


sinon, pour la question :

document.getElementById('inf').innerHTML = 'salut<br>gars';

Et aussi, si je peux abuser, explique-moi : Il semble bien que pour
chaque problème existe quelques solutions differents, certains
reconnues par IE, l'autre Netscape et heritiers voire par les deux.
Quelle est la meilleure approche si'l y en a ?

Je code pour NetsCape (plus exactement pour FireFox) sans utiliser les
trucs proprios.
Le code pour NC est "propre", le brouillonneux IE arrive à s'en
dépatouiller.
Après on affine pour les choses mal partagées entre les 2
(ou on s'en passe)

--
Stephane Moriaux et son [moins] vieux Mac

Je n'ai pas compris la question.

<script type="text/javascript">
var x = 0;
function ajout() {
x++;
var para = document.createElement('P');
var radio = document.createElement('INPUT');
radio.id = 'radio_'+x;
radio.name = 'radio_';
radio.type = 'radio';
para.innerHTML = 'Nouveau radio-bouton ('+x+') : ';
para.appendChild(radio);
document.forms['monForm'].appendChild(para);
}
</script>
<form name="monForm">
<p><input type=button onclick="ajout()" value="ajout" >
</form>

mais tu me donnes ce que me manque.

Mais, STP, j'ai l'impression qu'on melange les genres. La ligne
'para.innerHTML=...' rajoute du texte dans le paragraphe et
para.appendChild(radio) la declaration <input type=radio ...>
On pourrait mettre directement 'para.innerHTML = "texte avant<input
type=....> texte après"'
Ou, peut-être existe un moyen d'inserer le texte dans le paragraphe
avec 'appendChild'

Et puis il y a des nodes qui semblent pouvoir faire l'affaire ? (je
comprends reecrire l'exemple précédent utilisant les nodes, ses
propriétés et metodes).

Merci de tes reponses ; je sais, les questions sont pas mal 'newbies'
mais je debarque dans ce jungle des objets et j'essaye de me faire
quelque pistes

Jacek

j'ai l'impression qu'on melange les genres. La ligne
'para.innerHTML=...' rajoute du texte dans le paragraphe et
para.appendChild(radio) la declaration <input type=radio ...>
On pourrait mettre directement 'para.innerHTML = "texte avant<input
type=....> texte après"'

on peut donner à une variable comme valeur un paragraphe complet
puis faire monElement.innerHTML = maVariable;
mais :
1) ce n'est pas propre
2) risques de pertes d'attributs au passage suivant le navigateur
3) autres phénomènes dont celui-ci :

<div id="monDiv">
<form name="monForm">
<input type="text" value="Valeur originale" name="monInput">
<input type="button"
onclick="document.monForm.monInput.value='Nouvelle valeur';"
value="Changer la valeur">
<input type="button"
onclick="alert(document.getElementById('monDiv').innerHTML)"
value="Montrer le HTML">
</form>
</div>

suivant le navigateur,
ce qui est entré dans le champ texte sera ou pas capté

Ou, peut-être existe un moyen d'inserer le texte dans le paragraphe
avec 'appendChild'

c'est ce qui a été fait dans la fonction d'ajout proposée
(ce me semble?)

il n'y a pas que appendChild pour insérer des élements
insertBefore

appendChild est pratique car il rajoute en fond (bas, fin) de
l'élément-cible (dans l'exemple du précedent post on rajoute une nvelle
ligne au formulaire) on n'a pas à réfléchir ni rechercher de position
exacte.

De même pour enlever le dernier : lastChild

exo :

<script type="text/javascript">
var x = 0;
function ajout() {
x++;
var para = document.createElement('P');
var radio = document.createElement('INPUT');
radio.id = 'radio_'+x;
radio.name = 'radio_';
radio.setAttribute('type','radio');
para.innerHTML = 'Nouveau radio-bouton ('+x+') : ';
para.appendChild(radio);
document.forms['monForm'].appendChild(para);
}

function supprim() {
var el = document.forms['monForm'].lastChild;
document.forms['monForm'].removeChild(el);
x--;
}
</script>
<form name="monForm">
<p>
<input type=button onclick="ajout()" value="ajouter" >
<input type=button onclick="supprim()" value="retirer" >
</p>
</form>

Et puis il y a des nodes qui semblent pouvoir faire l'affaire ? (je
comprends reecrire l'exemple précédent utilisant les nodes, ses
propriétés et metodes).

Oui, voilà qui est du code propre :-)
Cependant innerHTML n'est pas fait pour les chiens :-)
et si on s'en sert pour ce pourquoi il existe (insérer du html simple
entre des balises) c'est très acceptable :-)

Merci de tes reponses ; je sais, les questions sont pas mal 'newbies'
mais je debarque dans ce jungle des objets et j'essaye de me faire
quelque pistes

Quand on en arrive à manipuler un peu tous ces nodes et childs, on est
déjà un peu moins newbie en JS par rapport au simple alert ou confirm :-)

Pour les pistes concernant manips d'objets DOM j'aime assez selfHtml :
http://fr.selfhtml.org/javascript/index.htm
http://fr.selfhtml.org/navigation/recherche/index.htm
http://fr.selfhtml.org/javascript/objets/node.htm
http://fr.selfhtml.org/javascript/objets/index.htm

Exemple d'application :
http://perso.wanadoo.fr/stephane.moriaux/truc/create_element
Emploi partiel pour insertions :
http://perso.wanadoo.fr/stephane.moriaux/truc/causer_au_popup
Copy Clone (dangereux car tout est volatile) :
http://perso.wanadoo.fr/stephane.moriaux/truc/copi_clone_popup/
Exo-demo-brouillon perso (pas fini ni nettoyé) :
http://perso.wanadoo.fr/stephane.moriaux/truc/jouer_avec_divs
Le même en + simple :
http://perso.wanadoo.fr/stephane.moriaux/truc/echange_divs

--
Stephane Moriaux et son [moins] vieux Mac

Merci Stephane, je prends ma machete et m'enfoce dans le jungle,
terrible jungle.

A bientot et mille salutations pour le pas si vieux

Jacek