Ajout de champs dynamiquement dans un formulaire

Signaler
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014
-
 kurapikt -
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é


<html>
<head>
<title>Document sans nom</title>
<script>
function add_field() {
  var d = document.getElementById('cible');
  var n = d.childNodes.length;
  var p = document.createElement("p");
  d.appendChild(p);
  var input = document.createElement("input");
  input.type = 'text';
  input.name = 'periodeIn'+n;
  var input2 = document.createElement("input");
  input2.type = 'text';
  input2.name = 'periodeOut'+n;
  var input3 = document.createElement("input");
  input3.type = 'text';
  input3.name = 'prix'+n;
  p.appendChild(input);
  p.appendChild(input2);
  p.appendChild(input3);
  document.getElementById('cible').style.visibility = 'visible';

}
</script>
</head>

<form action="Untitled-1.html" method="post">


</form>

</html>

36 réponses

Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

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.

<html>
<head>
<title>Document sans nom</title>
<script language="javascript">
<!--
function create_champ(i)
{
var i2 = i + 1;
document.getElementById('input_'+i).innerHTML = '
<tr><td>Periode '+i+'</td><td></td><td></td><td></td><td></td></tr>
';
document.getElementById('input_'+i).innerHTML += (i <= 100) ? '' : '';
}

function supr_champ(i)
{
document.getElementById('input_'+i).removeChild;
}
-->
</script>
</head>

<form name="toto">
    ----

        P&eacute;riode |
        Date de d&eacute;but |
        Date de fin |
        Prix |
        Effacer |
   
    ----

        P&eacute;riode 1,
        ,
        ,
        ,
        -,
   
   

   
    ----

        ,
   

</form>

</html>
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
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)
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

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.
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

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

<html>
<head>
<title>Document sans nom</title>
<script language="javascript">
<!--
function create_champ(i){
var i2 = i + 1;
    document.getElementById('input_'+i).innerHTML = '
<tr><td>P&eacute;riode.'+i+'</td><td></td><td></td><td></td><td></td></tr>
';
    document.getElementById('input_'+i).innerHTML += (i <= 100) ? '' : '';
    document.getElementById('in_'+i).value = document.getElementById('out_'+(i-1)).value;
    document.getElementById('nombre').value = i;
}

function supr_champ(i){
  var Parent;
  var Obj = document.getElementById ( 'input_'+i) ;
  if( Obj)      
    Parent = Obj.parentNode;      
    if( Parent)
      Parent.removeChild( Obj);
}

function transpo(i) {
    document.getElementById('in_'+i).value = document.getElementById('out_'+(i-1)).value;
}
-->
</script>
</head>

<form name="palala">
    ----

        P&eacute;riode |
        Date de d&eacute;but |
        Date de fin |
        Prix |
        Effacer |
   
    ----

        P&eacute;riode.1,
        ,
        ,
        ,
        -,
   
   

    ----

        ,
   

Nombre de champs :
</form>

</html>
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
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)
Messages postés
6
Date d'inscription
mardi 25 octobre 2005
Statut
Membre
Dernière intervention
27 février 2008

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...
Messages postés
7
Date d'inscription
vendredi 17 mars 2006
Statut
Membre
Dernière intervention
6 août 2009

c etait juste ca le probleme
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
Enfin tu aurais pu donner la solution aussi qui est d'enlever les + lol.
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
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
Messages postés
8
Date d'inscription
mercredi 30 janvier 2008
Statut
Membre
Dernière intervention
19 février 2008

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.
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
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.
Messages postés
8
Date d'inscription
mercredi 30 janvier 2008
Statut
Membre
Dernière intervention
19 février 2008

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.
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
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?
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
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]
;
}
Messages postés
8
Date d'inscription
mercredi 30 janvier 2008
Statut
Membre
Dernière intervention
19 février 2008

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.
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
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.
Messages postés
8
Date d'inscription
mercredi 30 janvier 2008
Statut
Membre
Dernière intervention
19 février 2008

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.
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
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.
Messages postés
8
Date d'inscription
mercredi 30 janvier 2008
Statut
Membre
Dernière intervention
19 février 2008

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.
Messages postés
8
Date d'inscription
mercredi 30 janvier 2008
Statut
Membre
Dernière intervention
19 février 2008

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.
1 2