lornea
Messages postés12Date d'inscriptionmercredi 8 juillet 2009StatutMembreDernière intervention20 juillet 2009
-
8 juil. 2009 à 16:12
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 2015
-
20 juil. 2009 à 12:30
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');
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');
<textarea name="Objectif" rows="6" cols="28">Veuillez rentrer les Objectifs du cours.</textarea>
Détails Chapitre :
<form id="frm1" action="">
</form>
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.
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 8 juil. 2009 à 16:18
Bonjour,
1° éviter ( à mon avis ) les setAttribute
ça ne fonctionne pas pareil avec tous les naviagateurs
et ( pour moi ) ch.name='ch'+c1.length;
c'est bien plus simple que : ch.setAttribute('name','ch'+c1.length);
2° du coup, même pas vérifié ton script
mais createElement + appendChild, ça baigne
[uplo exemple ici ?]
si tu n'y parviens pas : dis le.
lornea
Messages postés12Date d'inscriptionmercredi 8 juillet 2009StatutMembreDernière intervention20 juillet 2009 8 juil. 2009 à 16:25
Pour les setAttribute, je savais pas qu'on pouvais raccourcir comme ca ^^"
donc ca marche pour tout les attributs ?
ch.type=
ch.name=
ch.value=
ch.style=
Sinon, si j'ai posté, c'est parce que mon script fonctionne pas ^^"
Et je ne vois pas pourquoi... ='(
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 8 juil. 2009 à 16:31
>>ca marche pour tout les attributs ?
oui
>>t je ne vois pas pourquoi
inutile que je regarde si c'est setAttribute
essaye sans et dis nous.
curieux d'ailleurs de mettre des name du style 'ch'+c1.length
met le même name
coté javascript tu utilises document.name_formulaire.name_champ[index]
coté serveur, tu reçois un array
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 9 juil. 2009 à 08:53
des erreurs de syntaxe....
en ne laissant que la création d'un seul champ ( tu compléteras )
<script>
function plus()
{ var c=document.getElementById('butaddmoins');
var c1=c.getElementsByTagName('input');
var ch=document.createElement('input');
ch.type='text';
ch.name='ch'+c1.length;
ch.value='Chapitre'+c1.length;
ch.style.marginTop='10px;';
c.appendChild(ch);
}
</script>
>tu peut reformuler ? ^^
oui, surtout que je m'a gouré !
je suppose que ce formulaire va être transmis...
plutôt que de gérer des name différents, met le même,
c'est plus simple à gérer
il vaut mieux gérer document.formulaire.champ[index] que
document.formulaire.champ1, document.formulaire.champ2...document.formulaire.champn
( il me semble )
et si tu envoie ce formulaire vers le serveur, met un name avec des []
du style name="toto[]"
en javascript tu pourras gérer document.formulaire["toto[]"][index]
et coté serveur ( php par exemple ) $_POST['toto'] est un array
lornea
Messages postés12Date d'inscriptionmercredi 8 juillet 2009StatutMembreDernière intervention20 juillet 2009 10 juil. 2009 à 09:25
Merci pour toutes ces réponses.
Malheureusement, je n'aurais pas le code sous les yeux avant mercredi. =/
Je peut te demander de patienter jusque la ? pour pouvoir me renseigner si il subsiste encore des erreurs...
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 15 juil. 2009 à 11:01
indispensable :
Navigateurs |Quelques Explications |----
Chrome
, contrôler page actuelle / Options pour développeurs
/ Console Javascript, ----
FireFox
, Outils / Console d'erreurs
et mieux : télécharger FireBug, ----
Internet
Explorer
, activer le deboggage : Outils/options Internet/Avancés
dans la liste, sous "Navigation" : décocher
o Afficher une notification de chaque erreur de script
o Désactiver le débogage de Scripts (Internet Explorer)
et mieux (pour IE < 8) : télécharger le Debogger IE
voir aussi : DebugBar et Companion JS, ----
K-Meleon
, Outils / Console d'erreurs, ----
Opera
, utils / Asole d'erreurs, ----
Safari
, Debug / Show JavaScript Console
° modifier Fichier com.apple.Safari.plist situé dans le
répertoire : Support:\Documents and Settings\utilisateur
\Application Data\Apple Computer\Safari\Preferences\
y ajouter <key>IncludeDebugMenu</key>
et déjà, avec FireFox, par exemple on voit :
Erreur : invalid assignment left-hand side....
Code Source :
ch.style.margin-top='10px;'; ça ne plait pas !
ch.style.marginTop='10px;';
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 15 juil. 2009 à 11:36
chez moi, en ajoutant quelques élément html, ça baigne
( enfin, la création )
<script>
function plus()
{ var c=document.getElementById('butaddmoins');
var c1=c.getElementsByTagName('input');
var ch=document.createElement('input');
ch.type='text';
ch.name='ch'+c1.length;
ch.value='Chapitre'+c1.length;
ch.style.marginTop='10px';
c.appendChild(ch);
var d=document.getElementById('plaf');
var d1=d.getElementsByTagName('textarea');
var dh=document.createElement('textarea');
dh.name='dh'+d1.length;
dh.value='Objectif'+d1.length;
dh.rows='6';
dh.cols='28';
d.appendChild(dh);
var a=document.getElementById('B');
var a1=a.getElementsByTagName('input');
var ah=document.createElement('input');
ah.type='text';
ah.name='ah'+a1.length;
ah.value='Sous_Chapitre'+a1.length;
a.appendChild(ah);
}
</script>
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 15 juil. 2009 à 11:39
>>la console d'erreur me dit que tout vas bien et ma page, est W3C valide... =/
pas avec ce que tu nous donnes !!!!!
margin-top ça ne marchera pas, ; en trop derrière px....
function plus(){
var c=document.getElementById('butaddmoins');
var c1=c.getElementsByTagName('input');
var ch=document.createElement('input');
ch.type='text';
ch.name='ch'+c1.length;
ch.value='Chapitre'+c1.length;
ch.style.marginTop='10px';
c.appendChild(ch);
var d=document.getElementById('plaf');
var d1=d.getElementsByTagName('textarea');
var dh=document.createElement('textarea');
dh.name='dh'+d1.length;
dh.value='Objectif'+d1.length;
dh.rows='6';
dh.cols='28';
d.appendChild(dh);
var a=document.getElementById('B');
var a1=a.getElementsByTagName('input');
var ah=document.createElement('input');
ah.type='text';
ah.name='ah'+a1.length;
ah.value='Sous_Chapitre'+a1.length;
a.appendChild(ah);
}
function moins(){
if(c1.length>0){c.removeChild(c1[c1.length-1])}
if(c1.length==0){document.getElementById('sup').style.display='none'};
if(c1.length==0){document.getElementById('corps3').style.display='none'};
if(c1.length==0){document.getElementById('sup2').style.display='none'};
if(c1.length==0){document.getElementById('obj1').style.display='none'};
}
var c2,c3, ch1;
function plus1(){
var c2=document.getElementById('B');
var c3=c2.getElementsByTagName('input');
var ch1=document.createElement('input');
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 15 juil. 2009 à 12:10
tu parles de ce qui est inséré dans i="B"
fais quelques petits essais, tu sucres tout
et tu essayes uniquement avec ce qui cloche
par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> formulaire p2 test.v2</title>
<script type="text/javascript">
function plus()
{ var a=document.getElementById('B');
var a1=a.getElementsByTagName('input');
var ah=document.createElement('input');
ah.type='text';
ah.name='ah'+a1.length;
ah.value='Sous_Chapitre'+a1.length;
a.appendChild(ah);
}
</script>
</head>
</html>
ça... ça baigne...
donc : tu vas bien trouver ce qui fait que ça
ne marche plus quand tu ajoutes le reste, mais
fais au fûr et à mesure....
t'as besoin d'autan de div, p,.... ?
ça me semble bien lourd....
lornea
Messages postés12Date d'inscriptionmercredi 8 juillet 2009StatutMembreDernière intervention20 juillet 2009 15 juil. 2009 à 12:44
C'est cool, ca va de mieux en mieux !! :p
Donc déjà, un grand merci pour tout
Cependant, il reste encore qqs problèmes...
Donc déjà ce qui marchait pas, c'était que j'avais pas remis les >>document.getElementById('sup').style.display='inline';<<
Maintenant mon bouton + du départ me faire apparaitre un textarea "objectif" et un champs"sous-chapitre" avec un bouton +.
Le problème est que quand on clique sur le 1er + il fait apparaitre un champ sous chapitre (ca c'est bien) mais si on reclique sur le 1er + il fait apparaitre a la fois chapitre2 et sous chapitre 2 et ca c'est pas bien... =/ d'autant plus que le 2em bouton + fait lui aussi apparaitre des sous-chapitres.... =/
Enfaite, je sais pas trop comment procéder. Si les 2 boutons + font la même chose c'est parce que ils créent tout les 2 la même chose au même endroit.
Mon code ne convient pas je pense... =/
Ce que je veut le 1er bouton + génère : 1 textarea "objectif0" ; 1 champ "chapitre0" ; 1champ "sous-chapitre0" avec un bouton +.
si on reclique une autre fois, il génère : 1 textarea "objectif1" ; 1 champ "chapitre1" ; 1champ "sous-chapitre0" avec un bouton +.
etc..
Le 2em bouton +, lui génère des champs "sous chapitre 1,2,3 etc.."
Voici un aperçu de ce que je veux obtenir a la fin.
Je ne suis pas expert en Javascript, c'est pourquoi, pourrais-tu me donner une piste, sur comment arriver a ca ?