generer un input text grace à un boutton

Version imprimable

28/12/2007, 23h08
Mo_Poly

generer un input text grace à un boutton

Salut,

Je voudrais avoir un bouton appelé "ajouter un logiciel" qui à chaque fois qu'on clique dessus ca genere un input text, dans lequel on va rentrer le nom du logiciel qui va etre ajouté dans un array dans un code php. ce que je ne sais pas faire c'est comment generer un input=text à chaque fois qu'on clique sur un boutton!

merci de m'aider

...

salut,

il y a plusieurs méthodes qui consistent a ajouter dans une div parent les éléments de ton formulaire :

1)

Code:

1
2
3
4
5
6
7
8
 
function ajouter_input() {
	var input_perso= document.createElement('input');
	input_perso.setAttribute('name', 'nom_input');
	input_perso.setAttribute('id', 'id_input');
	...
	div_parent.appendChild(input_perso);
}

Code:

1
2
3
4
 
function ajouter_input() {
	document.getElementById('div_parent').innerHTML += '<input type="text" value="ma_valeur" />';
}

Avec dans ton HTML :

Code:

1
2
3
 
<div id="div_parent"></div>
<input type="button" onclick="ajouter_input()" value="qjouter" />

Citation:
Envoyé par jln13
salut,

il y a plusieurs méthodes qui consistent a ajouter dans une div parent les éléments de ton formulaire :

1)
Code:

1 2 3 4 5 6 7 8 function ajouter_input() { var input_perso= document.createElement('input'); input_perso.setAttribute('name', 'nom_input'); input_perso.setAttribute('id', 'id_input'); ... div_parent.appendChild(input_perso); }
2)
Code:

1 2 3 4 function ajouter_input() { document.getElementById('div_parent').innerHTML += '<input type="text" value="ma_valeur" />'; }
Avec dans ton HTML :
Code:

1 2 3 <div id="div_parent"></div> <input type="button" onclick="ajouter_input()" value="qjouter" />
la deuxieme solution marche mais en faite j'ai encore un probleme, je dois recuperer les valeurs de tous les input textes dans une autre page mais ils ont tous le meme name, comment dois je faire pour les differencier

merci

...

28/12/2007, 23h55
jln13
Oui dans la première solution il faut rajouter ca pour que ca marche :
Code:

1 2 div_parent=document.getElementById('div_parent');
Sinon tu peux facilement générer des id différents en créant une variable globale que tu incrémentes a chaque fois que tu crées un input.

Dans le cas de la deuxième solution ca peut donner (en ayant initialisé la variable a 0 bien sur) :
Code:

1 2 3 4 5 function ajouter_input() { document.getElementById('div_parent').innerHTML += '<input type="text" id="id_'+variable_globale+'" value="ma_valeur" />'; variable_globale++; }
29/12/2007, 00h04
Auteur
bonjour,

une remarque en passant :
Code:

1 2 3 input_perso.setAttribute('name', 'nom_input'); input_perso.setAttribute('id', 'id_input');
IE ne connait pas setAttribute (ni getAttribute d'ailleurs), il est préférable d'utiliser cette écriture (qui est plus simple ceci dit) :
Code:

1 2 3 input_perso.name = "nom_input"; input_perso.id = "id_input";
Ensuite, pour créer et ajouter des éléments dans la page j'ai une nette préférence pour la méthode 1 décrite par jln13 à savoir utiliser les méthodes createElement() et appendChild() entre autres....

Pour ce qui est de donner des id différents à tes éléments en utilisant un compteur, tu pourrais avoir besoin de cette astuce décrite dans la FAQ :
http://javascript.developpez.com/faq...lick.dynamique

voici le code que j'essaie

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
var eglobe = 0;
function ajouter_input()
{
  document.getElementById('log').innerHTML +='<input type = "text" name = "log'+eglobe " /> ';
 
eglobe++;
 
 
}

ca ne marche pas
:aie:

...

essaye ce script ;)

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var identifiant = 0;
function AjouteInput()
{
    var elParent = document.getElementById("DivParent"); //conteneur
 
    var elInput = document.createElement("input"); // création de l'input
    var elBR = document.createElement("br");  // création d'un br
 
    elInput.type = "text"; //type de l'input
    elInput.value = identifiant;// contenu de l'input
 
    elInput.id = "idInput" + identifiant;  //id de l'input
    elInput.name = "nameInput" + identifiant; //name de l'input
 
    elInput.style.margin = "5px";
 
    elParent.appendChild(elInput); //ajout de l'input dans le div parent
    elParent.appendChild(elBR); //ajout d'un retrour à la ligne <br>
 
    identifiant++;
}
 
