Rafraichir un div sans perdre les données du formulaire

Version imprimable

Bonsoir,

J'utilise le code javascript ci dessous afin de rafraichir un div :

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
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
 
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
 
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
 
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Tout marche très bien lorsque c'est avec un lien direct du type :

Code:

<a href="javascript:ajaxpage('register.php','global');">Create an account</a>

Pour en venir au problème : Comment faire avec un formulaire ? Le formulaire ce rafraichi bien mais je perds toutes les données... donc aucun message d'erreur...

J'ai tenter :
onsubmit =
action=

Mais sans résultat.

Voici le code source du formulaire :

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<?php
 
if( isset($_POST['submit']) ) //Si formulaire rempli et envoyé
{
	if( isset($_POST['firstname']) && isset($_POST['lastname']) && isset($_POST['psw']) && isset($_POST['psw2']) && isset($_POST['email']) && isset($_POST['email2']) ) 
	{
		if( !empty($_POST['firstname']) && !empty($_POST['lastname']) && !empty($_POST['psw']) && !empty($_POST['psw2']) && !empty($_POST['email']) && !empty($_POST['email2']) ) //Formulaire complet
		{
			$link = mysql_connect("localhost", "root", "") or die(mysql_error());
			mysql_select_db("krambox") or die(mysql_error());
 
			$firstname = mysql_real_escape_string(htmlspecialchars($_POST['firstname']));
			$lastname = mysql_real_escape_string(htmlspecialchars($_POST['lastname']));
			$email = mysql_real_escape_string(htmlspecialchars($_POST['email']));
			$psw = mysql_real_escape_string(htmlspecialchars($_POST['psw']));
 
			$query = "SELECT id FROM users WHERE id='$email'";
 
			$answer = mysql_query($query);
 
			$result = mysql_num_rows($answer);
 
			if( $result < 1 ) // Veirification que l'id email est unique
			{				
				if( $_POST['psw'] == $_POST['psw2'] ) //Passwords identiques
				{						
					$psw = md5($psw);
 
					if( $_POST['email'] == $_POST['email2'] ) //Email identiques
					{
 
						$insert = "INSERT INTO users VALUES('$email','$psw','$lastname','$firstname')";
						mysql_query($insert) or die(mysql_error());
 
						mysql_close();
 
						$userPath = "./users/" . $email; //creation dossier utilisateur
						mkdir ($userPath, 0700); 
 
						for( $nb = 1; $nb < 4; $nb++) //creation dossier playlist 1 2 3
						{
							$userPath = "./users/" . $email . "/playlist" . $nb;
							mkdir ($userPath, 0700);
						}	
						echo "<p>Thank for you subscribtion</p>";			
						$error = 0;
					}
					else
					{
						$error = "Please retype your email";
					}
				}
				else
				{
					$error =  "Please retype your password";
				}
			}
			else
			{
				$error = "Username already exist";
			}
		}
		else
		{
			$error = "Please complete the form";
		}			
 
	}
	else
	{
		$error = "Please complete the form";
	}
 
	if($error != "0") //Si erreur
	{
		echo $error;
		?>
 
		<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
        <script type="text/javascript" src="scripts/content_link.js"></script>
		<title>Untitled Document</title>
		</head>
 
		<body>
 
		<div id="login">
		<form action="register.php" method = "post">
		<div>
			<p>Firstname</p> <input type = "text" name = "firstname" class="champ"/>
			<p>Lastname</p> <input type = "text" name = "lastname" class="champ"/>
			<p>Email</p> <input type = "text" name = "email" class="champ"/>
			<p>Retype email</p> <input type = "text" name = "email2" class="champ"/>
			<p>Password</p> <input type = "password" name = "psw" class="champ"/>
			<p>Retype password</p><input type = "password" name = "psw2" class="champ"/>
 
			<input type = "submit" name = "submit" value = "confirm" class="button" />
		</div>	
		</form>
		</div>
 
		</body>
		</html>
		<?php
        }
        else
        {
                //Do nothing
        }
}
else
{
?> 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="scripts/content_link.js"></script>
 
<title>Untitled Document</title>
</head>
 
<body>
 
<div id="login">
    <form action="register.php" method = "post">
        <div>
            <p>Firstname</p> <input type = "text" name = "firstname" class="champ"/>
            <p>Lastname</p> <input type = "text" name = "lastname" class="champ"/>
            <p>Email</p> <input type = "text" name = "email" class="champ"/>
            <p>Retype email</p> <input type = "text" name = "email2" class="champ"/>
            <p>Password</p> <input type = "password" name = "psw" class="champ"/>
            <p>Retype password</p><input type = "password" name = "psw2" class="champ"/>
 
            <input type = "submit" name = "submit" value = "confirm" class="button" />
        </div>	
    </form>
</div>
 
</body>
</html>
 
<?php
}
?>

Merci de votre aide :yaisse2:

essaye de mettre un onsubmit sur ton formulaire comme tu as déja fait.

Ensuite une fois que tu as fais ton send et ton open pour ajax, tu stop la propagation de l'évènement.
Ca doit te donner à peu près ça :

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
 
window.onload=function()
{
ton_formulaire.onsubmit=function(event)
                    {
                         ajaxpage(); ->la page et les param que tu as besoin oublie pas que tu peux faire this ;)
                          var objEvent = event || window.event;
                          stopPropagation(objEvent);
                     }
}
 
function stopPropagation(objEvent)
{
	try
	{
		objEvent.stopPropagation();
		objEvent.preventDefault();
	}
	catch(e)
	{
		objEvent.cancelBubble = true;
		objEvent.returnValue = false;
	}
}

07/01/2008, 21h56
Krustig

Merci pour ton aide mais pour l'instant je suis juste capable d'utiliser des scripts tout fait :'(

Donc je ne sais pas trop comment utiliser, completer le code que tu viens de me donner.

Si tu pouvais me donner plus de detail ca m'interesserais bien :)

Merci

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
        <script type="text/javascript" src="scripts/content_link.js"></script>
		<title>Untitled Document</title>
		</head>
 
		<body>
 
		<div id="login">
		<form action="register.php" method = "post">
		<div>
			<p>Firstname</p> <input type = "text" name = "firstname" class="champ"/>
			<p>Lastname</p> <input type = "text" name = "lastname" class="champ"/>
			<p>Email</p> <input type = "text" name = "email" class="champ"/>
			<p>Retype email</p> <input type = "text" name = "email2" class="champ"/>
			<p>Password</p> <input type = "password" name = "psw" class="champ"/>
			<p>Retype password</p><input type = "password" name = "psw2" class="champ"/>
 
			<input type = "submit" name = "submit" value = "confirm" class="button" />
		</div>	
		</form>
		</div>
 
		</body>
		</html>

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
 
window.onload=function()
{
     document.getElementById("login").onsubmit=function(event)
                    {
                         ajaxpage("register.php?firstname=this.firstname.value&name=this.name&....","login"); //je te laisse rajouter les parametres si this.firstname.value ne marche pas c'est qu'il faut que tu mettes un id="firstname" sur ton input, je te laisse chercher comment passer les paramètres en post ce qui sera plus lisible!!
 
                          var objEvent = event || window.event;
                          stopPropagation(objEvent);
                     }
}
//Cette fonction permet de stopper la propagation d'un évènement, dans ton cas la page action ne sera pas appelé par la page html mais par Ajax
function stopPropagation(objEvent)
{
	try //FF
	{
		objEvent.stopPropagation();
		objEvent.preventDefault();
	}
	catch(e) //IE
	{
		objEvent.cancelBubble = true;
		objEvent.returnValue = false;
	}
}
function ajaxpage(.......)
{...........}
function loadpage(......)
{.........}

Dans la fonction open() dans la fonction ajaxpage tu passes tes parametres en GET (d'ou l'url de register.php?......) donc dans ton code php tu remplaces les POST par des GET ou par la methode que tu as choisis dans open()

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
 
if( isset($_POST['firstname']) && isset($_POST['lastname']) && isset($_POST['psw']) && isset($_POST['psw2']) && isset($_POST['email']) && isset($_POST['email2']) ) 
	{
		if( !empty($_POST['firstname']) && !empty($_POST['lastname']) && !empty($_POST['psw']) && !empty($_POST['psw2']) && !empty($_POST['email']) && !empty($_POST['email2']) ) //Formulaire complet
		{
			$link = mysql_connect("localhost", "root", "") or die(mysql_error());
			mysql_select_db("krambox") or die(mysql_error());
 
			$firstname = mysql_real_escape_string(htmlspecialchars($_POST['firstname']));
			$lastname = mysql_real_escape_string(htmlspecialchars($_POST['lastname']));
			$email = mysql_real_escape_string(htmlspecialchars($_POST['email']));
			$psw = mysql_real_escape_string(htmlspecialchars($_POST['psw']));
 
			$query = "SELECT id FROM users WHERE id='$email'";
 
			$answer = mysql_query($query);
 
			$result = mysql_num_rows($answer);
 
			if( $result < 1 ) // Veirification que l'id email est unique
			{				
				if( $_POST['psw'] == $_POST['psw2'] ) //Passwords identiques
				{						
					$psw = md5($psw);
 
					if( $_POST['email'] == $_POST['email2'] ) //Email identiques
					{
 
						$insert = "INSERT INTO users VALUES('$email','$psw','$lastname','$firstname')";
						mysql_query($insert) or die(mysql_error());
 
						mysql_close();
 
						$userPath = "./users/" . $email; //creation dossier utilisateur
						mkdir ($userPath, 0700); 
 
						for( $nb = 1; $nb < 4; $nb++) //creation dossier playlist 1 2 3
						{
							$userPath = "./users/" . $email . "/playlist" . $nb;
							mkdir ($userPath, 0700);
						}	
						echo "<p>Thank for you subscribtion</p>";			
						$error = 0;
					}
					else
					{
						$error = "Please retype your email";
					}
				}
				else
				{
					$error =  "Please retype your password";
				}
			}
			else
			{
				$error = "Username already exist";
			}
		}
		else
		{
			$error = "Please complete the form";
		}			
 
	}
	else
	{
		$error = "Please complete the form";
	}

Je penses n'avoir rien oublier (mais bon on sait jamais ;)).

Il est impératif que tu ailles te documenter, chercher des cours sur AJAX et son utilisation!

08/01/2008, 22h12
Krustig

Si j'utilise GET c'est pas top vue que l'utilisateur peut transmettre un mot de passe. Niveau sécurité ?

Sinon je comprends pas bien :

Code:

ajaxpage("register.php?firstname=this.firstname.value","login");

this.firstname.value ira cherche ou la valeur car il y a aucun parametre dans l'entete de la fonction.

Merci encore pour ton aide et ta patience :)
13/01/2008, 23h32
psylox

dans ton cas this correspond à document.getElementById("login") car c'est sur cet élément que tu appliques le submit.

Ensuite pour ce qui est du get, vu que tu passes par ajax je ne penses pas que cela change grand chose le get ou le post (mais je dis surment une bétise) peut-etre utilisé post pour etre sur que tes variables ne finissent pas dans l'url