ajouter dynamiquement un champ dans un formulaire

28 sept. 2005, 17:21

Bonjour,

Je suis nouvelle sur le forum et je débute en PHP (à la base je suis développeur Delphi).

Mon pb est le suivant, j'ai un formulaire qui doit permettre à des utilisateurs de saisir des données répétitives (par exemple: langues parlées)

au lieu d'avoir:
langue1
langue2
langue3
etc.

je ne voudrais avoir qu'un seul objet de formulaire pour saisir la langue, et un lien (ou bouton ou autre...) "ajouter une langue" qui lors du clic ajouterait un objet de formulaire. Et de la même manière, un lien "supprimer une langue" après chaque langue ajoutée.

Déjà est-ce que cela est faisable en php et si oui comment?

merci beaucoup.

Isa

28 sept. 2005, 17:27

Le but, serait en fait de mettre un lien sur le bouton qui recharge la page en transmettant le nombre de langues souhaitées...

Donc un lien avec page.php?nb_lang=2, et lors du chargement, tu boucles 2 fois pour faire apparaitre 2 fois un champs langue... Et le bouton, tu l'affiches avec nb_lang=3... (inversement pour supprimer)...

Mais il faudra penser aussi à conserver les choix déjà fait (variables sessions peut-être) par l'utilisateur, afin qu'il n'ai pas à saisir à chaque fois toutes les langues...

28 sept. 2005, 17:30

Je crois surtout qu'il va falloir utiliser du JavaScript, mais je nesuis pas certain, de la manière dont tu en parles, on est en pleine programmation objet et je ne suis pas certain de bien saisir ce que tu demandes exactement.

Mais bon, je ne suis pas le plus qualifié en POO.

28 sept. 2005, 17:44

Bonjour,

Merci de vos réponses.

heddicmi ton explication se rapproche de ce que je voudrais faire mais je n'ai vraiment pas encore le niveau pour la mettre en pratique.

Isa
(j'avais oublié de m'identifier)

17 oct. 2005, 16:38

Voilà, je reviens sur ce problème et je me rends compte que mon explication n'était pas très claire.

Ce que je veux faire exactement, ressemble beaucoup à ça:
PhpMyAdmin permet d'ajouter des champs dynamiquement à une table, on renseigne seulement le nombre de champs à ajouter et quand on valide, la page contient x zones de saisie.

Je voudrais faire la même chose pour mes données de type "diplôme, expériences, langues parlées, etc..."

Je vais essayer la piste donnée par heddicmi je reviendrais très vite vous voir si je n'y arrive pas.

à bientôt,

Isa

17 oct. 2005, 19:08

Essaie avec ceci:

Code : Tout sélectionner

<script type="text/javascript">
function addField() {
try {
	var div = document.createElement('div');
	var input = document.createElement('input');

	input.setAttribute('type','text');
	input.setAttribute('name','language[]');
	input.setAttribute('value','');
	input.appendChild(document.createTextNode(''));

	div.appendChild(document.createTextNode('Langage: '));
	div.appendChild(input);
	document.getElementById('languages').appendChild(div);
} catch(e) {
	alert(e);
}
}
</script>


<form action="langage.php">
<div id="languages">
	<div>Langage: <input type="text" name="language[]" value="" /></div>
</div>
<input type="button" onclick="addField()" value="Ajouter un champ" />
</form>

18 oct. 2005, 10:43

Modération : on te propose une solution (qui pourrait te convenir) en js, donc je déplace dans le forum "Javascript" afin que tous les forts en js puissent te répondre.

19 oct. 2005, 10:25

Heu ?
J'ai essayé cette solution et tout ce que j'obtiens c'est un message:
[Object Error]

Vous pensez que c'est mieux de faire ça en js qu'en PHP ?

merci

Isa

19 oct. 2005, 10:33

je ne voudrais avoir qu'un seul objet de formulaire pour saisir la langue "ajouter une langue" qui lors du clic ajouterait un objet de formulaire.

Lors du clic induit :
* soit un javascript
* soit du XHR (XmlHttpRequest de son joli nom)

19 oct. 2005, 10:52

Je ne vois pas l'intérêt d'utiliser du XHR car il n'y aucune demande d'informations, mais simplement l'ajout d'un champ de formulaire. Il faut faire du DOM comme te l'a proposé Xenon_54.

J'ai déjà réaliser une chose du genre, et si mes souvenirs sont bons, je clonais une ligne de saisie. Après tout dépend de la structure de ta page. Pour la mise en fomre, tu utilises des tableaux?

19 oct. 2005, 11:31

Bonjour
XHR ou DOM c'est du chinois pour moi.................

Effectivement pour la mise en forme de ma page j'utilise des tableaux.

Sinon tout ce que je voudrais faire c'est récupérer mes données de la table et permettre à l'utilisateur d'en ajouter autant qu'il le souhaite (d'où l'idée de création dynamique de champs de formulaire) et bien sûr enregistrer les nouvelles données saisies dans la base ainsi que les modifs sur les autres données affichées.

Pour l'instant je suis bloquée sur ce problème d'ajout dynamique de champs mais je finirais bien par y arriver (enfin j'espère...)

Isa

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.

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>

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

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

ajouter dynamiquement un champ dans un formulaire

Qui est en ligne