Ajout de champs dynamiquement dans un formulaire

Question

Bonjour, Etant débutant en JavaScript et dhtml, je sollicite un peu de votre aide pour créer une page. Je n’arrive pas a ajouter dynamiquement des champs dans un formulaire. Voici l’objectif que je me suis donné: - Réaliser une page avec3 champs input text cote à cote + un bouton "ajouter " button (c'est fait) - Lorsque l’on a rempli les 3 input text, on clique sur le bouton ajouter pour rajouter 3 champs en dessous + un bouton « ajouter » button. (c'est fait) - Le 1er bouton "ajouter" se transforme en un bouton "X" et lorsqu'on clique dessus ca efface la ligne. (capottage total ! je ne sais pas comment m'y prendre ) Pour ceux qui ont le FAI Free, c'est le meme concept que dans l'interface d'administration du routeur, lorsqu'on ajoute ou supprime une redirection de ports. Merci beaucoup pour vos aides précieuses. Cordialement Voici en attendant ce que j'ai deja réalisé Document sans nom

evenkil · Answer

J'ai avancé entre temps. Il y a juste le probleme du champs qui ne s'efface pas, je pense m'être trompé dans la syntaxe du removeChild. Document sans nom

PetoleTeam · Answer

B
onsoir...
et avec un truc du genre...






//--------------------



function supr_champ(i){



  var Parent;





  var Obj = 
document.getElementById
(
'input_'+i)

;
  if( Obj)        
    Parent = Obj.parentNode;        
    if( Parent)
      Parent.removeChild( Obj);
}




;0)

evenkil · Answer

Effectivement ca fonctionne mais le soucis c'est que ca supprime tous les champs en dessous et le bouton pour ajouter les champs.
Par exemple, si j'ai 5 ligne, je veux supprimer la ligne 3, ca va également me supprimer la ligne 4 et 5.
Merci pour ton aide.

evenkil · Answer

Bon beh j'ai un peu avance, reste le problème de supression. Je post ou j'en suis. Document sans nom

PetoleTeam · Answer

B
onjour...
Ton problème n'est pas exactement ce que je pensais, il est vrai que je n'avais pas lu le code en plein.

Quoiqu'il en soit il semble préférable d'aborder le problème avec 
O_Table.insertRow()



O_Table.



insertCell()

pour l'insertion d'une nouvelle ligne et


O_Table.



deleteRow()


pour la destruction

;0)

sananas · Answer

Comme je cherchais à faire un peu la même chose, je me suis interessé à ton code et je crois que j'ai trouvé ce qui manque dans ta fonction supprimer pour éviter de tous les effacer...

essai ça :


function supr_champ(i)
{
  var Parent;
  var Obj = document.getElementById ( 'input_'+i) ;
  
 if( Obj)      
    Parent = Obj.parentNode;      
    if( Parent)
     Obj.removeChild(Obj.childNodes[0]);

}




 pour moi ça marche...

Gamerz28111983 · Answer

c etait juste ca le probleme

maelob · Answer

Enfin tu aurais pu donner la solution aussi qui est d'enlever les + lol.

maelob · Answer

Euuuuuuuuuh en faite je suis pas sur de ce que tu viens de dire car pour moi ce qu'il a écris c'est bon

acquatella · Answer

Bonjour,
Peut être est ce un peu tard pour entretenir le fil de ce post...

Mais voilà ma question :

Un fois le formulaire envoyé avec autant de champs ajoutés que nécessaire.
Imaginons que nous concervions les informations (nom des fichiers) dans un table.
Et que nous souhaitons, par la suite, modifier certains fichiers (nom de fichier).

Comment faire pour que automatiquement, et suivant le nombre valider au départ, le même nombre de champs apparaissent ?
Puisque au départ il n'y a aucun champs visible ?
Avec bien sur la case "effacer" ?

Merci de vos réponses.
Acquatella.

maelob · Answer

En gros ce que tu veux dire c'est que tu utiliserais la même page pour la creation (de tes noms de fichier) et la modification(de ces noms de fichier)?

et je pense qu'il aurait été plus judicieux de poster un nouveau sujet.

acquatella · Answer

Bonjour maelob,
Merci de ta réponse.

Je veux dire comment faire apparaitre (automatiquement !) des "div" suivant des infos venant d'une table.

Si dans ma table il y a déjà :

Fichier1.jpg
Fichier3.jpg
Fichier3.jpg
etc...

Faire apparaitre autant FILES "mesfichier[]" qu'il y en a dans la table (avec leurs boutons "effacer") dès le début ?

Je pense que j'utiliserai un fichier pour l'ajout et un autre pour la modification... Je pense que ce serait mieux.

Penses tu vraiment qu'il faut un nouveau sujet ?
C'est bien de ce (même) code que l'on parle ! Non ?




Acquatella.

maelob · Answer

Maintenant qu'on a commencé la discution ici on va continuer.

