Discussion :

[Mo_Poly]

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



...

[jln13]

salut,

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

1)

Code :

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

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 :

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

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

Avec dans ton HTML :

Code :

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

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

[Mo_Poly]

salut,

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

1)

Code :

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

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 :

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

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

Avec dans ton HTML :

Code :

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

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


...

[jln13]

Oui dans la première solution il faut rajouter ca pour que ca marche :

Code :

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

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 :

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

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++;
}

[Auteur]

bonjour,

une remarque en passant :

Code javascript :

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

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 javascript :

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

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

[Mo_Poly]

voici le code que j'essaie

Code :

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

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



...

[Auteur]

essaye ce script

Code html :

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
 
<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>

[jln13]

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

tu as oublié de fermer des guillemets, soit :

Code :

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

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

[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



...

[Auteur]

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é.....



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

Code html :

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
 
<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

[Mo_Poly]

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



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

Code html :

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
 
<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

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


...

[Auteur]

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


...

alors (dans le menu outils de la discussion) ?

[Mo_Poly]

alors (dans le menu outils de la discussion) ?

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 )

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 :

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
<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 :

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
 
 
		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 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

et merci beaucoup


...

[jln13]

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.

[Mo_Poly]

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



...

[jln13]

Hum, chez moi ca marche en reprenant le code d'Auteur et en rajoutant ta fonction newid, soit le code :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
	var identifiant = 0;
	function newid(idd)
	{
		identifiant=idd+1;
	}
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>
<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 :

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

tu mets un champ hidden comme ceci :

Code :

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

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.

[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


...