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+'" /> ';