ajouter dynamiquement un champ dans un formulaire

par **Flush** » 21 déc. 2005, 14:04

Bonjour,

Perso, j'utilise ce script pour ajouter des champs parcourir et aller chercher des images à envoyer dans ma db.

Par contre, est-il possible de stocker plusieurs chemin d'image dans un champ BLOB ?

Comment faire pour rendre chaque nouveau champ généré, unique au niveau de son nom ? Dans le genre :

Champ 1 = <input type="file" size="60" name="pic">
Champ 2 = <input type="file" size="60" name="pic02">
Champ 3 = <input type="file" size="60" name="pic03">
Etc...

Code : Tout sélectionner

	<table id="tab">
		<tr id="a_cloner">
			<td><input type="file" size="60" name="pic"></td>
		</tr>
	</table>

Merci

par **yannick1988** » 19 nov. 2005, 16:37

Bon bah ca marche nikel !

Je sais pas ce qu'il y avait mais tant pis.

Merci beaucoup !!!

par **yannick1988** » 19 nov. 2005, 16:30

Merci de ta réponse.

En effet il me manque des balise mais ma page fait environ 3400 lignes donc je ne voulais pas balancer toutes ces lignes de code dans le forum. J'ai séléctionné le plus important. Je vais essayer et je te dit si ca fonctionne.

Merci a toi.

par **rami** » 19 nov. 2005, 16:27

Ton document était mal structuré: pas de balise html ou body, des balises <tr> fermantes manquantes...
Bref, j'ai restructuré un peu et ca fonctionne chez moi (Firefox 1.5):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Essai</title>
<script type="text/javascript">
 function addField() {
   try {
      var div = document.createElement('div');
      var input = document.createElement('input');
      input.setAttribute('type','text');
      input.setAttribute('name','repons[]');
      input.setAttribute('value','');
      input.appendChild(document.createTextNode(''));
   
      div.appendChild(document.createTextNode('Reponse : '));
      div.appendChild(input);
   
      document.getElementById('reponses').appendChild(div);
   }
   catch(e) {
       alert(e);
    }
}
</script>
</head>
<body>

<form name="ajouts" action="e.php?p=ajout&ajout=2" method="POST">
	<input type="hidden" name="ajout" value="2">
	<table border="0" cellpadding="3" cellspacing="3">
		<tr>
			<td class="contenu">Question :</td>
			<td><input type="text" name="question"></td>
		</tr>
		<tr>
			<td class="contenu" colspan="2" align="center">
			    <a href="javascript:" onclick="addField()">Ajouter une réponse</a>
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center" class="contenu">
			  <div id="reponses">
			   <div>Reponse : <input type="text" name="repons[]" value="" /></div>
			  </div>
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input type="submit" value="Ajouter"></td>
		</tr>
	</table> 
</form>
</body>

par **yannick1988** » 19 nov. 2005, 15:04

oui oui :

Code : Tout sélectionner

<table border="0" cellpadding="3" cellspacing="3">
<form name="ajouts" action="index.php?p=ajout&ajout=2" method="POST">
<input type="hidden" name="ajout" value="2">
<script type="text/javascript">
 function addField() {
	try {
	   var div = document.createElement('div');
	   var input = document.createElement('input');
	   input.setAttribute('type','text');
	   input.setAttribute('name','repons[]');
	   input.setAttribute('value','');
	   input.appendChild(document.createTextNode(''));
	
           div.appendChild(document.createTextNode('Reponse : '));
	   div.appendChild(input);
	
           document.getElementById('reponses').appendChild(div);
           } catch(e) {
	    alert(e);
           }
}
</script> 
<tr>
<td class="contenu">
	Question :
</td>
<td>
	<input type="text" name="question">
</td>
</tr>
<tr>
<td class="contenu" colspan="2">
  <center>
    <a  href="javascript:" onclick="addField()">Ajouter une réponse</a>
  </center>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="contenu">
  <div id="reponses">
	<div>Reponse : <input type="text" name="repons[]" value="" /></div>
  </div> 
</td>
</tr>
<tr>
<td colspan="2" align="center">
  <input type="submit" value="Ajouter">
</td>
</tr>
</form>
</table>

Et pour la requete j'ai bien entendu adapté :

if(isset($_POST['repons']))
{
   foreach($_POST['repons'] as $reponse)
        echo 'Réponses : '.$reponse.'<br />';
}

Merci de ton aide !

par **rami** » 19 nov. 2005, 14:49

Montre nous le code de ta page où tu ajoutes des champs de saisie. Le nom du champ est bien du genre name="champ[]", c'est à dire avec des crochets ?

par **yannick1988** » 19 nov. 2005, 12:29

Dans la page définie dans la priopriétés action de la balise form, tu récupères les données ainsi (en supposant que la propriétés method="post"):
- la variable $_POST contient toutes les valeurs postées dans le formulaires
- pour récupérer une valeur particulière, tu le fais ainsi $_POST['nom_champ'], nom_champ étant le nom du champ du formulaire.
- tu as remarque que le champ langue de toute à l'heure avait comme nom name="langue[]", ce qui signfie que c'est un tableau, donc la variable $_POST['langue'] est elle-même un tableau. Donc pour récupérer toutes les langues saisies:
if(isset($_POST['langue']))
{
   foreach($_POST['langue'] as $langue)
      echo 'Langue choisie:' . $langue . '<br />';
}