//-->
</script>
 
</head>
 
<body>
<form name="" method="post" action="" enctype="">
    <div>
        <input type="button" value="Ajouter" id="idButton" onclick="AjouteInput()"/>
    </div>
    <div id="DivParent">
    </div>
</form>
 
</body>
 
</html>

29/12/2007, 00h31
jln13
Citation:

document.getElementById('log').innerHTML +='<input type = "text" name = "log'+eglobe " /> ';

tu as oublié de fermer des guillemets, soit :
Code:

1 2 document.getElementById('log').innerHTML += '<input type = "text" name = "log'+eglobe+'" /> ';
29/12/2007, 01h13
Mo_Poly

une derniere question

supposons que j'ajoute deux input text dans lesquels j'ai ecris un texte, quand je clik sur le bouton ajouter pour ajouter un autre input text, les texts que j'ai deja ecris disparraisssent des premiers input texts, comment faire pour les garder

merci

...

Citation:

Envoyé par Mo_Poly

une derniere question

supposons que j'ajoute deux input text dans lesquels j'ai ecris un texte, quand je clik sur le bouton ajouter pour ajouter un autre input text, les texts que j'ai deja ecris disparraisssent des premiers input texts, comment faire pour les garder

teste le script que j'ai posté.....:roll:

le même avec 2 input texte déjà présents dans la page :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var identifiant = 0;
function AjouteInput()
{
    var elParent = document.getElementById("DivParent"); //conteneur
 
    var elInput = document.createElement("input"); // création de l'input
    var elBR = document.createElement("br");  // création d'un br
 
    elInput.type = "text"; //type de l'input
    elInput.value = identifiant;// contenu de l'input
 
    elInput.id = "idInput" + identifiant;  //id de l'input
    elInput.name = "nameInput" + identifiant; //name de l'input
 
    elInput.style.margin = "5px";
 
    elParent.appendChild(elInput); //ajout de l'input dans le div parent
    elParent.appendChild(elBR); //ajout d'un retrour à la ligne <br>
 
    identifiant++;
}
 
//-->
</script>
 
</head>
 
<body>
<form name="" method="post" action="" enctype="">
    <div>
        <input type="button" value="Ajouter" id="idButton" onclick="AjouteInput()"/>
    </div>
    <div id="DivParent">
    <input type="text" value="" id="idText_1" size="20" maxlength="10" /><br />
    <input type="text" value="" id="idText_2" size="20" maxlength="10" /><br />
    <br />
 
    </div>
</form>
 
</body>
 
</html>

et oublie innerHTML :roll:

Citation:

Envoyé par Auteur

teste le script que j'ai posté.....:roll:

le même avec 2 input texte déjà présents dans la page :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var identifiant = 0;
function AjouteInput()
{
    var elParent = document.getElementById("DivParent"); //conteneur
 
    var elInput = document.createElement("input"); // création de l'input
    var elBR = document.createElement("br");  // création d'un br
 
    elInput.type = "text"; //type de l'input
    elInput.value = identifiant;// contenu de l'input
 
    elInput.id = "idInput" + identifiant;  //id de l'input
    elInput.name = "nameInput" + identifiant; //name de l'input
 
    elInput.style.margin = "5px";
 
    elParent.appendChild(elInput); //ajout de l'input dans le div parent
    elParent.appendChild(elBR); //ajout d'un retrour à la ligne <br>
 
    identifiant++;
}
 
//-->
</script>
 
</head>
 
<body>
<form name="" method="post" action="" enctype="">
    <div>
        <input type="button" value="Ajouter" id="idButton" onclick="AjouteInput()"/>
    </div>
    <div id="DivParent">
    <input type="text" value="" id="idText_1" size="20" maxlength="10" /><br />
    <input type="text" value="" id="idText_2" size="20" maxlength="10" /><br />
    <br />
 
    </div>
</form>
 
</body>
 
</html>

et oublie innerHTML :roll:

oui je viens de le faire et effectivement ... ca marche

...

31/12/2007, 11h05
Auteur

Citation:

Envoyé par Mo_Poly

oui je viens de le faire et effectivement ... ca marche

...

:resolu: alors (dans le menu outils de la discussion) ? :D

Citation:

Envoyé par Auteur

:resolu: alors (dans le menu outils de la discussion) ? :D

Lol j'ai fait expret de ne pas cliquer dessus, je savais que j'allais encore planter (en fait je suis tres debutant en javascript :cry: )

