[DOM] afficher un input dans un formulaire

**une_tite_question** · 14/08/2008, 11h02

Bonjour ,
J'apprend actuellement le javascript + dom et j'ai parcouru quelques tutos mais je bloque sur l'application.
Je veux faire une petite fonction qui m'affiche lorsque je clique sur un lien un bouton de type texte à l'intérieur de mon formulaire et bien sûr rien ne s'affiche.Pouvez vous mez dire où je me suis trompé.

Autre question : y a t il un moyen d'afficher les messages d'erreur sous javascript.Pour savoir à quel niveau notre fonction plante.
Merci d'avance

Voici le code de mon formulaire

Code :

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

1
2
3
4
5
6
7
8
 
  <form id="form1" action="test.php" method="post">
 
            <a href="" id="monLien" value="Cliquez ici pour afficher l'input" onclick="Afficher(monLien,form1);">
                Cliquez ici pour afficher l'input
            </a>
 
        </form>

voici le code de ma fonction

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
 
  function Afficher(x,y)
           {
            // au clic on crée un element texte
 
           var text = document.createElement("input") ;
           text.setAttribute("type","text") ;
           text.setAttribute("id","monInput") ;
           text.setAttribute("value","l'input qui venait de loin");
 
            // On l'ajoute au formulaire On va utiliser insertBefore
 
            // Il faut récupérer la représentation Dom de la balise de nom monLien
 
            var monlien = document.getElementById("x") ;
 
            // Il faut aussi récupérer l'équivalent Dom du formulaire
 
            var monFormulaire = document.getElementById("y") ;
 
            // On utilise insertBefore pour entrer l'input
 
            monFormulaire.insertBefore(monlien,text);
 
         //   document.body.x.appendChild(text) ;
 
           }

Voici le code de ma page en entier

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <script language="Javascript">
 
           function Afficher(x,y)
           {
            // au clic on crée un element texte
 
           var text = document.createElement("input") ;
           text.setAttribute("type","text") ;
           text.setAttribute("id","monInput") ;
           text.setAttribute("value","l'input qui venait de loin");
 
            // On l'ajoute au formulaire On va utiliser insertBefore
 
            // Il faut récupérer la représentation Dom de la balise de nom monLien
 
            var monlien = document.getElementById("x") ;
 
            // Il faut aussi récupérer l'équivalent Dom du formulaire
 
            var monFormulaire = document.getElementById("y") ;
 
            // On utilise insertBefore pour entrer l'input
 
            monFormulaire.insertBefore(monlien,text);
 
         //   document.body.x.appendChild(text) ;
 
           } 
 
 
        </script>
 
  </head>
  <body>
 
  <!-- On crée un formulaire -->
 
        <form id="form1" action="test.php" method="post">
 
            <a href="" id="monLien" value="Cliquez ici pour afficher l'input" onclick="Afficher(monLien,form1);">
                Cliquez ici pour afficher l'input
            </a>
 
        </form>
 
  </body>
</html>

Merci

**Bovino** · 14/08/2008, 11h10

Code :

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

onclick="Afficher('monLien','form1');return false"

Pour les messages d'erreur, télécharge Firebug pour FF.

**Bovino** · 14/08/2008, 11h13

Autre erreur :

Code :

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

1
2
3
4
5
var monlien = document.getElementById(x) ;
 
            // Il faut aussi récupérer l'équivalent Dom du formulaire
 
            var monFormulaire = document.getElementById(y) ;

**une_tite_question** · 14/08/2008, 11h38

OK je teste tout ça.
Merci

**une_tite_question** · 14/08/2008, 12h20

Bonjour ,
J'ai téléchargé et installé l'extension firebug.Il me reste plus qu'à lire un petit tuto sur son utilisation.
Pour le programme de test merci pour les modifs :
Mais en faisant

Code :

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

1
2
 
monFormulaire.insertBefore(monlien,text);

rien ne s'affiche
Par contre

Code :

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

1
2
 
monFormulaire.appendChild(text);

fonctionne très bien
Est ce que tu peux m'expliquer le coup du return false après le onclick.

Merci

**une_tite_question** · 14/08/2008, 12h21

J'viens d'avoir ma première étoile

**Bovino** · 14/08/2008, 12h48

Le href="" engendre le rechargement de ta page après l'exécution du onclick, du coup, tu ne peux pas voir les modifications, un return false permet d'inhiber l'action du href.

[DOM] afficher un input dans un formulaire

JavaScript

Discussions similaires

Partager

Partager