11548 sujets

JavaScript, DOM et API Web HTML5

Bonsoir,

Je cherche désespérément comment masquer un formulaire contenu dans un div si ma requete est ok, le reafficher si il y a un probleme. Actuellement j'arrive à afficher un message (ok ou pas ok).


var requete;

// Gestion de la requète
function identifier()
{
	requete = getRequete();

	if (requete != null)
	{
		var login = document.getElementById("login").value;
		var motPasse = document.getElementById("motPasse").value;
		var corps = "login=" + encodeURIComponent(login) + "&motPasse=" + encodeURIComponent(motPasse);
		try
		{
			requete.open("POST", "connecter.html", true);
			requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			requete.onreadystatechange = onIdentifier;
			requete.send(corps);
			montrerActivite();
		}
		
		catch (exc)
		{
			montrerInactivite();
		}
	}
	else
	{
		setMessage("Impossible de se connecter au serveur");
	}
}

// Si requète ok
function onIdentifier()
{
	if (requete.readyState == 4 && requete.status == 200)
	{
		montrerInactivite();
		setMessage(requete.responseText);
	}
}


Merci pour votre aide Smiley biggrin
Modifié par Hayreon (18 Feb 2010 - 07:08)
Bonsoir,

Je suis toujours planter et ne trouve rien sur gougueule Smiley bawling

Je souhaite simplement masquer un formulaire d'identification uniquement si l'identification du visiteur réussie, sinon on laisse le formulaire.

Merci
Merci pour ta réponse mais ça ne m'aide pas du tout car je voudrai faire cette action sans recharger la page (AJAX). En rechargeant je sais le faire sans problème Smiley langue .

Actuellement j'affiche un message qui me signale que l'identification a réussie (ou échouée) mais le formulaire reste affiché avec ses boutons actifs.

Merci
Modifié par Hayreon (17 Feb 2010 - 18:47)
Eh bien si la connexion est OK il suffit de cacher le formulaire [...].style.display='none'; et prévoir un bouton déconnexion qui permette de le réafficher [...].style.display='block';
C'est bien la mon problème : ou placer le code qui masque la div ??? Car dans tous les cas mon formulaire disparait.

Que ce soit dans la boucle try, catch ou readystats / status ça disparait même si les identifiants sont incorrectes.

Merci
Un petit exemple (avec jQuery pour simplifier le code) :

index.php
<?php 
session_start(); 
 
// Déclaration des champs (vides ou récupération des $_POST)... 
$login = !empty($_POST['login']) ? trim($_POST['login']) : '';  
$password = !empty($_POST['password']) ? trim($_POST['password']) : ''; 
 
$erreurs = array(); 
 
// Si le formulaire a été envoyé, on teste les champs... 
if($_SERVER['REQUEST_METHOD'] == 'POST') { 
    if(empty($login)) { 
        $erreurs[] = 'Le Login doit être renseigné !'; 
    } 
    if(empty($password)) { 
        $erreurs[] = 'Le Password doit être renseigné !'; 
    } 
 
    // Si aucune erreur 
    if(empty($erreurs)) { 
        // traitement simplifié 
        if($login == 'test' && $password == 'test') { 
            $_SESSION['isConnected'] = true; 
        } else { 
            $erreurs[] = 'Login et/ou mot de passe incorrect(s) !'; 
        } 
    } 
} else { 
// Demande de déconnexion 
    if(isset($_GET['disconnect']) && $_GET['disconnect']=='on') { 
        unset($_SESSION['isConnected']); 
    } 
} 
 