Pour les faire apparaitre il faut utiliser une boucle (for  par exemple), tu vas utiliser quel language pour ça?

maelob · Answer

après quelques secondes de reflexion je pense que tu veux faire ça en javascript ce qui serait logique

ta boucle aurait cette forme 

for (i=0; i<mesfichiers.legnth; i++) {
      element.innerHTML=
mesfichiers[i]
;
}

acquatella · Answer

J'utilise PHP.
Je pense que je vais pouvoir créer ces boucles en PHP...

Ce qui me pose problème c'est plutot le Javascript.

Je ne sais pas comment m'expliquer... enfin je vais essayer :

Une nouvelle info : 
J'ai modifié le script pour ajouter un champ : "Légende" (et peut être un nouveau  : "rang" pour les classer lors de l'affichage)
Je me sert de ce script pour ajouter des photos de concert... à un concert.
Et le nouveau champ ! "Légende" me permet d'ajouter une légende à ces photos.

Est il possible avec ce code Javascript d'afficher, dès l'ouverture de la page, certains "DIV" (suivant le nombre qu'il y aura dans ma table) directement, sans devoir passer par le bouton "ajouter un fichier" ?

Si oui comment? 
Merci de ton aide.




Acquatella.

maelob · Answer

Ben justement avec php.

Tu recupere tes images soit dans ta base de données soit dans le dossier ou tu a placé les images et avec une boucle tu fais l'affichage.

Je ne vois pas l'utilité du javascript ici.

acquatella · Answer

Excuse moi je me suis encore mal exprimé.

Je vais repartir depuis le début.

J'utilise ce Javascript pour ajouter des infos dans ma table (Photo + Légende de concert)
Ce script est super car il me permet d'ajouter autant (de pair) de champ que j'en ai besoin. 
(Certains concerts peuvent avoir 15 photos, 10 photos... 5 etc... Je ne le sais pas dès le départ).

Ensuite je prend tout à l'aide de PHP pour l'incérer dans ma table... Tout cela est ok pour moi.

Mais j'aimerai utiliser ce même javascript pour modifier des photos et/ou légende de concert que j'ai déjà enregistrés dans ma table.
Car la modification peut porter sur la "modification" de légende (Orthographe par ex.), le remplacement de photo (photo mal exposée par ex.)... etc
Mais surtout l'ajout d'un nouvelle photo (+ sa légende) et aussi la suppresion d'un ancienne photo.

C'est pourquoi je vais utiliser de nouveau ce script (modifié) pour la modification.

Mais ce que je ne sais pas faire c'est dans la page modification comment faire apparaitre, de la même façon qu'apparaissent les champs (une fois que l'on clique sur le bouton "ajouter un fichier"), dés le début.
Avec bien sur le bouton "effacer" au cas ou ?

J'espère avoir été plus clair 

Acquatella.

maelob · Answer

Oui c'est clair cette fois :-)


Mais je reste sur la même position que sur mon ancien message. A la
creation de ton concert et des ses photos tu dois bien enregistrer les
photos ainsi que leurs légendes quelques part? (une base de données par
exemple avec insert into)


Donc pour pouvoir les afficher il faut que tu ailles chercher les
photos dans ta base (avec une requete select) et après tu n'a plus qu'a
réafficher ton formulaire avec une boucle (affiche la legende dans un
input de type text pour pouvoir modifier) et lors du click sur le
bouton "valider" tu pourra faire une requete update pour editer les légende modifiée et une requete delete pour les photos effacées.


Le javascript en lui même ne pourra pas supprimer des photos (ainsi que
sa légende) ou chercher tes photos car javascript est executé coté
client et ne communique donc pas avec le seveur (sauf avec les xmlhttp
mais bon on va pas aller plus loin ) 


En gros le javascript te permet juste d'ajouter des champs dans ton
formulaire pas plus (ou de verifier qu'une légende a été bien saisie).

En esperant avoir bien compris ton problème.

acquatella · Answer

Merci de ta réponse.
Effectivement je crois avoir compris l'utillité de ce javascript.
Et je pense que je vais utiliser une autre méthode pour modifier mes photos (et légende) déjà enregistrés.

Merci de ton aide.

bonne journée



Acquatella.

acquatella · Answer

Juste une dernière question :
J'ai ajouté le champ "Legende" en plus du champ "mesfichier"

Donc je l'ai défini avec dans un premier temps : 

var champ  = document.createElement('input');

puis pour lui donner des options :

   champ.name   = 'legende[]';
   champ.type   = 'text';
   champ.size   = '35';
   champ.maxlength = '45';

Mais le champ.maxlength ne semble pas fonctionner ?
C'est pour qu'il n'y pas trop de caractères.
Le champ "size" quant à lui fonctionne bien.

Ai-je oublié quleque chose ?




Acquatella.

Ajout de champs dynamiquement dans un formulaire

36 réponses

Votre réponse

Discussions similaires