Bonjour a tous.
Je vais essayé de vous expliquer mon problème. ^^
Alors voila, je veux avoir une page formulaire, avec des champs dépends les uns des autres.
Le principe est le remplissage d'une fiche de cours.
la page se compose en 3 parties:
1. Chapitre (avec un bouton + et - pour ajouter/enlever autant de chapitres que nécessaire)
2.Sous-Chapitre ( (avec un bouton + et - pour ajouter/enlever autant de Sous-chapitres que nécessaire (2. étant lié à 1))
3.Objectif du Chapitre (avec un textearea (3 dépends aussi de 1.)
Voila pour l'objectif a atteindre :)
j'ai réussi à créer une fonction pour générer le nombre de Chapitres/sous-chapitres voulu. (voici le code =>)
var c,c1, ch ;
function plus(){
c=document.getElementById('butaddmoins');
c1=c.getElementsByTagName('input');
ch=document.createElement('input');
ch.setAttribute('type','text');
ch.setAttribute('name','ch'+c1.length);
ch.setAttribute('value', 'Chapitre'+c1.length);
ch.setAttribute('style','margin-top:10px;');
c.appendChild(ch);
}
function moins(){
if(c1.length>0){c.removeChild(c1[c1.length-1])}
if(c1.length==0){document.getElementById('sup').style.display='none'};
}
de ce coté la, ca va
ce que je veux, c'est que au debut, il y'a sur la page Chapitre 0 |Sous-Chapitre 0 | Objectif chapitre 0
avec les boutons +/- et que lorsqu'on clique sur le bouton + du chapitre, on arrive a => Chapitre 1 | Sous-chapitre 1 |Objectifs chapitre 1
et ainsi de suite selon le nombre de Chapitre.
J'ai tenté avec CloneNode, mais ca ne m'as pas trop réussi...
J'ai également tenté de rajouter des variables dans la fonction plus() afin de tout générer.
J'arrive à faire les textearea, mais la fonction +/- pour les sous-chapitre, je n'arrive pas a la lancer... =(
ca me donne ca pour le script =>
var c,c1,ch,d,d1,dh,a,a1,ah;
function plus(){
c=document.getElementById('butaddmoins');
c1=c.getElementsByTagName('input');
ch=document.createElement('input');
d=document.getElementById('plaf');
d1=d.getElementsByTagName('textarea');
dh=document.createElement('textarea');
a=document.getElementById('B');
a1=a.getElementsByTagName('input');
ah=document.createElemen('input');
ch.setAttribute('type','text');
ch.setAttribute('name','ch'+c1.length);
ch.setAttribute('value', 'Chapitre'+c1.length);
ch.setAttribute('style','margin-top:10px;');
dh.setAttribute('name','dh'+d1.length);
dh.setAttribute('value', 'Objectif'+d1.length);
dh.setAttribute('rows','6');
dh.setAttribute('cols','28');
ah.setAttribute('type','text');
ah.setAttribute('name','ah'+a1.length);
ah.setAttribute('value', 'Sous_Chapitre'+a1.length);
c.appendChild(ch);
d.appendChild(dh);
a.appendChild(ah);
}
et ca pour le code html =>
<div>
<div id="menu">
<div class="element_menu">
<h3>Plan du Cours</h3>
<div id="butaddmoins" style="margin-left:0px;width:180px"></div>
<p>
<input type="button" value="+" onclick="plus()" title="+" />
<input type="button" style="display:none" id="sup" value="-" onclick="moins()" title="-"/>
</p>
</div>
</div>
<div id="plaf">
<div style="display:none" id="obj1">
<p>
Objectifs Chapitre : <br /><br />
<textarea name="Objectif" rows="6" cols="28">Veuillez rentrer les Objectifs du cours.</textarea>
</p>
</div>
</div>
<div id="plif">
<div style="display:none" id="corps3">
Détails Chapitre : <br /><br />
<form id="frm1" action="">
<div id="B" style="margin-left:0px;width:200px"></div>
<p>
<input type="button" style="display:none" id="sup2" value="+" onclick="plus1()" title="+" />
<input type="button" style="display:none" id="sup1" value="-" onclick="moins1()" title="-" />
</p>
</form>
</div>
</div>
</div>
Voila je crois que j'ai tout dis... ^^
Donc, si quelqu'un pouvait m'aider à résoudre mon problème (peut importe la méthode) ce serait magique =)
N'hésitez pas à poser des questions, si je n'ai pas été clair.
Merci d'avance :)