bon en fait les données dans les input="text" vont etre ajouté dans une base de données XML, le script a parfaitement fonctionné dans la page d'ajout d'un nouveau noeud xml ; mais en fait j'ai probleme avec la page de modification ... parce que dans cette page je dois afficher dés le debut plusieurs input text (des données deja existantes , qu'on peut modifier) mais aussi donner la possibilité a lutilisateur dajouter dautre input text, donc le probleme ici est avec l'attribut name de l'input text ... car la variable globale cette fois ne dois pas etre initialisé par zero , mais pas une variable php ...

j'ai crée pour cela une fonction javascript qui ne fait que changer la valeur de la variable globale, et j'ai fait appel a cette fonction dans mon code php mais apparament ca na pas marché.. treve la parole je te montre mon code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript"> var id=0; function newid(idd) { id=idd+1; } function ajouteInput() { var parent = document.getElementById("log");//conteneur var input = document.createElement("input");//le input var br = document.createElement("br");//un retour à la ligne input.type= "text";//type de l'input input.id="logiciel"+id; input.name = "logg"+id; parent.appendChild(input); parent.appendChild(br); id++; } </script>
ceci est mon code javascript ... puis je te montre mon code php dans lequel jai fait l'appel de ma fonction javascript
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 echo"<script>newid($leslogs->length)</script> <FORM method=post action=\"saveeditlab.php\"> ................ ................ <TR> <TD> Les Logiciels</TD> <TD id=\"log\"> <input type=\"button\" onclick=\"ajouteInput()\" value=\"ajouter un logiciel\" /> <br />"; for($i=0;$i<$leslogs->length;$i++) { $str='logg'.$i; $logiciel = $leslogs->item($i)->nodeValue; echo" <input type=\"text\" name=\"$str\" value=$logiciel /><br/>"; } echo" </TD> </TR>
je tg'explique mon code:
j'ai fait appel a ma fonction javascript avant le <form> parce qu'en googlant un peu j'ai trouvé que ce genre d'appel ne marche pas dans un form :roll: ensuite dans le <tr> de logiciel, jai fait une boucle for qui affiche des input text avec les données dans le xml (les names de ces input sont "logg0" et jincremente apres ... ), donc je veux que quand jajoute un input text, je veux que son "nam" aie la valeur loggi (i la valeur suivante du dernier input text affiché au debut)

j'espere que mon probleme est clair :aie:

et merci beaucoup

...

31/12/2007, 15h32
jln13

Citation:

var id=0;
function newid(idd)
{
id=idd+1;
}

id est un mot réservé, remets identifiant comme avait mis Auteur dans son script et ca marchera.

Par contre je suis pas sur que ca soit la meilleure solution.
J'aurais plutot générer un champ hidden avec comme value la valeur de $leslogs->length.
Comme ca tu récupères la valeur simplement par un getElementById.
31/12/2007, 16h56
Mo_Poly

Citation:

Envoyé par jln13

id est un mot réservé, remets identifiant comme avait mis Auteur dans son script et ca marchera.

Par contre je suis pas sur que ca soit la meilleure solution.
J'aurais plutot générer un champ hidden avec comme value la valeur de $leslogs->length.
Comme ca tu récupères la valeur simplement par un getElementById.

j'ai changé le id mais ca na rien changé

mais stp est ce que tu peux me donner plus de details sur l'idée du champ hidden, malhereusement je suis un debutant en javascript alors je n'ai vraiment aucune idée sur cette idée.

merci infiniment

...

Hum, chez moi ca marche en reprenant le code d'Auteur et en rajoutant ta fonction newid, soit le code :
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <script>newid(2)</script> <form name="" method="post" action="" enctype=""> <div> <input type="button" value="Ajouter" id="idButton" onclick="AjouteInput()"/> </div> <div id="DivParent"> <input type="text" value="" id="idText_1" size="20" maxlength="10" /><br /> <input type="text" value="" id="idText_2" size="20" maxlength="10" /><br /> <br /> </div> </form> </body>
Sinon, au lieu de mettre :

Citation:

echo"<script>newid($leslogs->length)</script>

tu mets un champ hidden comme ceci :

Code:

echo'<input type="hidden" id="nb_input" value="'.$leslogs->length.'" />';

Du coup, au chargement de la page tu auras la valeur dans ta page et tu peux la récupérer en javascript par un document.getElementById('nb_input').value
Du coup, au lieu de lancer ta fonction newid au chargement de la page, tu as juste a adapter le code de ta fonction ajouteInput pour prendre en compte cette valeur.

01/01/2008, 02h31
Mo_Poly

oui ca marche c'est vrai, ca marchai pas a cause du +1 dans ma fonction qui n'est pas bon!

merci pour tout :)

...