$isConnected = !empty($_SESSION['isConnected']) ? $_SESSION['isConnected'] : false; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test formulaire</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
<!-- 
    $(document).ready(function(){ 
        $("div#authentification").prepend('<a href="#" id="disconnect" style="display:none;">Déconnexion</a>'); 
        $("a#disconnect").click(function(){ 
            disconnect(); 
        }); 
        $("form#monform").submit(function(){
            $.post("validerform.php", $(this).serialize(), function(xml) { 
                $("#msg_erreurs").empty(); 
                checkReturn(xml); 
            }); 
            return false; 
        }); 
    }); 
    function checkReturn(xml) { 
        if($("status",xml).text() == "1") {    // Connecté 
            $("form#monform").hide(); 
            $("a#disconnect").show(); 
        } else {    // Erreurs 
            $("message",xml).each(function(id) { 
                message = $("message",xml).get(id); 
                $("#msg_erreurs").prepend('<p class="alert">'+$(message).text()+'</p>'); 
            }); 
        } 
    } 
    function disconnect() { 
        $("form#monform fieldset input").each(function() {
			$(this).val('');
		});
        $("form#monform").show(); 
        $("a#disconnect").hide(); 
    } 
--> 
</script> 
<style type="text/css"> 
.alert { 
    color:#990000; 
} 
</style> 
</head> 
<body> 
<div id="authentification"> 
<?php 
//-------------------------------< Non connecté >----------------------------------* 
if(!$isConnected) { 
?> 
<div id="msg_erreurs"> 
<?php 
// erreur(s) à afficher ? 
if(!empty($erreurs)) { 
    foreach($erreurs as $erreur) { 
        echo '<p class="alert">'.$erreur."</p>\n"; 
    } 
} 
?> 
</div> 
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" id="monform" method="post"> 
    <fieldset> 
        <legend>Identification</legend> 
        <p> 
            <label for="login">Login : </label> 
            <input type="text" id="login" name="login" value="<?php echo htmlspecialchars($login); ?>" /> 
        </p> 
        <p> 
            <label for="password">Password : </label> 
            <input type="password" id="password" name="password" value="<?php echo htmlspecialchars($password); ?>" /> 
        </p> 
    </fieldset> 
    <p> 
        <input type="submit" value="Envoyer" /> 
    </p> 
</form> 
<?php  
} else {  
//-------------------------------< Connecté >----------------------------------* 
?> 
<a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>?disconnect=on">Déconnexion</a>
<?php } ?> 
</div> 
</body> 
</html>

validerform.php
<?php 
// Configuration 
$dbhost = "localhost"; 
$dbuser = "root"; 
$dbpass = ""; 
$dbname = "test"; 
 
$status_code = 0; 
 
// Génération du XML
header('Content-type: text/xml; charset=utf-8'); 
header("Cache-Control: no-cache"); 
 
echo '<?xml version="1.0"?'.">\n"; 
echo "<response>\n"; 
 
// Récupération des variables POST 
$login = !empty($_POST['login']) ? trim($_POST['login']) : ''; 
$password = !empty($_POST['password']) ? md5(trim($_POST['password'])) : ''; 
 
// Vérifications 
if(empty($password)) { 
    echo "\t<message>Le Password doit être renseigné !</message>\n"; 
    $status_code = 2; 
} 
if(empty($login)) { 
    echo "\t<message>Le Login doit être renseigné !</message>\n"; 
    $status_code = 2; 
} 
 
if($status_code == 0) { 
    $dbconn = mysql_connect($dbhost,$dbuser,$dbpass); 
    mysql_select_db($dbname,$dbconn); 
     
    $auth = mysql_query(sprintf("SELECT login FROM users WHERE login='%s' AND password='%s'", 
    mysql_real_escape_string($login), 
    mysql_real_escape_string($password)), $dbconn); 
 
    if(mysql_num_rows($auth) == 0) { 
        echo "\t<message>Login et/ou Password incorrect(s) :</message>\n"; 
        $status_code = 2; 
    } else $status_code = 1; 
} 
echo "\t<status>$status_code</status>\n"; 
echo "</response>"; 
?>

Modifié par Heyoan (17 Feb 2010 - 23:57)
Bonjour,

Je viens d'essayer rapidement, il semble que ce soit ça ^^

Je sent que je vais devoir me pencher sur jQuery moi Smiley sweatdrop

Merci beaucoup pour ton aide Smiley smile
Bonsoir,

Problème résolu, j'ai enfin trouver le script que je voulais Smiley biggrin

Une démo et le script sont dispo ici

Encore merci pour votre aide Smiley ravi