Discussion :

[Ricou13]

Salut,

J'aimerais avoir votre avis sur la gestion des boutons radio avec le DOM, dans une optique XHTML.

Comment connaitre la valeur active d'un groupe de bouton radio et comment la modifier via le code ?

Sachant que
1) "getElementsByName" est dépréciée,
2) que "document.MyForm.MyRadio.value" n'est (me semble-t-il) pas vraiment "DOM-Like" ( le jeu de mots à 30 centimes d'euros [Ndlr à l'attention des "vieux" : à 2 balles])

3) et que coller un ID à chaque bouton radio n'est pas la panacée car c'est plutot difficile sur une liste de boutons générée via php :

- Créer des id avec un numéro d'ordre ("MyRadio-1", "MyRadio-2" par exemple) n'aidera pas beaucoup, ni dans la recherche, ni dans l'affectation
- inclure la valeur (value) dans l'ID ("MyRadio-toto", "MyRadio-tata" par exemple) ne marchera que si la valeur ne contient pas d'espace ou de hiéroglyphes
- Ca me parait vraiment lourd de passer par des ID

Bref, j'ai écrit ces 2 fonctions qui me semblent franchement "moyennes" comme solution (même si elles fonctionnent bien) et j'aimerais savoir si vous avez une meilleure méthode (sachant que je suis loin d'être un pro du DOM)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Cette fonction indique la valeur du bouton radio coché dans le groupe demandé
function WhichRadio(RadioName)
{
  // Recherche des objets de type "input"
  var Inputs = document.getElementsByTagName('input');
  for(i = 0; i < Inputs.length; i++)
  {
    // filtre sur les radios
    if(Inputs[i].type == "radio")
    {
      // Filtre sur le bouton radio recherché et vérification de son état
      if(Inputs[i].name == RadioName && Inputs[i].checked)
        return Inputs[i].value;
    }
  }
  return "none";
}
 
// Cette fonction coche le bouton radio ayant la valeur demandé
function SetRadio(RadioName, Valeur)
{
  // Recherche des objets de type "input"
  var Inputs = document.getElementsByTagName('input');
  for(i = 0; i < Inputs.length; i++)
  {
    // filtre sur les radios
    if(Inputs[i].type == "radio")
    {
      // Filtre sur le bouton radio recherché et sa valeur
      if(Inputs[i].name == RadioName && Inputs[i].value == Valeur)
        Inputs[i].checked = "checked";
    }
  }
}

Merci

[Ricou13]

Pas de réponse ?

Vous ne gérez pas de boutons radio ?

...


(j'avoue, c'est un "up" camouflé )

[Gruik]

Je crois qu'il n'ya pas d'autre solution que la boucle effectivement avec comme id un prefixe + un numéro.
En plus on peut pas vraiment créer de radio via DOM (sous IE, on peut pas affecter de "name", et si on peut pas affecter de name, on peut pas dire au navigateur qu'ils correspondent à la meme option)
Est ce vraiment si crado? Tu ferais la meme chose si c'était des checkboxes. (à la difference que les checkboxes peuvent être crés entierment via DOM)

[Ricou13]

Salut,

C'est un peu différent avec les checkbox puisqu' ils sont indépendants.
Chaque checkbox à sa propre valeur et est gérée independament.
Il n'y a pas de notion de "1 groupe = plusieurs valeurs possibles"
On peut donc utiliser des id.

Je dirais que les radio se rapprochent plus de la liste déroulante en size=1 dans le sens "1 nom = plusieurs valeurs".
La différence est que la liste est un objet unique à qui on peut donc attribuer un id et qu'elle possède l'attribut "value" alors que les radio sont des objet physiquement indépendants d'où un "name" et plusieurs attributs "value".

Et le "document.MyForm.MyRadio.value" ? C'est valable en DOM ou "déconseillé" ?

[Gruik]

Bein d'apres le w3c, c'est pas possible de faire myform.myradio.value
Par contre il existe la propriété "elements" qui semblerait contenir tous les controles du formulaire, mais j'ai jamais essayé et je sais pas sous quelle forme est ce tableau...

http://www.w3.org/TR/2000/WD-DOM-Lev...ml#ID-40002357

[Ricou13]

"elements" existe depuis longtemps mais c'est de la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.MyForm.elements[i].value;

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.forms[0].elements[i].value;

Voire peut-être aussi (mais j'en suis moins sûr vu que ça date un peu)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.MyForm.elements["MyRadio"].value;

Ce qui revient toujours à passer par l'objet "form", dans la syntaxe vue précedemment

[Ricou13]

En plus on peut pas vraiment créer de radio via DOM (sous IE, on peut pas affecter de "name", et si on peut pas affecter de name, on peut pas dire au navigateur qu'ils correspondent à la meme option)

J'ai écrit le code suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   var Input;
  var Parent = document.getElementById("MyDiv");
  for(i = 1; i < 5; i++)
  {
    // Création du bouton radio
    Input = document.createElement("input");
    Input.setAttribute("type", "radio");
    Input.setAttribute("name", "MyRadio");
    Input.setAttribute("value", "Radio" + i);
    Input.onclick = function() { alert(this.name + " - " + this.value); };
    // Ajout au div nommé "MyDiv"
    Parent.appendChild(Input);
    Parent.appendChild(document.createTextNode("Radio" + i));
  }
  // Affichage du code de la Div
  alert(Parent.innerHTML);

C'est effectivement très intéressant

Sous FF 2 :
- L'affichage du code (innerHTML) fait apparaitre les 3 attributs mais pas le onclick (en passant par cette écriture c'est normal)
- Les onclick fonctionnent normalement (basculement du checked) et affichage des infos demandées

Sous IE 6 :
- L'affichage du code (innerHTML) ne fait apparaitre que type et value mais ni name, ni onclick
- Les onclick affichent cependant correctement les infos demandées (name et value, donc name existe bien quelque part) mais restent toujours désactivées (pas de checked)



Trop fort ce Billou

[Gruik]

Oui, on en avait parlé ici : http://www.developpez.net/forums/sho...d.php?t=257967
http://msdn.microsoft.com/workshop/a...ies/name_2.asp

La solution c'est de passer par innerHTML pour la creation de bouton radio, si on veut un truc crossbrower