Ajouter un nouveau champs par bouton + et création de variables

**Medenor** · 21/04/2010, 13h31

Bonjour

Je monte actuellement un formulaire de génération de fiche, en gros selon les informations entrées, l'utilisateur récupère un texte contenant ces informations (le texte étant formaté, etc).

J'aurai voulu savoir si ce qui suit est possible:

En gros, avoir un bouton "+" qui permet d'ajouter deux nouveaux input côte à côte. Ce que l'utilisateur y entre sera récupéré sous forme de variables pour le texte.

Est-ce possible ?

Le lien du générateur:
http://warforum-jdr.com/genprez/presentation.php

Merci d'avance

**SpaceFrog** · 21/04/2010, 13h49

ça doit même être dans les contributions ...

**Medenor** · 21/04/2010, 17h24

Bonjour

En effet. J'ai également abouti avec des recherches google.
J'ai utilisé ce script que j'ai trouve sur le net:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script>
function create_champ(i) {
 
var i2 = i + 1;
 
document.getElementById('leschamps_'+i).innerHTML = '<input type="file" name="fichier_'+i+'"></span>';
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>' : '';
 
 
}
</script>

Voici mon script adapté:

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
 
<script>
function create_champ(i) {
 
var i2 = i + 1;
 
document.getElementById('pdc_'+i).innerHTML = '<tr>
    <td><input name="pdcname_'+i+'" type="text" id="pdcname_'+i+'" size="15" maxlength="255" value="Nom Dieu" onclick="this.value=\'\';" /></td>
    <td><input name="pdcpts_'+i+'" type="text" id="pdcpts_'+i+'" size="3" maxlength="2" /></td>
  </tr>
    </span>';
document.getElementById('pdc_'+i).innerHTML += (i <= 10) ? '<br /><span id="pdc_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un Dieu</a></span>' : '';
 
 
}
</script>

