fenêtre de login

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:

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:

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:

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);
}
}

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