[resolu] [Javascript] Afficher un DIV onclick

Afficher un DIV onclick [resolu] [Javascript] - HTML/CSS - Programmation

Marsh Posté le 13-07-2004 à 00:47:53    

Voila je souhaite construire une page php permettant l'enregistrement d'un itineraire dans une base.
Par defaut la page offre un DIV qui permet a l'utilisateur d'ecrire le numero de la journee dans un input, puis une description dans un autre input.
Je souhaiterai qu'un cliquant sur un lien ou un bouton je sais pas, un autre DIV identique apparraisse, avec des identifiants differents pour les input, afin de permettre a l'utilisateur de rentrer des infos pour un autre jour. Et ce autant de fois qu'il le desire. Je me suis dit que javascript pourrait me faire ca mais je suis absolute beginneret je ne sais pas par ou commencer.
Comment puis-je faire?
Merci


Message édité par houam3012 le 14-07-2004 à 11:18:57

---------------
"Étudiez comme si vous deviez vivre toujours; vivez comme si vous deviez mourir demain"
Reply

Marsh Posté le 13-07-2004 à 00:47:53   

Reply

Marsh Posté le 13-07-2004 à 00:57:47    

Faut utiliser les méthodes DOM pour ajouter des éléments, des attributs... voir appendChild() document.createElement() setAttribute()
 
Sinon tu peux y aller plus direct en utilisant innerHTML pour ajouter d'un coup l'ensemble DIV + formulaire


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 13-07-2004 à 05:42:37    

Effectivement gm_superstar la solution se trouve bien dans l'utilisation des methodes DOM
Merci!  :jap:  
 
Voici mon code pour le moment:

Code :
  1. var numDay=2;
  3.   function addDay()
  4.   {
  5.    var theDay=document.getElementById('days');
  7.    var theName='day'+numDay;
  8.    var theNameDesc='dayDesc'+numDay;
  10.    var theDiv = document.createElement('DIV') ;
  11.        theDay.appendChild(theDiv) ;
  12.        theDiv.className = 'main';
  13.  
  14.        var theDivSpac = document.createElement('DIV') ;
  15.        theDiv.appendChild(theDivSpac) ;
  16.        theDivSpac.className = 'spacer';
  17.  
  18.        var theDivRow = document.createElement('DIV') ;
  19.        theDiv.appendChild(theDivRow) ;
  20.        theDivRow.className = 'row';
  21.  
  22.        var theSpanLabel = document.createElement('span') ;
  23.        theDivRow.appendChild(theSpanLabel) ;
  24.        theSpanLabel.appendChild(document.createTextNode('Number of the day :'));
  25.        theSpanLabel.className = 'label';
  26.  
  27.        var theSpanFormw = document.createElement('span') ;
  28.        theDivRow.appendChild(theSpanFormw) ;
  29.        theSpanFormw.className = 'formw';
  30.  
  31.        var InpNumDay = document.createElement('INPUT') ;
  32.        theSpanFormw.appendChild(InpNumDay) ;
  33.        InpNumDay.setAttribute('type','text') ;
  34.        InpNumDay.setAttribute('size','2') ;
  35.        InpNumDay.setAttribute('value',numDay);
  36.        InpNumDay.setAttribute('name',theName);
  37.        InpNumDay.setAttribute('id',theName);
  38.  
  39.        var theDivRow2 = document.createElement('DIV') ;
  40.        theDiv.appendChild(theDivRow2) ;
  41.        theDivRow2.className = 'row';
  42.  
  43.        var theSpanLabel2 = document.createElement('span') ;
  44.        theDivRow2.appendChild(theSpanLabel2) ;
  45.        theSpanLabel2.appendChild(document.createTextNode('Description of the day :'));
  46.        theSpanLabel2.className = 'label';
  47.  
  48.        var theSpanFormw2 = document.createElement('span') ;
  49.        theDivRow2.appendChild(theSpanFormw2) ;
  50.        theSpanFormw2.className = 'formw';
  51.  
  52.        var AreaDayDesc = document.createElement('TEXTAREA') ;
  53.        theSpanFormw2.appendChild(AreaDayDesc) ;
  54.        AreaDayDesc.setAttribute('cols','50') ;
  55.        AreaDayDesc.setAttribute('rows','8') ;
  56.        AreaDayDesc.setAttribute('name',theNameDesc);
  57.        AreaDayDesc.setAttribute('id',theNameDesc);
  58.  
  59.        var theDivSpac2 = document.createElement('DIV') ;
  60.        theDiv.appendChild(theDivSpac2) ;
  61.        theDivSpac2.className = 'spacer';
  63.        var Separator = document.createElement('HR') ;
  64.        theDiv.appendChild(Separator) ;
  65.        Separator.className = 'separator';
  66.  
  67.        numDay+=1;
  68.       }


 