Voici la zone où est appliquée la génération dynamique de champs (c'est dans du php):

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<table>
  <tr>
    <td><input name="pdcname_1" type="text" id="pdcname_1" size="15" maxlength="255" value="Nom Dieu" onclick="this.value=\'\';" /></td>
    <td><input name="pdcpts_1" type="text" id="pdcpts_1" size="3" maxlength="2" /></td>
  </tr>
  <tr>
   <td><span id="pdc_2"><a href="javascript:create_champ(2)">Ajouter un Dieu</a></span></td>
   </tr>
</table>

Mais le script ne fonctionne pas, rien ne se passe quand j'appuie sur Ajouter un Dieu. Hors j'ai cherché mon erreur, sans succès :s

Voyez:
http://warforum-jdr.com/genprez/test.php

Pouvez-vous m'aider ?
Merci

**SpaceFrog** · 22/04/2010, 08h22

Voilà ce qu'il arrive lorsque l'on utilise des scripts iochés ailleurs qui utilisent du l'insertion avec innerHTML ... :grin:
Je te conseillerais plutot d'utiliser les scripts de nos contributions qui utilisent createElemetn ou cloneNode...

**Medenor** · 22/04/2010, 11h10

Bonjour

En effet, avec :

http://javascript.developpez.com/sou...e=forms#upload

ca fonctionne. J'ai réussi à adapter correctement

Néanmoins, je me pose la question: comment récupérer la/les variables créées pour

Code :

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

1
2
function generation()
{

Par exemple:

Code :

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

1
2
3
4
<tr>
            <td valign="top" align="right" >Nom & Pr&eacute;nom du personnage: </td>
            <td valign="top" align="left" ><input name="nomperso" type="text" id="nomperso" size="25" maxlength="255" /></td>
          </tr>

Code :

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

$nomperso = $_POST['nomperso'];

Là pas de problèmes. Mais ici ?

Merci d'avance

**vermine** · 22/04/2010, 11h22

Bonjour,

Vous pouvez répéter la question ?
Si vous êtes côté serveur, votre PhP fonctionnera.
Si vous restez côté client pour du Javascript, vous récupérer un élément ainsi:

Code :

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

1
2
 
var nomperso = document.getElementById("nomperso").value;

**Medenor** · 22/04/2010, 11h30

Bonjour

Voyez:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
 
<script type="text/javascript">
          var compteur = 0;
         function ajouter(){
            // On récupère le fieldset
            var conteneur   = document.getElementById('Croyances');
            /**
            * Création des éléments dont on a besoin :
            * Un div dans lequel on mettra notre champ file et une case à cocher
            * qui nous servira à enlever ensuite le div.
            *
            * En utilisant un div ça sera plus facile car sinon
            * on aurais du enlever le champ file et la case à cocher séparément.
            */
            var undiv      = document.createElement('div');
            var pdc1      = document.createElement('input');
			var pdc2      = document.createElement('input');
            var check      = document.createElement('input');
 
            pdc1.name   = 'pdcname1[]';
            pdc1.type   = 'text';
			pdc1.size   = '15';
			pdc1.maxlenght   = '255';
			pdc1.value   = 'Nom Dieu';
			pdc2.name   = 'pdcname2[]';
            pdc2.type   = 'text';
			pdc2.size   = '3';
			pdc2.maxlenght   = '2';			
            check.type   = 'checkbox';
 
            // On enlève sur le click de la checkbox
            check.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv);
            }
 
            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
            undiv.appendChild(pdc1);
			undiv.appendChild(pdc2);
            undiv.appendChild(check);
            undiv.appendChild(document.createTextNode("Enlever"));
 
            // Ajout du div :
            conteneur.appendChild(undiv);
         }
      </script>
   </head>
   <body>
      <form action='mapage.php' method='post' enctype='multipart/form-data'>
         <fieldset id='Croyances'>
            <legend>Croyances</legend>
            <input type='button' value='Ajouter un Dieu' onclick='ajouter()' /><br />
         </fieldset>
      </form>
      <?php 
          function generation()
{
        // les différentes variables sont exprimées ici
        ?????
 
?>
   </body>
</html>

Que dois-je mettre à la place des ??? pour récupérer les valeurs que l'utilisateur va entrer dans le/les champs ?

Je pensais à :

Code :

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

1
2
$pdcname1[] = $_POST['pdcname1[]'];
$pdcname2[] = $_POST['pdcname2[]'];

Mais sans grande conviction

**SpaceFrog** · 22/04/2010, 11h34

la methode de siddh attribue les names dynamiquement

, ça ne fonctionne pas avec IE ...

il faudrait plutot passer par un objet de formulaire caché et tu le clones avec cloneNode, puis te le rends visible.
Ensuite coté php tu recupères un tableau car ils ont le même name ...

Sinon il faudra passer par une autre contribution pour créer dynamiquemnt des objets de form :
http://www.developpez.net/forums/d53...s+pas+que+form

Prise en compte du name assurée ...

**Medenor** · 22/04/2010, 11h44

Des deux propositions, celles de ta source je choisi. Néanmoins, l'un comme l'autre, je ne comprend pas

**SpaceFrog** · 22/04/2010, 12h00

Il faut juste comprendre que IE ne sait pas attribuer ni modifier un name d'objet de formulaire dynamiquement.

**Medenor** · 22/04/2010, 12h22

Oui ^^ je parlais des scripts que tu me donnes pour pallier au problème.

Et IE si nous le mettions dans le grenier comme un pestiféré, en ne gardant que les autres navigateurs ? Il y aurait possibilité avec le code de siddh que ça fonctionne ?

**SpaceFrog** · 22/04/2010, 12h40

On a déja du mal à enterrer définitivement IE6 ... alors de là a erradiquer toutes les versions :grin:
Le code source donné dans la contribution est expliqué dans le post

**Medenor** · 22/04/2010, 13h11

J'arrive jusque là pour le script:

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
<script type="text/javascript">
function Construct(){
 
var pdc=$C( {"obj":"fieldset","id":"Croyances"} );
 
    var myFieldSet= $C( {"obj":"legend",'innerHTML':'Croyances' } );
        var pdc1=$C({"obj":"input","type":"text","name":"pdcname1[]","size":"15","maxlenght":"255","value":"Nom Dieu","onclick":"this.value='';"} );
		$Close(pdc1);
		var pdc2=$C({"obj":"input","type":"text","name":"pdcname2[]","size":"3","maxlenght":"2"} );
     	$Close(pdc2);
 
 
    $Close(myFieldSet);
 
$Close(pdc)
}
</script>

Y a surement des fautes, et c'est pas complet: il manque la checkbox pour supprimer, ça je vois pas quoi écrire :s

**SpaceFrog** · 22/04/2010, 13h20

dis toi qu'une fois les pbjets créés en insérés dans la page (Close()) ils deviennent des objet à part entière de la page que tu peux manipuler avec js

**Medenor** · 22/04/2010, 14h30

Envoyé par SpaceFrog

dis toi qu'une fois les pbjets créés en insérés dans la page (Close()) ils deviennent des objet à part entière de la page que tu peux manipuler avec js

C'est à dire ?

Je suis largué là

**Medenor** · 23/04/2010, 13h10

Bonjour

J'ai essayé diverses manières hasardeuses, aucune n'a malheureusement marché. J'ai essayé de fusionner les scripts (de SpaceFrog et de siddh), sans succès

Pouvez-vous m'aider ? Ce système est très important pour le générateur car il va être utilisé à plusieurs reprises dans ce dernier.

Merci d'avance

**Medenor** · 29/04/2010, 21h14

Bonsoir

On m'a conseillé, pour permettre au script de siddh d'être utilisé par IE, d'utiliser des setAttribute comme ceci:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
 
<script type="text/javascript">
          var compteur = 0;
         function ajouter(){
            // On récupère le fieldset
            var conteneur   = document.getElementById('Croyances');
            /**
            * Création des éléments dont on a besoin :
            * Un div dans lequel on mettra notre champ file et une case à cocher
            * qui nous servira à enlever ensuite le div.
            *
            * En utilisant un div ça sera plus facile car sinon
            * on aurais du enlever le champ file et la case à cocher séparément.
            */
            var undiv      = document.createElement('div');
            var pdc1      = document.createElement('input');
			var pdc2      = document.createElement('input');
            var check      = document.createElement('input'); 
 
			pdc1.setAttribute ('name', 'pdcname1[]'); 
			pdc1.setAttribute ('type', 'text'); 
			pdc1.setAttribute ('size', '5'); 
			pdc1.setAttribute ('maxlenght', '255'); 
			pdc1.setAttribute ('value', 'Nom du Dieu');
 
			pdc2.setAttribute ('name', 'pdcname2[]'); 
			pdc2.setAttribute ('type', 'text'); 
			pdc2.setAttribute ('size', '3'); 
			pdc2.setAttribute ('maxlenght', '2'); 
 
            check.setAttribute ('type', 'checkbox');
 
            // On enlève sur le click de la checkbox
            check.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv);
            }
 
            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
            undiv.appendChild(pdc1);
			undiv.appendChild(pdc2);
            undiv.appendChild(check);
            undiv.appendChild(document.createTextNode("Enlever"));
 
            // Ajout du div :
            conteneur.appendChild(undiv);
         }
      </script>
   </head>
   <body>
      <form action='mapage.php' method='post' enctype='multipart/form-data'>
         <fieldset id='Croyances'>
            <legend>Croyances</legend>
            <input type='button' value='Ajouter un Dieu' onclick='ajouter()' /><br />
         </fieldset>
      </form>
   </body>
