Bonjour,
Je cherche un tutoriel pour pouvoir réaliser des formulaire en DOM et les introduire dan du code HTML ...
merci
Bonjour,
Je cherche un tutoriel pour pouvoir réaliser des formulaire en DOM et les introduire dan du code HTML ...
merci
tu as été voir dans la FAQ javascript ?
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
Bon alors très court aussi :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 <script type='text/javascript'> var $C= function(obj){ var Obj=document.createElement(obj); return Obj} function foo(){ var myform=$C('form'); myform.name="monform"; myform.method='post'; myform.action="javascript:alert('coucou')" var myinput=$C('input') myinput.type='text' var mysubmit=$C('input'); mysubmit.type='submit' mysubmit.value="go"; myform.appendChild(myinput); myform.appendChild(mysubmit); document.body.appendChild(myform); } </script></head> <body onload="foo()"> </body>
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
On peut utiliser :
au lieu de :
Code : Sélectionner tout - Visualiser dans une fenêtre à part myform.name='monform';
?
Code : Sélectionner tout - Visualiser dans une fenêtre à part myform.setAttribute('name','monform');
De même, je m'aperçois que si je place le DOM dans une fonction javascript que j'appele lors d'un click sur un href dans un fichier HTML, il m'ajoute un champ text et un bouton valider à chaque nouveau click...
Comment stabiliser l'insertion de données lors d'un click ?
tiens encore plus fun ...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 <script type='text/javascript'> var $C= function CO(HasH){ var Obj=document.createElement(HasH['obj']); for (elt in HasH){ if (elt != 'obj'){Obj[elt]=HasH[elt];} } return Obj; } function foo(){ var myform=$C( {"obj":"form","method":"get","action":self.location.href} ); var myinput=$C({"obj":"input","type":"text","name":"montexte"} ); var mysubmit=$C({"obj":"input","type":"submit","value":"go"} ); myform.appendChild(myinput); myform.appendChild(mysubmit); document.body.appendChild(myform); } </script> </head> <body onload="foo()"> </body>
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
par contre si quelqu'un a une idée pour le style en dynamique sans passer par un sous hash ...
J'ai bien essayé:
sur le onload si je fais un
Code : Sélectionner tout - Visualiser dans une fenêtre à part var myinput=$C({"obj":"input",'id':'bar',"type":"text","name":"montexte","cssText":"color:red"} );il me dit bien color:red
Code : Sélectionner tout - Visualiser dans une fenêtre à part alert(document.getElementById('bar').cssText)
mais le color de l'input n'est pas red
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
cssText n'est pas un attribut d'une balise input mais une propriété JS. Essaye avec style au lieu de cssText.Envoyé par SpaceFrog
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 var myinput=$C({"obj":"input",'id':'bar',"type":"text","name":"montexte","style":"color:red"} );
Bon ben la seule solution c'est le sous hash :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 <script type='text/javascript'> var $C= function CO(HasH){ var Obj=document.createElement(HasH['obj']); for (elt in HasH){ if (elt != 'obj'){ if(elt=='css'){ for(Styl in HasH['css']){Obj.style[Styl]=HasH['css'][Styl];} } else{ Obj[elt]=HasH[elt]; } } } return Obj; } function foo(){ var myform=$C( {"obj":"form","method":"get","action":self.location.href} ); var myinput=$C({"obj":"input","type":"text","name":"montexte",'css':{'color':'red'}} ); var mysubmit=$C({"obj":"input","type":"submit","value":"go"} ); myform.appendChild(myinput); myform.appendChild(mysubmit); document.body.appendChild(myform); } </script> </head> <body onload="foo()"> </body> </html>
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
'style' property has only a getter.
Mais on pourrait se passer d'un sous-hash et garder cette syntaxe
en modifiant la fonction de construction pour la faire splitter selon les ';' et les ':'.
Code : Sélectionner tout - Visualiser dans une fenêtre à part var myinput=$C({"obj":"input",'id':'bar',"type":"text","name":"montexte","style":"color:red"} );
11001.00101.10010.10000.00111
Bon il manque juste les select avec les options, et je m'attauqe aussi aux conteneurs dans le form, div, span fieldset h etc ...
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
Salut,
En fait, pour faire bien concernant les styles. Et bien c'est laisser les styles en CSS et définir une classe CSS en javascript. Alors, si aucune classe n'est précisée, utiliser les styles par défaut définis dans $C.
Désolé, pas le temps de pondre un code, en plus j'utilise prototype.
Bon c'est bien joli tout ça mais là c'est au choix : trop indigeste ou trop brutal pour moi... Je veux bien faire l'effort de comprendre mais là vous êtes parti trop vite pour moi...
alors si quelqu'un veut bien me faire un petit point pour que je puisse programmer des formulaires qui s'affichent sans chargement de ma page suite à un event click... Si je saute les étapes, je vais à coup sûr me planter ou me perdre dans nu code que je ne comprendrais pas...
Alors voilà quelques questions (sachez que je suis en DOM "encore plus novice que le plus novice de tous vos potes")
1- myform.name='monform'; et myform.setAttribute('name','monform'); c'est la même chose ?
VRAI ou FAUX
2- Ecrire
var $C = function CO(HasH){ [...] } puis var myform = $C( { [...] } )
c'est la même chose qu'écrire
function CO(HasH){ [...] } puis var myform = CO( { [...] } )
VRAI ou FAUX
3- HasH ça sert à associer des "keys" avec des "values"
VRAI ou FAUX
4- HasH vous sert à alléger la création des éléments HTML en entrant directement toutes leurs propriétés et je pourrais très bien m'en sortir en écrivant des séries de setAttribute( [...] ); (pas que je sois réticent à l'idée de consommer du HasH mais NOVICE donc déjà la base c'est pas mal) Dites moi surtout sur je veux utiliser du CSS derrière
OUI ou NON
5- Il n'y a pas d'ordre pour créer les fameux appendChild, il suffit juste de ne pas se planter ?
VRAI ou FAUX
Merci beaucoup en tous les cas (je sens que le sujet vous aura fait pousser des ailes)
6- Comment faire pour orienter l'affichage de mon DOM vers le content lorsque le click à lieu dans le left_menu... Faut-il le rattacher à une cible placée dans le content... ou faut-il le faire grace au CSS ? Dans l'exemple de SpaceFrog, le formulaire vient se positionner immédiatement après le lien href...
7- Comment faire que lorsque l'utilisateur clique une nouvelle fois sur le lien href (contenant le onclick = "fonction affichage du DOM"), le DOM ne s'ajoute pas encore une fois ?
Bon Alors accrochez vous à vos chaussettes, je bamance du lourd ...
Va vraiment falloir que je me fasse soigner, parceqe ce code je l'ai rèvé ce matin entre 5:00 et 6:00
Je vous le livre brut de pomme ici, mais je vais le proposer dasn les contributions:
Cela suppose un syntace pour le Constructeur, mais je pense que c'est un bon début ...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Play around with DOM</title> <script type='text/javascript'> Flux=new Array(); Array.prototype.ArrayPos=function(quoi){ var Position=-1; for (i=0;this[i];i++){ if (quoi==this[i]){Position=i;} } return Position; } $Close=function(Closing){ var FluxPos=Flux.ArrayPos(Closing) var FluxLength=Flux.length; var SpliceLength=FluxLength-FluxPos+1; var AppendLot=Flux.splice(FluxPos+1,SpliceLength); for(l=0;AppendLot[0];l++){ Closing.appendChild(AppendLot.shift()) } if(Flux.length==1){document.body.appendChild(Flux.pop())} } var $C= function (HasH){ var Obj=document.createElement(HasH['obj']); for (elt in HasH){ if (elt != 'obj'){ if(elt=='css'){ for(Styl in HasH['css']){Obj.style[Styl]=HasH['css'][Styl];} } else{ Obj[elt]=HasH[elt]; } } } Flux.push(Obj); return Obj; } function Construct(){ var myform=$C( {"obj":"form","method":"get","action":self.location.href} ); var myFieldSet= $C( {"obj":"fieldset","css":{'border':"solid 2px",'borderColor':'red',"width":"200px",'padding':'10px'} } ); var legend=$C( {"obj":"legend","innerHTML":"Enregistrez vous"} ); $C( {"obj":"div","innerHTML":"LOGIN","css":{'color':"green",'fontFamily':'verdana'} } ); var myinput=$C({"obj":"input","type":"text","name":"montexte",'css':{'color':'red'} } ); $C({'obj':'br'}) ; $C({'obj':'br'}) ; var myselect= $C({'obj':'select'}) ; $C({'obj':'option', 'value':'1','innerHTML':'option 1'}) ; $C({'obj':'option', 'value':'2','innerHTML':'option 2'}) ; $Close(myselect); $Close(myFieldSet); var myDiv= $C( {"obj":"div","css":{'border':"solid 2px",'borderColor':'red',"width":"200px",'padding':'10px','textAlign':'center','marginTop':'2px'} } ); var mysubmit=$C({"obj":"input","type":"submit","value":"go","css":{"width":"100px"} } ); $Close(myDiv) $Close(myform) } </script> </head> <body onload="Construct(); "> </body> </html>
Compatible FFX et IE
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
tu t'es fais plaisir spaffy !!
est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes
Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )
Oui juste une matinée à perdre ...
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
Bon, vu que j'ai amorcé ce TOPIC, je me suis fais violence et j'ai compris ceci (il fallait parce que ce code déboite ):
1- $C :
-> Elle détermine la balise HTML à ajouter puis associe à chaque attribut sa valeur. Elle permet d'inclure du css (ce qui est brillant ! )
2- $Close :
-> Elle permet d'automatiser la gestion des niveau_(n-1).appendChild(niveau_n) dans le for. Elle détermine la racine de l'arborisation DOM dans le if.
Pourrais-tu commenter la déclaration de tes variables et les attribut auquels tu fais appel (ex: splice) ?
3- je ne comprend pas la 1ère partie du code... Il me semble que :
par exemple : myselect -> Closing -> quoi mais à puoi correspond this[i] dans ce cas.
4- La j'ai un peu honte mais comment faut-il interpréter en terme de condition this[i] dans :
Merci beaucoup SpaceFrog pour tes idées
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 for(i=0;this[i];i++) /*moi je ne connais que*/ for(i=0;i<n;i++) /*ou*/ for(i=0;i>n:i++)
Dasn une boucle for tu as une valeur de départ
une condition
Code : Sélectionner tout - Visualiser dans une fenêtre à part for (i=0;
un incrément
Code : Sélectionner tout - Visualiser dans une fenêtre à part i<10;
Code : Sélectionner tout - Visualiser dans une fenêtre à part i++)
la conditon doit être true pour que la boucle "refasse un tour"
la première partie du code est enfait une fonction prototype sur un Array ...
Ne trouvant pas l'equivalent de indexOf pour un tableau, ben je me suis fait mon propre indexOf ArrayPos pour un array, qui me retourne la position de l'élément dans le tableau
this = > ben c'est l'array
Flux.ArrayPos(Obj) retournera la position de l'element Obj dasn l'array Flux
position dont je me sers ensuite pour déterminer quelq sont les elements à appender dans l'element Closing que l'on ferme
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
pfiou j'ai analysé ton code spafy , t'aurais pu proposé des méthodes pour gèrer tes objet :p
ajouter des objets en plus en supprimer
lol bien joué en tous cas, avec un peu plus de commentaire , tu pourrais le mettre dans les contributions
est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes
Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager