fen�tre de login

**rinuom99** · 06/05/2011, 12h15

Bonjour
sur un site j'ai trouver un code source sur une fen�tre de login en CSS et javascript marche tr�s bien, sauf que j'ai un petit soucis, j'arrive pas a r�cup�rer les valeurs de formulaire (input) pour l'exploiter en php
voici le code :

page login.php

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link rel="stylesheet" type="text/css" href="res/login.css">
 
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="res/login.js"></SCRIPT>
<script type="text/javascript">
 
function gestion_pass(){
//var glo=document.getElementById('log').value
//var wsp=document.getElementById('psw').value
//alert('le login est "'+glo+'" et le passe est "'+wsp+'",redirection vers index.php')
document.getElementById('cadre').submit()
//klog.quit()
}
 
</SCRIPT>
</head>
 
<body>
 
<a onclick="klog.logdial()" >cliquer ici</a>
</body>
</html>

page index.php

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
<?php
 
if (isset ($_POST['psw']))
echo $_POST['psw'];
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<script type="text/javascript">
</script>
</head>
<body>
<br>
<span>page de redirection pour l'exemple index.php</span>
 
</body>
</html>

page login.js

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 
var klog={
 
regul:0,
 
quit:function(){
clearInterval(klog.regul);
document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
document.getElementById('cadre').parentNode.removeChild(document.getElementById('cadre'));
},
 
sscro:function(){
var dico=document.getElementById('divco');
var dde=document.documentElement;
var ddl=(navigator.vendor) ? document.body : document.documentElement;
dico.style.height=dde.clientHeight+ddl.scrollTop+"px";
dico.style.width=dde.clientWidth+ddl.scrollLeft+"px";
if(document.getElementById('cadre')){
var adi=document.getElementById('cadre');
adi.style.left=((dde.clientWidth-adi.offsetWidth)/2)+ddl.scrollLeft+'px';
adi.style.top=(dde.clientHeight-adi.offsetHeight)/2+ddl.scrollTop+"px";
}
},
 
logdial:function(){
 
if(arguments.length==0){
klog.creation('div','body','divco');
document.getElementById('divco').onclick=klog.quit;
klog.sscro();
var hou=0;
}
else{
var hou=arguments[0];
}
if(hou<=0.5){
hou+=0.1;
if(document.all && !window.opera){
document.getElementById('divco').style.filter = 'alpha(opacity='+(hou*50)+')';
} 
else{
document.getElementById('divco').style.opacity=hou;
}
}
else{
klog.boite();
return false
}
setTimeout('klog.logdial('+hou+')',30);
},
 
raz:function(){
document.getElementById('psw').value='';
document.getElementById('log').value='';
},
 
creation:function(elem,parent,ref){
var ddc=(arguments[1]=='body') ? document.body : document.getElementById(parent)
ddc.appendChild(document.createElement(elem)).setAttribute("id",ref);
},
 
createxte:function(parent,txt){
document.getElementById(parent).appendChild(document.createTextNode(txt));
},
 
boite:function(){
klog.creation('form','body','cadre');
var dvg=document.getElementById('cadre');
dvg.setAttribute("method",'POST');			/////////////////////////////
dvg.setAttribute("action",'index.php');    //la page de redirection/////
dvg.style.position='absolute';			   ////////////////////////////	
klog.creation('span','cadre','textelog');
klog.creation('div','cadre','im3');
klog.creation('input','cadre','log');
var pw=document.createElement('input');
pw.setAttribute("id","psw");
pw.setAttribute('type','password');
document.getElementById('cadre').appendChild(pw);
klog.creation('span','cadre','texpas');
klog.creation('div','cadre','texte2');
klog.creation('span','texte2','txt1');
klog.creation('span','texte2','txt2');
klog.createxte('textelog','LOGIN : ');
klog.createxte('texpas','MOT DE PASSE :');
klog.createxte('txt1','Annuler');
klog.createxte('txt2','Ok');
document.getElementById('txt2').onclick=gestion_pass;
document.getElementById('txt1').onclick=klog.raz;
document.getElementById('im3').onclick=klog.quit;
klog.regul=setInterval(klog.sscro,50);
}
}

login.css

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
#divco{
position:absolute;
left:0px;
top:0px;
background:black;
filter:alpha(opacity=00);
opacity:0;
cursor:pointer;
}
 
 
#cadre{
background-color:#eef2f7;
height:280px;
width:420px;
background: #cccccc;
background:-moz-linear-gradient(90deg, #ccc, #fff);
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#cccccc);
border:1px solid #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 15px #aaa;
-webkit-box-shadow:0 0 15px #aaa;
-o-box-shadow:0 0 15px #aaa;
box-shadow:0 0 15px #aaa;
 
}
 
#texte2{
background:url(bouton.png) no-repeat;
height:38px;
width:182px;
margin:70px 0 0 200px;
padding-top:4px;
color:#FFF;
}
 
#txt1{
font-size:18px;
text-align:center;
margin-left:16px;
color:#FFF;
cursor:pointer;
}
 
#txt2{
font-size:18px;
text-align:center;
margin-left:52px;
color:#FFF;
cursor:pointer;
}
 
#txt1:hover, #txt2:hover{
color:black;
}
 
#im3{
background:url(fermer.png) no-repeat;
height:20px;
width:20px;
display:block;
margin:-45px 0 0 390px;
cursor:pointer;
}
 
#im3:hover{
background:url(fermer2.png) no-repeat;
}
 
#log{
margin:35px 0 0 30px;
height:30px;
width:350px;
font-size:1em;
}
 
#textelog{
color:black;
display:block;
font-size:12px;
text-align:center;
margin:35px 0 0 -300px;
}
 
#psw{
margin:50px 0 0 30px;
height:30px;
width:350px;
font-size:1em;
}
 
#texpas{
display:block;
color:black;
margin:-60px 0 0 -260px;
font-size:12px;
text-align:center;
}
 
#psw,#log{
	background: rgba(255, 255, 255, 0.9);
	background:-moz-linear-gradient(90deg, #fff, #eee);
	background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff), color-stop(0.2, #fff)); /* Webkit */
	border:1px solid #aaa;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:0 0 3px #aaa;
	-webkit-box-shadow:0 0 3px #aaa;
	-o-box-shadow:0 0 3px #aaa;
	box-shadow:0 0 3px #aaa;
 
	padding:5px;
}
#psw:focus,#log:focus{
	border-color:#093c75;
	-moz-box-shadow:0 0 3px #0459b7;
	-webkit-box-shadow:0 0 3px #0459b7;
	-o-box-shadow:0 0 3px #0459b7;
	box-shadow:0 0 3px #0459b7;
	outline:none; /* Pour enlever le contour jaune lorsque l'on sélectionne un input dans Chrome */
}

nb : code source de Kazma.

donc moi sur la page index.php ( la page de redirection ) je veux r�cup�rer la valeur de login et password mais �a fonctionne pas et je vois pas le probl�me !!

merci d'avance