</html>

La page test:
http://warforum-jdr.com/genprez/test2.php

Mes questions sont:
- est-ce correct pour régler le problème IE ?
- Comment faire pour récupérer les variables avec les informations entrées par l'utilisateur, via des $_POST dans une function generation qui génère la fiche contenant les infos entrées par l'utilisateur ?

Merci d'avance et bonne soirée

**SpaceFrog** · 30/04/2010, 08h29

- est-ce correct pour régler le problème IE ?
- Comment faire pour récupérer les variables avec les informations entrées par l'utilisateur, via des $_POST dans une function generation qui génère la fiche contenant les infos entrées par l'utilisateur ?

1- l'attribution de name en runtime n'est pas possible !!! docn NON
2- Utiliser le script dont je t'ai donné le lien, tout est expliqué dansz le post...

**Medenor** · 01/05/2010, 09h16

Bonjour

2- Utiliser le script dont je t'ai donné le lien, tout est expliqué dans le post...

On retombe sur le même problème qu'avant: j'ai lu votre post, plusieurs fois. Mais je ne comprends pas -> je stagne au même stade et ça me retarde

Ce n'est pas faute d'essayer de comprendre

**SpaceFrog** · 01/05/2010, 09h52

On va avancer plus vite si tu nous donnes les symptômes ...
Parce que "j'arrive pas", c'est comme si tu allais voir ton docteur et tu lui disais "je suis malade" ...

Ajouter un nouveau champs par bouton + et création de variables

JavaScript

Discussions similaires

Partager

Partager