Ajouter dymaniquement des elements a un formulaire

19 mai 2011, 07:42

bonjour a toute l’équipe et au visiteur de phpfrance.

J'ai le formulaire suivant :
nom produit ..........................
description produit : .......................
--------------------------------------recompense ------------------------
date la recompense :........................
Lieu de la recompense :.....................
titre de la recompense :...............
---------------------------------fin bloc recompnse------------------------------
[button]ajouter une nouvelle recompense[button]
[button]soumettre le produit[button]

Mon probleme est le suivant :
j'aimerais qu' a chaque qu'on clique sur le bouton "ajouter une nouvelle" que le bloc "recompense" se répète autant de fois que possible les uns a la suite des autres.
le clic sur le bouton "soumettre le produit" doit me permettre de recuperer tout les infornations sur le produit ie "nom produit", "description produit" et toutes les recompense de ce produit.
merci

----------------------------------code du formulaire

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form action="" method="get">
  <p>
    <label for="textfield">produit</label>
    <input type="text" name="textfield" id="textfield" /><br />
    description
    <textarea name="description" cols="" rows=""></textarea>
  </p>
  <fieldset>
    <legend>Recompense</legend>
    <p>
      <label for="textfield2">date la recompense</label>
      <input type="text" name="textfield2" id="textfield2" />
    </p>
    <p>
      <label for="lieu">Lieu de la recompense</label>
      <input type="text" name="lieu" id="lieu" />
    </p>
     <label for="lieu">titre de la recompense</label>
    <input name="titre de la compense" type="text" /><br />
    <input name="" type="button"  value="ajouter une nouvelle recompense"/>
  </fieldset>
  <input name="" type="submit" value="soumettre le produit" />
</form>

19 mai 2011, 14:16

salut,

il va te falloir faire cela en javascript.

sur le principe c'est simple au clic tu ajoute tous les champs en dessous de ceux existants.
Pour la traitement dynamique, il faut les nommer avec la notation tableau (name="truc[]" par exemple).

et coté validation tu obtient des tableaux pour tous les champs, tu peux les traiter facilement avec foreach.

@+

21 mai 2011, 22:08

salut moogli j'ai justement le même problème peux m'aider au niveau du code javascript
Merci

21 mai 2011, 22:45

Un exemple avec un champ de téléchargement :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/JavaScript">
<!--

function addDonnee(idChamp) {
   try {
      var conteneur = document.getElementById(idChamp);
	  
      var ligne = document.createElement('p');
	  	 
	  var fichier = document.createElement('input');
	  fichier.setAttribute('type','file');
      fichier.setAttribute('name','photo[]');
      fichier.setAttribute('size','89');

	  ligne.appendChild(fichier);
	  conteneur.appendChild(ligne);
   }
   catch(e) {
       alert(e);
    }
}

-->
</script>


</head>

<body>

<div>

<form enctype = "multipart/form-data" action = "#" method = "post">

	<div><p><input type = "file" name = "photo[]"  size = "89" /></p></div>
	
	<div id = "champs_sup"></div>	
		
	<p onclick="addDonnee('champs_sup')" style="text-decoration:underline; cursor:pointer">Ajouter un nouveau champ de téléchargement</p>

</form>

</div>

</body>

22 mai 2011, 09:22

Salut, une autre façon est de créer plusieurs lignes de formulaire d'avance et de les masquer en css.
Le JS sera donc hyper simple puisqu'il n'a qu'a afficher la ligne suivante.
Tu peux voir un exemple sur cette page : lien

23 mai 2011, 19:42

Ben oui mais ça te limite les possibilités puisqu'il faut que tu les écrive par avance.
Et puis si tu regarde mon exemple c'est quand même pas vraiment compliqué même en écrivant tout avec le DOM.

24 mai 2011, 15:40

Salut Ab et merci pour ta reponnse. Je n'ai pas encore essaie ton code.
Marche-t-il sur tous les navigateurs?. Récemment j'ai fait un truc avec les DOM il buggait sur sur IE

24 mai 2011, 18:43

T'a plus qu'à tester. Cela fonctionne même sur IE6

Ajouter dymaniquement des elements a un formulaire

Qui est en ligne