[DOM] Recherche tutoriel pour réaliser des formulaires avec DOM !

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/04/2008, 16h32
polothentik

[DOM] Recherche tutoriel pour réaliser des formulaires avec DOM !

Bonjour,

Je cherche un tutoriel pour pouvoir réaliser des formulaire en DOM et les introduire dan du code HTML ...

merci
23/04/2008, 16h40
SpaceFrog

tu as été voir dans la FAQ javascript ?
23/04/2008, 16h46
polothentik

oui mais c'est relativement très court :?

Bon alors très court aussi :

Code:

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>

23/04/2008, 17h08
polothentik

On peut utiliser :

Code:

myform.name='monform';

au lieu de :

Code:

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:

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>

23/04/2008, 17h33
SpaceFrog

par contre si quelqu'un a une idée pour le style en dynamique sans passer par un sous hash ...

J'ai bien essayé:

Code:

var myinput=$C({"obj":"input",'id':'bar',"type":"text","name":"montexte","cssText":"color:red"} );

sur le onload si je fais un

Code:

alert(document.getElementById('bar').cssText)

il me dit bien color:red

8O

mais le color de l'input n'est pas red
23/04/2008, 19h46
Auteur
Citation:

Envoyé par SpaceFrog

par contre si quelqu'un a une idée pour le style en dynamique sans passer par un sous hash ...

cssText n'est pas un attribut d'une balise input mais une propriété JS. Essaye avec style au lieu de cssText.
Code:

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:

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>

24/04/2008, 04h43
marts

'style' property has only a getter.

Mais on pourrait se passer d'un sous-hash et garder cette syntaxe

Code:

var myinput=$C({"obj":"input",'id':'bar',"type":"text","name":"montexte","style":"color:red"} );

en modifiant la fonction de construction pour la faire splitter selon les ';' et les ':'.
24/04/2008, 09h03
SpaceFrog

Bon il manque juste les select avec les options, et je m'attauqe aussi aux conteneurs dans le form, div, span fieldset h etc ...
24/04/2008, 09h26
franculo_caoulene

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.
24/04/2008, 09h50
polothentik

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 :mouarf: 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)
24/04/2008, 10h26
polothentik

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:

Code:

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>

Cela suppose un syntace pour le Constructeur, mais je pense que c'est un bon début ...

Compatible FFX et IE

24/04/2008, 11h25
le_chomeur

8O8O8O tu t'es fais plaisir spaffy !!
24/04/2008, 11h33
SpaceFrog

Oui juste une matinée à perdre ... :mouarf:
24/04/2008, 12h00
polothentik
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 :king:):

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 ! :mrgreen:)

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 :oops: mais comment faut-il interpréter en terme de condition this[i] dans :
Code:

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++)
Merci beaucoup SpaceFrog pour tes idées
24/04/2008, 12h08
SpaceFrog

Dasn une boucle for tu as une valeur de départ

Code:

for (i=0;

une condition

Code:

i<10;

un incrément

Code:

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
24/04/2008, 13h07
le_chomeur

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 :mouarf::mouarf::mouarf:

lol bien joué en tous cas, avec un peu plus de commentaire , tu pourrais le mettre dans les contributions

Voir 40 message(s) de cette discussion en une page