PHP

[php] Ajouter un champs dans un formulaire

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [php] Ajouter un champs dans un formulaire

T0ots

Bonjour,

J'aurai voulu savoir comment faire pour que l'utilisateur de mon site puisse rajouter un champs dans un formulaire si cela est nécessaire.
En effet, je lui propose par défaut 3 champs à remplir (il s'agit des champs ingrédients pour un site de cuisine). Mais comment faire pour qu'il puisse rajouter un champs s'il a besoin d'un champs supplémentaire?
J'ai rapidement trouvé des scripts en javascript qui permettent de le faire, mais rien concernant le php et mysql.
Je suis en phase d'apprentissage et je n'ai pas envie de faire du copier/coller sans comprendre ce que je fais et je ne connais rien au javascript.

Merci d'avance!

Message édité par T0ots le 11-09-2008 à 15:46:37

Publicité

Nasga

Il va falloir que tu passe ta variable en tableau

Code :

<label>champ1</label><input name="var[]" value="" />
<label>champ2</label><input name="var[]" value="" />
<label>champ3</label><input name="var[]" value="" />

Ainsi un tu récupérera un tableau en $_GET ou $_POST (selon la méthode du formulaire).

Pour les ajouter dynamiquement, il n'y a que le javascript...
Par exemple (vite fait et non testé) :

Code :

<label>champ1</label><input name="var[]" value="" />
<div id="addInput"></div>
<input type="button" name="Ajouter un champ" onclick="document.getElementById('addInput').innerHTML='<label>champ2</label><input name=\"var[]\" value=\"\" />';" />

Va faire un tour sur w3school section javascript tu trouvera ton bonheur et tu pourras apprendre par la même occasion

Message cité 1 fois

bul3

bonjour,

si tu veux faire ça coté serveur,
il faut que le formulaire soit retourné au php,
( au click de l'utilisateur sur "ajouter un champ" )
qui "recréera" le formulaire en y ajoutant ce
nouveau champ.

@+

---------------
[mon site] [m'écrire]

Nasga

ça fait 10 ans qu'on a la technologie pour le faire coté utilisateur, ta solution est correcte bul3, mais bon... sans être pro web 2.0, on peux quand même utiliser du simple javascript...

T0ots

Merci pour vos réponses.
Je vais tester la méthode php et si je ne m'en sors pas, je tenterai le javascript. Mais apprendre le javascript alors que je suis déjà en pleine nébuleuse phpienne... bref on verra ça plus tard

cimourdain

J'ai demandé exactement la même chose hier, ici:
http://forum.hardware.fr/hfr/Progr [...] 7877_1.htm

et j'ai obtenu des réponses très différentes ! J'avais aussi eu l'idée du document.write mais on m'a dit que c'était pas du tout une bonne idée, qu'il valait mieux prévoir en dur tous les champs (un nombre suffisamment grand pour toi donc) et des les afficher ou pas en jouant avec la visibilité du div qui les contient.

Ma fonction javascript de test faisait un document.write('toto'); mais le problème c'est que j'obtenais une nouvelle page toute blanche avec écrite juste toto dedans. Alors que moi je voulait qu'elle écrive un div dans la page existante !

Message édité par cimourdain le 12-09-2008 à 15:41:10

cimourdain

Nasga a écrit :

Il va falloir que tu passe ta variable en tableau

Code :

<label>champ1</label><input name="var[]" value="" />
<label>champ2</label><input name="var[]" value="" />
<label>champ3</label><input name="var[]" value="" />

Ainsi un tu récupérera un tableau en $_GET ou $_POST (selon la méthode du formulaire).

Pour les ajouter dynamiquement, il n'y a que le javascript...
Par exemple (vite fait et non testé) :

Code :

<label>champ1</label><input name="var[]" value="" />
<div id="addInput"></div>
<input type="button" name="Ajouter un champ" onclick="document.getElementById('addInput').innerHTML='<label>champ2</label><input name=\"var[]\" value=\"\" />';" />

Va faire un tour sur w3school section javascript tu trouvera ton bonheur et tu pourras apprendre par la même occasion

la version correcte selon moi (le label en moins):

Code :

<html>
<head>
</head>
<body>
<div id="addInput"></div>
<input type="button" value="Ajouter un champ" onclick="javascript:document.getElementById('addInput').innerHTML='<input type="text" name="var[]" value="" />'; return false;" />
</body>
</html>

Par contre quand je clique sur le bouton ça m'ajoute bien un champ <input> mais si j'appuie plusieurs fois ensuite ça ne rajoute pas d'autres champs.

Comment faire pour que ça rajoute un champ à chaque clic ?

Message édité par cimourdain le 12-09-2008 à 19:21:09

Profil supprimé

normal : t'écrases la valeur de ta div à chaque fois!

Code :

<!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>Page</title>
 
<script type="text/javascript">
function add() {
    var input = addInput.innerHTML
    addInput.innerHTML = input + '<input type="text" name="name[]" /><br />\n';
}
</script>
</head>
<body>
 
<div id="addInput"></div>
 
<input type="button" value="Ajouter un champ" onClick="add();" />
 
</body>
</html>

cimourdain

merci bien !

milootooloo

Chouchou, pas besoin de rajouter des elements de formulaires, met un textarea pour les ingrédients ^^

Publicité

Profil supprimé

:heink:

maheho

Bonjour à tous!

Mon premier post heureux de venir ici!

Ce sujet m'a beaucoup aidé dans la réalisation de mon projet. le script de luc@as fonctionne très bien.
Mais il à juste une petite limite et je déterre ce sujet pour voir si quelqu'un peut y apporter une amélioration.

Lorsque un ajoute un champ: on le remplit!
puis si on ajoute un second champ alors tous le contenu écrit dans le premier champs disparaît!

l'utilisateur est donc obliger de savoir à l'avance le nombre de champs qu'il souhaite remplir pour les ajouter dés le départ, pas très pratique..

Vous avez des idées pour y remédier?

---------------
Maël

bistouille

Sers toi du dom, innerHTML n'est pas adapté pour faire ça.

exemple :

Code :

function addInput(nodeId)
{
var par = document. . ('p');
var input = document. . ('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'name[]');
par. . (input);
document.getElementById(nodeId). . (par);
}

Et donc :

Code :

<div id="addInput"></div>
<input type="button" value="Ajouter un champ" onClick="addInput('addInput');" />

Hum, le code bug entre balises...
Et sans balises aussi wtf :heink:

Code :

function addInput(nodeId)
{
var par = document.create Element('p');
var input = document.create Element('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'name[]');
par.append Child(input);
document.getElementById(nodeId).append Child(par);
}

Faut virer les espaces dans create Element et append Child

Message édité par bistouille le 25-05-2013 à 16:42:30

sedwesk

Salut !

Concernant ton code, j'ai une petit question, je voudrais à la place lui donner le nom d'une variable i par exemple comme ceci :

Petit soucis, ça ne marche pas vraiment, un conseil serait le bienvenue !

Merci D'avance

var i=1;
function add() {
var input = addInput.innerHTML
addInput.innerHTML = input + '<input type="text" name="'.i.'" /><br />\n';
i++;
}

FORUM HardWare.fr

Programmation

PHP

[php] Ajouter un champs dans un formulaire

Sujets relatifs
fsockopen avec soumission de formulaire	Interdire le rechargement (F5) d'une page/formulaire
[Résolu] Style Css Formulaire IE6	[PHP] Formulaire ...
[VBA / ACCESS] ajouter à une liste multi-valuée	ajouter le menu pause/lecture sur une vidéo
Refresh le graphique d'un sous formulaire Access	[Javascrpit] Afficher/Cacher un formulaire
___	[ASP] [formulaire] comment ajouter/supprimer des champs
Plus de sujets relatifs à : [php] Ajouter un champs dans un formulaire

Page générée en 0.081 secondes