Bon ca m'a pas l'air trop crado, si?
 
Maintenant que j'ai tous mes input et textarea j'aurai souhaite recuperer leur valeur respective, afin de les enregistrer dans ma base de donnees. J'ai vu qu'en utilisant:
 

Code :
  1. tabInput=document.getElementById('theBody').getElementByTagName('INPUT');
  2. tabArea=document.getElementById('theBody').getElementByTagName('TEXTAREA');


 
j'obtenais deux tableaux contenant les differentes valeurs de mes input et textarea de mon body. Mais comment puis-je faire le lien avec PHP pour lui dire de recuperer ses valeurs dans un tableau javascript?
 
voila, merci.


---------------
"Étudiez comme si vous deviez vivre toujours; vivez comme si vous deviez mourir demain"
Reply

Marsh Posté le 13-07-2004 à 10:01:41    

Je ne crois pas que tu peux faire le liens entre un tableau javascript et PHP ( mais je me trompe peu être ??? ) car javascript est executé coté client et php coté serveur.
 
Pour récupérer tes valeurs essai plutot :
Tu incrémente une variable $i  
dans ton formulaire tu nomme les champs "machin_$i"
ex: <input name="nom_$i" ..>
 
Dans la page ou est posté ton formulaire tu récupére tes variables dans une boucle (de 0 à $i) à l'aide de la fonction php eval()  
 
 
 
 
 
 
 
 
 

Reply

Marsh Posté le 13-07-2004 à 19:15:10    

houam3012 a écrit :

Bon ca m'a pas l'air trop crado, si?


Ca m'a l'air pas mal. Mais j'ajouterais le DIV conteneur à la fin. Ca devrait être plus rapide.

houam3012 a écrit :


Maintenant que j'ai tous mes input et textarea j'aurai souhaite recuperer leur valeur respective, afin de les enregistrer dans ma base de donnees. J'ai vu qu'en utilisant:
 

Code :
  1. tabInput=document.getElementById('theBody').getElementByTagName('INPUT');
  2. tabArea=document.getElementById('theBody').getElementByTagName('TEXTAREA');


 
j'obtenais deux tableaux contenant les differentes valeurs de mes input et textarea de mon body. Mais comment puis-je faire le lien avec PHP pour lui dire de recuperer ses valeurs dans un tableau javascript?
 
voila, merci.


Ben tu te compliques la vie pour rien... Soumets ton formulaire à un script PHP et c'est bon.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 14-07-2004 à 03:16:21    

Merci a tous les deux!!
 
Dis-moi gm_superstar, qu'entends-tu par mettre mon div conteneur a la fin?
 
Pour les tableaux, effectivement je me fais chier pour rien, d'autant qu'une fois que l'utilisateur a remplit les champs il n'a d'autre solution que de soumettre le formulaire. Reste a trouver le moyen de savoir combien d'input ont ete crees mais je pense qu'une variable php incrementee par le javascript devrait faire l'affaire!


---------------
"Étudiez comme si vous deviez vivre toujours; vivez comme si vous deviez mourir demain"
Reply

Marsh Posté le 14-07-2004 à 10:19:49    

houam3012 a écrit :

Dis-moi gm_superstar, qu'entends-tu par mettre mon div conteneur a la fin?


Ben mettre
 
theDay.appendChild(theDiv);
 
 
à la fin, une fois theDiv bien rempli


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 14-07-2004 à 11:18:01    

Ah yep!
 
Merci, une petite balise resolu pour mon sujet :)


---------------
"Étudiez comme si vous deviez vivre toujours; vivez comme si vous deviez mourir demain"
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed