Discussion :

[seïna]

Bonjour je ne connais pas beaucoup de choses en javascript.
J'ai un formulaire et à un moment j'ai un petit + qui déroule des champs input texte supplémentaires.
J'ai commencé à faire ça avec innerHtml mais j'ai vu que ça ne marchait pas sur firefox (que sur IE) et on m'a dit :"innerHtml c'est mal!!".
Comme je suis quelqu'un de pas contrariante, j'ai voulu essayer avec le DOM que je découvre.
Résultat : rien sous IE, ça marche sous Firefox. MAIS, dans la console d'erreur de Firefox ça me dit : "ajoutForm is not defined". Ce qui expliquerait que ça ne marche pas sous IE. Firefox a une erreur mais exécute quand même le script.
Pour commencer je n'ai créé avec le DOM que la première zone input pour voir si j'arrivais déjà à faire ça. J'ai suivi la méthode d'1 des FAQ de ce site que je trouvais bien expliquée.

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
 
function ajoutZones()
{
	// recherche du noeud parent
	var divParent = document.getElementById('ajoutForm');   
 
	// création des nouveaux noeuds
	var nveauField = document.createElement('fieldset');
	var nveauLegend1 = document.createElement('legend');
	var nveauParagraphe1 = document.createElement("p");
	var nveauLabel1 = document.createElement("label");
	var nveauInput1 = document.createElement("input");
 
	// paramétrage des nouveaux noeuds
	nveauLegend1.appendChild(document.createTextNode("INFOS :"));
	nveauLabel1.appendChild(document.createTextNode("Nom ou pseudo :"));
	nveauParagraphe1.appendChild(nveauLabel1);
	nveauLabel1.for = 'nomArtiste';
	nveauParagraphe1.appendChild(nveauInput1);
	nveauInput1.type = 'text';
	nveauInput1.name = 'nomArtiste';
	nveauInput1.id = 'nomArtiste';
 
	// raccord des noeuds
	nveauField.appendChild(nveauLegend1);
	nveauField.appendChild(nveauParagraphe1);
	divParent.appendChild(nveauField);
 
}

Je vous mets la partie de ma page où doit s'insérer la partie du formulaire créée avec le 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
 
<form method="post" action="controleurProgramme.php">
	<?php
                include 'listeArtistes.php';
        ?>
		<p><input type="radio" name="porteur" value="oui" id="oui"/><label for="oui">Artiste porteur :</label></p>
	</fieldset>
	<p><input type="hidden" name="idProg" value="<?php echo $id ?>"/></p>
	<p>
		<label>Autre artiste :</label> 
		<input type="button" name="ajout" value="+" onclick="ajoutZones()" />
	</p>
	<div id="ajoutForm">
	</div>
 
	<p>
		<input type="submit" name="valider" value="Valider"/><input type="reset" value="Réinitialiser"/>
	</p>
</form>

Il y a donc ce div ajoutForm que j'ai créé vide pour que le nouvel input s'insère là. En fait je me dis que l'erreur vient peut-être de là mais je n'arrive pas à trouver pourquoi il me dit que ajoutForm (nom de mon id) n'est pas défini.
PS : Info supplémentaire : message d'IE : identificateur attendu

[SpaceFrog]

http://www.developpez.net/forums/d53...ynamique-form/

[seïna]

Euh je suis allée voir ton lien mais désolée c'est un peu compliqué pour moi. Je m'y plongerai un peu plus longuement plus tard. Je préférerais qu'on m'explique pourquoi firefox me génère une erreur comme quoi mon div qui sert à recevoir mon formulaire supplémentaire est considéré comme non défini?
Je n'ai pas besoin d'un exemple aussi fourni que celui du lien.
Merci quand même

[seïna]

IE me donne en fait 2 erreurs : la 1ère me dit : identificateur attendu avant que je ne clique sur le + et la 2ème : objet attendu quand après avoir cliqué.

[Auteur]

bonjour,

voici une première erreur :

Code :

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

nveauLabel1.for = 'nomArtiste';

for est un mot clef javascript pour les boucles. L'équivalent de l'attribut for en html est htmlFor donc :

Code :

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

nveauLabel1.htmlFor = 'nomArtiste';

Autre erreur :

Code :

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

nveauInput1.id = 'nomArtiste';

.
Chaque fois que tu vas cliquer sur ton bouton "+", tu vas créer un champ avec un id="nomArtiste" or un id est unique dans la page !!
Il faut donc trouver un autre moyen pour définir tes id : par exemple incrémenter une variable qui sera concaténée à la valeur de l'id.

[seïna]

Merci auteur, ça marche.
En fait c'était le for qui bloquait. Tout ça pour ça...
Merci pour les explications annexes.
Quant à ta remarque au sujet des id différents, dans ce cas là ce n'est pas très grave car je dois juste en rajouter 3 qui seront toujours fixes donc je comptais les coder en dur. Mais effectivement j'ai une autre page où je vais devoir les générer à la volée et là je prendrai ta remarque en compte. Et si je galère je renverrai un appel à l'aide de nouveau.

[Auteur]

petite remarque :
Tu as écris (sans tenir compte des fautes dans le code) :

Code :

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

1
2
3
4
5
6
7
8
9
	nveauLegend1.appendChild(document.createTextNode("INFOS :"));
	nveauLabel1.appendChild(document.createTextNode("Nom ou pseudo :"));
	nveauParagraphe1.appendChild(nveauLabel1);
	nveauLabel1.htmlFor = 'nomArtiste';
	nveauParagraphe1.appendChild(nveauInput1);
	nveauInput1.type = 'text';
	nveauInput1.name = 'nomArtiste';
	nveauInput1.id = 'nomArtiste';

modifie un l'ordre des instructions. Fixe d'abord les propriétés des objets avant de les insérer dans la page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	nveauLegend1.appendChild(document.createTextNode("INFOS :"));
	nveauLabel1.appendChild(document.createTextNode("Nom ou pseudo :"));
	nveauLabel1.htmlFor = 'nomArtiste'; // htmlFor du label
	nveauParagraphe1.appendChild(nveauLabel1); // insertion du label

// propriétés de l'input
	nveauInput1.type = 'text';
	nveauInput1.name = 'nomArtiste';
	nveauInput1.id = 'nomArtiste';
	nveauParagraphe1.appendChild(nveauInput1); // insertion de l'input

pour moi ça me semble plus logique de procéder comme ça

[seïna]

Finalement, après la remarque de Auteur, j'ai décidé d'essayer quand même avec une boucle pour créer plusieurs éléments en 1 seule fois mais le problème c'est que je ne sais pas vraiment comment marchent les concaténations en javascript. J'ai donc essayé :

Code :

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

1
2
3
4
5
 
for (var i=1;i<4;i++)
	{
		var ("nveauInput"+i) = document.createElement("input");
	}

Et ben ça ne marche pas. Et avec simples quotes ça ne marche pas non plus. Et sans parenthèses non plus. Est-ce que vous pourriez m'aiguiller?
Merciiiiiiiiiiiiii

[Auteur]

C'est moins évident que ça
Regarde cet exemple :
http://javascript.developpez.com/faq...lick.dynamique (ne te préoccupe pas du setAttribute() dans le code)

[seïna]

Effectivement. Je jette un coup d'oeil plus précis et si ça bloque je reviens...

[seïna]

J'ai essayé mais il y a un ou plein de trucs qui doivent m'échapper.
Je vais encore essayer mais sinon je crois que je vais tout faire en dur, en attendant d'être contrainte de passer à cette boucle à la prochaine page.

[SpaceFrog]

le problème majeur de la création d'élements de formulaire sous IE est qu'il ne reconnait pas le name avec ce type d'attribution:

