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

Version imprimable

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

24/04/2008, 13h35
SpaceFrog

c'est fait !

http://www.developpez.net/forums/sho...d.php?t=535848
24/04/2008, 15h16
polothentik

Merci à tous ceux qui m'ont filé un coup de main et un gros :king: à SpaceFrog pour son code !

J'aurais quelques petites question sur ton code SpaceFrog :

1- Est-ce qu'on peut inclure du javascript en plaçant :

Code:

$C({"obj":"input","type":"submit","value":"valider","onclick":"sendForm(2);"})

2- Dans un <div> les éléments sont en ligne, dans le code ci-dessous, les éléments inclus dans un meme <div> se placent les uns en dessous des autres. D'autres parts, il ne prend pas en compte l'attribut 'for' de mon label... alors que cela fonctionnait très bien en HTML 8O

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
var myForm = createDom( {"obj":"form","name":"form_ajouter_deplacement","id":"form","method":"post"/*,"action":self.location.href*/} );
 
			var myFieldset = createDom( {"obj":"fieldset","css":{'border':"none",'borderColor':'red',"width":"200px",'padding':'10px'} } );
 
				var myDiv1 = createDom( {"obj":"div"} );
 
							var myLabel1 = createDom( {"obj":"label","for":"Field1"/*,"css":{'color':"green",'fontFamily':'verdana'} */} );
    							createDom( {"obj":"div","innerHTML":"Type de deplacement"/*,"css":{'color':"green",'fontFamily':'verdana'} */} );
    						appendDom(myLabel1);
 
 
							var myInput1 = createDom({"obj":"input","type":"text","name":"nom_deplacement_1","id":"Field1","onclick":"resetTextHint(1);"/*,'css':{'color':'red'} */} );
							createDom( {"obj":"div","id":"txtHint1"/*,"css":{'color':"green",'fontFamily':'verdana'} */} );
 
				appendDom(myDiv1);
 
				createDom({'obj':'br'});
    			createDom({'obj':'br'});
 
    						var myInput2 = createDom({"obj":"input","type":"text","name":"logo_deplacement_2","id":"Field2","onclick":"resetTextHint(2);"/*,'css':{'color':'red'} */} );
							createDom( {"obj":"div","id":"txtHint2"/*,"css":{'color':"green",'fontFamily':'verdana'} */} );
 
 
				appendDom(myFieldset);
 
 			var mySubmit = createDom({"obj":"input","type":"submit","value":"valider","onclick":"sendForm(2);"/*,"css":{"width":"100px"} */} );
 
			appendDom(myForm);

3- Enfin, lorsque je clique sur valider, il me recharge la page alors que ce n'est pas ce qui est demandé !!

Merci d'avance

pour la fonction essaye :
Code:

1 2 $C({"obj":"input","type":"submit","value":"valider","onclick":function(){sendForm(2)}})
pour le second poinr je regarde ,

24/04/2008, 17h21
polothentik

Pour ce qui est de :

Code:

$C({"obj":"input","type":"submit","value":"valider","onclick":function(){sendForm(2);}})

ça marche impeccable !

Bon pour les checkboxes et les radios on en revient à l'impossibilité d'atribuer un name en run mode :(

pour les checkBoxes un pansement pour le label:

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
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);    
 
 
 
   //#################
 
 
    var Radios=new Array();
    var Labels=new Array();
    for(i=0;i<5;i++){
 
     Radios.push ( new  $C({'obj':'input','name':"'Rad_'+i", 'type':'checkbox','value':'radio_'+i,'id':'Rad_'+i}) )
     Labels.push(new  $C({'obj':'label','innerHTML':'Label '+i, 'indice':i,'onclick':function(){document.getElementById('Rad_'+this.indice).click()}}) )  
        }
 
	$Close(myFieldSet);

mais j'ai peur que n'ayant pas de name la value ne soit pas transmise au serveur ...

Salut,

J'ai essayé de mettre en place ton patch pour les labels mais il ne m'active pas mon champ text.

D'autre part, j'ai vu que les labels de ton exemple s'affichaient in-line mais je n'arrive à garantir que mes différents éléments vont se retrouver sur la même ligne. J'ai bien essayé de les mettre dans un <div> mais... sans résultat !

Enfin, aurais-tu une astuce pour que la page ne se recharge pas après un click sur le bouton 'valider'. En théorie, les fonctions inclues dans mes input me permettent de renvoyer une information à l'utilisateur dans le cas ou le champ est obligatoire et qu'il l'a laissé vide.

Merci d'avance

Ch'ti bout d'code :
Code:

1 2 3 4 5 6 7 var myDiv1 = $C( {"obj":"div"} ); var myLabel1 = $C( {"obj":"label","innerHTML":"Type de deplacement :","onclick":function(){document.getElementById('Field1').click()}/*,"css":{'color':"green",'fontFamily':'verdana'} */} ); var myInput1 = $C({"obj":"input","type":"text","name":"nom_deplacement_1","id":"Field1","onclick":function(){resetTextHint(1)}} ); $C( {"obj":"div","id":"txtHint1"/*,"css":{'color':"green",'fontFamily':'verdana'} */} ); $Close(myDiv1);

25/04/2008, 09h17
le_chomeur

pourquoi les names attribué dynamique ne fonctionne pas ( si je me rappel on avait traité un post a ce sujet ? )

[EDIT] NAME en majuscule il me semble ;)
[RE-EDIT] http://developer.mozilla.org/fr/docs/DOM:element.name :( regardez tout en bas de la page =>

Citation:

Notes

Dans Internet Explorer, la propriété name des objets DOM créés à l'aide de createElement ne peut être définie ou modifiée.
25/04/2008, 10h05
SpaceFrog

Oui je travaille dessus et c'est quasiment résolu ...
il faut une syntaxe pour IE et une autre pour firefox ...

Pour IE c'est focntionnel, j'ai juste un souci avec l'attribution de for sous firefox ...
25/04/2008, 10h20
SpaceFrog

Bon pour moi c'est résolu ...

http://www.developpez.net/forums/sho...wpost&t=535848

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