[DOM] Insertion élément de formulaire dans page html
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!!".:evilred:
Comme je suis quelqu'un de pas contrariante, :ange: 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:
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:
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.:help:
PS : Info supplémentaire : message d'IE : identificateur attendu
