insérer une liste déroulante à l'aide d'un code javascript dans un document XHTML

**tazmania** · 31/01/2007, 15h56

Salut,

Je commence à apprendre le XHTML.
Donc pour l'instant je me suis fait une première page que voici :

Code :

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

1
2
3
4
5
6
7
<body>
	<form method="post" action="submit" id="DocBooks"> 
		<formulaire>
			<input value="Rajouter un &eacute;l&eacute;ment &agrave; mon formulaire" onclick="add('formulaire')" type="button" \><br /> 
		</formulaire>
	</form>
</body>

Au clique de mon bouton je lance une fonction javascript celle si doit créer une liste déroulante qui va laisser le choix à l'utilisateur de sélectionner différents types d'éléments.

Voici mon code Javascript :

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
function add(id) {
 
//Variable qui va stocker le paramètre passé à ma fonction
stockid = id;
 
//Récupération de l'endroit où l'on se situe
var elForm = document.getElementsByTagName(id);
 
//Création d'une balise select qui va afficher les élements que l'utilisateur peut créer
var elSelect = document.createElement("select");
 
//Insertion de ma balise select
elForm.appendChild(elSelect);
elSelect.setAttribute("id", "AjoutElement");
 
elSelect.options.add(new Option("Choisissez un élément à insérer"));									
//Insertion des éléments que l'utilisateur peut sélectionner
elSelect.options.add(new Option("Un checkbox","Un checkbox",false,false);
elSelect.options.add(new Option("Un bouton de choix","Un bouton de choix",false,false);
elSelect.options.add(new Option("Un bouton","Un bouton",false,false);
etc...

Par contre le truc c'est que je n'arrive pas à insérer ma liste déroulante.
Je pense que cela est dû au

var elForm = document.getElementsByTagName(id);

mais j'ai bien essayé par getElementById(id) mais il ne trouve pas ma balise book.

Aurriez-vous une solution à me proposer

**freekind** · 01/02/2007, 00h28

Bonjour,

Premièrement, je ne sais pas si c'est dû au recopiage rapide de ton code, mais il te manque des parenthèses lors de l'ajout de tes options.

Ensuite, ton problème principal réside ici:

var elForm = document.getElementsByTagName(id);

Tu utilises la méthode qui te permet de récupérer une collection d'objets, et non l'objet où tu te situes. Si ton objectif est bel et bien d'ajouter ta liste déroulante à ton formulaire, tu dois utiliser getElementById(id) qui te retournera un objet résultant normalement d'un ID unique.

A+

**tazmania** · 01/02/2007, 13h04

Merci pour ta réponse.
En effet, il me manque mes parenthèses fermantes, comme tu l'as dis j'ai été trop vite dans ma recopie du code.

Je sais que mon problème réside sur :

var elForm = document.getElementsByTagName(id);

mais si je remplace par :

var elForm = document.getElementById(id);

Il ne trouve rien car je ne passe pas l'id de ma form mais le nom de ma balise "formulaire". Et là Javascript ne la reconnait pas dans mon document.

**freekind** · 01/02/2007, 19h50

Rebonjour,

Après quelques tests, je suis parvenu à obtenir quelque chose sous FF, mais pas sous IE... étrange.

Prenant ce fragment de code XML (dans ma page HTML):

Code :

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

1
2
3
4
5
 
<aXml>
   <book id="test2">un test2</book> 
   <book id="test3">un test3</book>
</aXml>

Et ce script:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
 
   // test sous IE et FF
   if (document.all) {
      alert(document.getElementsByTagName("book")[0].childNodes.length); 
      // ... actions sous IE ...
   }
   else {
      alert(document.getElementsByTagName("book")[0].childNodes.length);
      // ... actions sous FF ...
   }
</script>

Pourtant, sous Firefox, j'arrive à aller chercher le contenu de les balises BOOK. Sous IE, j'arrive à aller chercher les attributs de la balise BOOK (ex: l'id) mais il ne semble pas voir de childNodes (indique 0 dans l'exemple ci-dessus). Je devine que sous FF, ça serait probablement facile d'ajouter ta liste déroulante à ta balise... Probablement que la solution est proche...

A suivre!

**tazmania** · 01/02/2007, 20h38

Donc en fait je suis obligatoirement obliger de passer par un identifiant id dans ma balise book.
Je ne peux pas tout simplement récupérer book comme ça.

**freekind** · 01/02/2007, 20h47

D'abord... pour répondre à ta question: oui, tu peux utiliser getElementsByTagName("BOOK")[N], N étant l'index courant de la collection.

Sinon, en cherchant un peu plus, je crois avoir confirmé ce que je pensais...

Le fait que tu veuilles personnaliser ton document HTML en y ajoutant des balises à ta sauce n'implique pas du tout que ça soit du XHTML... Comme tu as sûrement pu le lire sur le w3 (et d'après ce que j'ai compris en lisant moi-même), le XHTML est avant tout un moyen de "resserrer" les standards déjà établis du HTML. Je crois qu'on peut tout de même ajouter des balises personnalisées, mais elles doivent faire référence à un namespace approprié correspondant.

Ma dernière tentative m'a convaincu que IEest limité en ce qui a trait au XML intégré à une page HTML et ce, sans utilisation de namespace:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<aXml>
   <formulaire id="test">
      <book id="test2" />
      <book id="test3" />
   </formulaire>
</aXml>
 
<script type="text/javascript">
var aXml = document.getElementsByTagName("BODY")[0].childNodes[0];
aXml.appendChild(document.createTextNode("anyLabel"));
</script>

J'obtiens une erreur de IE: demande d'accès à la méthode ou aux propriétés inattendue.

Ce que tu essaies de faire dans l'exemple initialement fourni (puisque tu ajoutes de nouvelles balises à ta page qui ne sont pas gérées par le w3), comme mentionné dans cet article, ressemble plus à du text/xml... Je te suggère donc

1) d'isoler ton code dans un document XML et d'y travailler en le chargeant en mémoire avec les méthodes déjà disponibles à cet effet.

2) de tenter de nouvelles avenues en utilisant un namespace approprié pour ta balise "formulaire".

Voici deux articles intéressants (en anglais) que j'ai trouvés

http://forums.devshed.com/css-help-1...ss-104937.html
http://www.topxml.com/xhtml/

**tazmania** · 01/02/2007, 20h58

Merci, je vais aller consulter ces deux pages Web et voir ce qu'il en est

insérer une liste déroulante à l'aide d'un code javascript dans un document XHTML

JavaScript

Discussions similaires

Partager

Partager