Bonjour a tous.
J'ai le même probleme qu'isachat666 et j'ai appliqué vos codes.
Le probleme est le suivant :

Il ne m'affiche que le premier champs ce bout de code en php. Comment fait-on pour qu'il affiche tous les champs ?
Car si j'en rajoute 3, il ne m'affiche la donné que du 1er et non des 3 champs.

Merci.
@++

par **isachat666** » 20 oct. 2005, 16:36

Merci à tous pour votre aide,

malheureusement je ne suis pas encore très douée et je n'ai pas réussi à mettre en pratique vos explications. Je n'ai pas encore l'habitude de la programmation web. (j'ai quand même trouvé des scripts intéressants pour générer des formulaires dynamiquement en javascript)

Par contre je suis tenace et j'ai réussi à résoudre mon problème d'une autre manière simple et qui fonctionne, avec plusieurs boutons "submit" sur ma page. Un bouton submit ajoute les champs de données à renseigner (avec un bête echo ""), l'autre bouton submit enregistre les données saisies dans la base. La page est rechargée avec le contenu de la bdd, donc tout va bien.

Je n'ai plus qu'à utiliser le même stratagème pour mes autres éléments à renseigner.

à bientôt,

Isa

par **mere-teresa** » 19 oct. 2005, 14:53

Qu'est-ce que le DOM ?

http://fr.selfhtml.org/javascript/intro.htm
http://www.yoyodesign.org/doc/w3c/dom2/ ... ction.html(pour le schéma, descend un peu dans la page et regarde l'illustration)

par **rami** » 19 oct. 2005, 14:45

Dans la page définie dans la priopriétés action de la balise form, tu récupères les données ainsi (en supposant que la propriétés method="post"):
- la variable $_POST contient toutes les valeurs postées dans le formulaires
- pour récupérer une valeur particulière, tu le fais ainsi $_POST['nom_champ'], nom_champ étant le nom du champ du formulaire.
- tu as remarque que le champ langue de toute à l'heure avait comme nom name="langue[]", ce qui signfie que c'est un tableau, donc la variable $_POST['langue'] est elle-même un tableau. Donc pour récupérer toutes les langues saisies:

if(isset($_POST['langue']))
{
   foreach($_POST['langue'] as $langue)
      echo 'Langue choisie:' . $langue . '<br />';
}

par **isachat666** » 19 oct. 2005, 14:38

Qu'est-ce que le DOM ?

bon alors maintenant effectivement ça fonctionne, mes nouveaux champs sont ajoutés la question est comment je récupère les valeurs que l'utilisateur saisit dedans...............

peut-être que je finirais par y arriver......... avant noël............. de l'année prochaine

Isa

par **rami** » 19 oct. 2005, 14:15

Oui IE a une gestion du DOM différente de Mozilla, il suffit de remplacer:

Code : Tout sélectionner

//document.getElementById("tab").appendChild (clone); 
document.getElementById("tab").lastChild.appendChild (clone);

par **isachat666** » 19 oct. 2005, 14:05

Bonjour,

merci de ton aide,
malheureusement sous IE6 ce code n'a aucun effet...

Déjà si j'arrivais à le faire sans la mise en page en tableau ce serait déjà pas mal, au moins pour comprendre.

Isa

par **rami** » 19 oct. 2005, 12:10

Le problème avec la mise en page avec des tableaux, c'est que la structure de ta page est plus complexe. Il faut en gros que tu clones une ligne du tableau contenant le champ de saisie et que tu l'ajoutes à la suite de la ligne clonée. Je viens de faire ça en vitesse (ca marche sous Firefox):

Code : Tout sélectionner

<html>
<head>
<script type="text/javascript">
function ajouteLigne ()
{
clone = document.getElementById("a_cloner").cloneNode(true);
document.getElementById("tab").appendChild (clone);
}
</script>
</head>
<body>
<form action="" method="post">
<table id="tab">
	<tr id="a_cloner">
		<td><label>Langue :</label><input type="text" name="langue[]" /></td>
	</tr>
</table>
</form>
<a href="#" onclick="ajouteLigne();">Cliquez pour ajouter du texte"</a>
</body>
</html>

par **mere-teresa** » 19 oct. 2005, 11:42

En javascript tu agis du côté client : et tu peux ajouter (en le faisant cliquer sur un lien ou un bouton, par exemple) un élément HTML dans la page. Tu le crées et hop, tu l'incrustes !
Les seules difficultés sont de nommer bien les champs que tu ajoutes pour pouvoir les récupérer en PHP.

ajouter dynamiquement un champ dans un formulaire

Répondre

Étendre la vue Revue du sujet : ajouter dynamiquement un champ dans un formulaire