Code :

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

nveauInput1.name = 'nomArtiste';

il faut faire

Code :

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

document.createElement('<input name = "nomArtiste"<')

pour IE, sinon il n'est pas reconnu lors de l'envoi au niveau du serveur...

par contre les autres navigateurs ne reconnaissent pas cette syntaxe...
d'où le code que j'ai mis en contribution

[seïna]

Merci pour l'info. Je n'ai pas accès à IE aujourd'hui parce que je suis sous Mac. Je vérifierai ça demain.
Mais du coup on ne peut pas utiliser des commentaires conditionnels ou un truc du même genre pour destiner une partie du code à IE seulement?
Sinon pour les boucles, je ne sais pas pourquoi mais vraiment ça coince. Je pensais que c'était plus simple que ça.

[SpaceFrog]

il suffit de faire des tests if

par exemple

Code :

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

1
2
if (document.all){traitement IE}
else {traitment pour les autres}

pour plus de finesse dans les tests tu peux utiliser un sniffer
fais une rcherche sur google avec "ultimate browser sniffer"

[seïna]

Je prends note et je m'occuperai de ça demain.

[Auteur]

Seïna pour ton problème d'id sur tes éléments :

J'ai ajouté une variable globale n qui est incrémentée à chaque appel de la fonction. Cet indice est concaténé à l'id et au htmlFor des éléments.

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
35
36
37
var n=0;// initialisation de l'indice
function ajoutZones()
{
  //recherche du noeud parent
  vardivParent=document.getElementById('ajoutForm');
 
  //création des nouveaux noeuds
  varnveauField=document.createElement('fieldset');
  varnveauParagraphe1=document.createElement("p");
  varnveauLabel1=document.createElement("label");
  varnveauInput1=document.createElement("input");
 
  //paramétrage des nouveaux noeuds
  nveauLegend1.appendChild(document.createTextNode("INFOS:"));
 
  //propriétés du Label
  nveauLabel1.appendChild(document.createTextNode("Nom ou pseudo:"));
  nveauLabel1.indice=n;
  nveauLabel1.htmlFor='nomArtiste'+nveauLabel1.indice;//htmlFor du label
 
  nveauParagraphe1.appendChild(nveauLabel1);//insertion du label
 
  //propriétés de l'input
  nveauInput1.type='text';
  //nveauInput1.name='nomArtiste';//pas pris en charge par IE
  nveauInput1.indice=n;
  nveauInput1.id='nomArtiste'+nveauInput1.indice;
 
  nveauParagraphe1.appendChild(nveauInput1);//insertion de l'input
 
  n++;//incrément de l'indice
 
  //raccord des noeuds
  nveauField.appendChild(nveauLegend1);
  nveauField.appendChild(nveauParagraphe1);
  divParent.appendChild(nveauField);	
}

[seïna]

Après une absence de quelques jours me revoici. Merci beaucoup, beaucoup Auteur pour le message précédent concernant la variable incrémentée. Je vais mettre ça en place.

[seïna]

Je reviens dire ça un peu tard mais ça marche très bien ce qu'Auteur a expliqué. J'en profite pour le remercier encore au passage. Je l'utilise souvent, surtout pour créer des champs identiques multiples que l'utilisateur peut créer à la volée et ils prennent des id qui s'incrémentent. Comme j'avais oublié de mettre cette discussion comme résolue je le fais de ce pas…
Encore merci beaucoup

[Auteur]

Je reviens dire ça un peu tard mais ça marche très bien ce qu'Auteur a expliqué. J'en profite pour le remercier encore au passage. Je l'utilise souvent, surtout pour créer des champs identiques multiples que l'utilisateur peut créer à la volée et ils prennent des id qui s'incrémentent. Comme j'avais oublié de mettre cette discussion comme résolue je le fais de ce pas…
Encore merci beaucoup

De rien Content d'avoir résolu ton problème