Afficher une div ou pas

Bonjour,

Il s'agit d'un problème lié à une première connexion
J'ai une div dans laquelle l'utilisateur doit saisir son nom, son prénom, son adresse mail et la confirmer et son mot de passe et le confirmer.
- si tout se passe bien je n'affiche plus la div mais juste un message
- si les adresses mail ne sont pas bonne ou qu'elles ne sont pas les mêmes ou que les mots de passe ne sont pas identique je voudrai afficher la div de nouveau pour une ressaisie.

le code de la première connexion
<?php
include("connect.php");
include("fonctionsphp.php");
//------------------------
//***PREMIERE CONNEXION***
//------------------------
$message = "";
$message1 = "";
if (isset($_POST['nom']))		$nom = $_POST['nom'];
else $nom = "";
if (isset($_POST['prenom']))		$prenom = $_POST['prenom'];
else $prenom = "";
if (isset($_POST['mail']))		$mail = $_POST['mail'];
else $mail = "";
//** controle de l'adresse mail 
if (!empty($_POST['mail'])){
	$adresse_mail=htmlentities($_POST['mail']);
	if(!VerifierAdresseMail($adresse_mail)){
  		$message = "L'adresse internet n'est pas valide";
	}
}
if (isset($_POST['mailbis']))		$mailbis = $_POST['mailbis'];
else $mailbis = "";
//** controle de l'adresse mailbis 
if (!empty($_POST['mailbis'])){
	$adresse_mail=htmlentities($_POST['mailbis']);
	if(!VerifierAdresseMail($adresse_mail)){
  		$message = "L'adresse internet n'est pas valide";
	}
}
if (isset($_POST['pass']))		$pass = $_POST['pass'];
else $pass = "";
if (isset($_POST['passbis']))		$passbis = $_POST['passbis'];
else $passbis = "";
if ((!empty($pass)) && (!empty($passbis))){
	if ($pass <> $passbis){
		$message = "Les mots de passe ne correspondent pas. Merci de recommencer.";
	}
} 
if (isset($_POST['saisie']))		$saisie = $_POST['saisie'];
else $saisie = "";
if (isset($_POST['Enregistrer'])){
	if (!empty($message)){
		$saisie="non";
	}
	else if ((empty($nom)) OR (empty($prenom))){
		$message = "Merci de renseigner toutes les cases.";
		$saisie="non";
	}
	else {
		//virifie si le mot de passe est déjà enregistré
		$requete = "SELECT * FROM membres WHERE nom LIKE '%$nom%' AND prenom LIKE '%$prenom%' AND password = ''";
		$resultat = $mysqli->query($requete) or die ('Erreur '.$requete.' '.$mysqli->error());
		$row = mysqli_fetch_array($resultat);
		if (mysqli_num_rows($resultat) > 0){
			$user_id = $row['id'];
			$_SESSION['utilisateur'] = $prenom;
			$_SESSION['id_utilisateur'] = $row['id'];
			$password = sha1($pass);
			//enregistre le mot de passe et le numéro de téléphone
			$requete = "UPDATE membres SET mail = '$mail', password = '$password'  WHERE id = $user_id";
			$resultat = $mysqli->query($requete) or die ('Erreur '.$requete.' '.$mysqli->error());
			$saisie = "ok";
			$message1 = "Votre Mail et votre mot de passe sont bien enregistrés.";
		}
		else { $message1 = "Vous êtes déjà enregistré(e).<br />Connectez-vous ci-dessous.";
		}
	}
}
?>
<p class="spanpremcon">
	<span onclick="javascript:montrer('divMotOublie');"> Mot de passe oublié ?</span>
	<span style="margin-left:3em;"> Changer mon adresse mail et/ou mon mot de passe</span><br /><br />
	<span onclick="javascript:montrer('divFirstConnect');"><b>Première connexion ?</b></span>
</p>
<!---********************---!>
<!--- PREMIERE CONNEXION ---!>
<!---********************---!>

<div id="divFirstConnect">
	<p class="ptext">En tant que membre du jumelage votre nom et votre prénom ont été enregistrés. 
	Pour accéder aux pages vous devez saisir votre adresse mail et un mot de passe.</p>
	<FORM NAME="log" ACTION="index.php?page=connexion" METHOD="POST">
	    <table style="margin: 0 auto;">
		<tr class="trHeight"><td class="tdAlignRight">Nom  </td><td class="tdAlignLeft"> <input type="text" value="<?php echo $nom;?>" name="nom" id="nom" ></td></tr>
		<tr class="trHeight"><td class="tdAlignRight">Prénom  </td><td class="tdAlignLeft"> <input type="text" value="<?php echo $prenom;?>" name="prenom" id="prenom" ></td></tr>
		<tr class="trHeight"><td class="tdAlignRight">Adresse mail  </td><td class="tdAlignLeft"> <input type="text" value="<?php echo $mail;?>" name="mail" id="mail1" style="width:17em;"></td></tr>		
		<tr class="trHeight"><td class="tdAlignRight">Confirmez l'adresse mail  </td> <td class="tdAlignLeft"> <input type="text" value="<?php echo $mailbis;?>" name="mailbis" id="mail2" style="width:17em;"></td></tr>
		<tr class="trHeight"><td class="tdAlignRight">Mot de passe  </td><td class="tdAlignLeft"> <input type="password" value="<?php echo $pass;?>" name="pass" id="password1" ></td></tr>
		<tr class="trHeight"><td class="tdAlignRight">Confirmez le mot de passe  </td><td class="tdAlignLeft"> <input type="password" value="<?php echo $passbis;?>" name="passbis" id="password2" ></td></tr>
		<tr class="trHeight"><td colspan="2" style="text-align:center";><input type="submit" name="Enregistrer" value="Enregistrer" style="width:7em; cursor:pointer;" /> <input type="button" name="Close" value="Fermer" style="width:7em; cursor:pointer;" onclick="javascript:cacher('divFirstConnect')" /> </td></tr>
	    </table>
		<input type="hidden" name="saisie" value="<?php echo $saisie;?>" >
		<p> <?php echo $message;?> </p>
	</FORM>
</div>


le fichier style dont le code doit être encore amélioré
/* première connexion */
.spanpremcon { cursor:pointer; text-align:center; font-size:0.9em; color:blue;}
.ptext { width:65%; margin:auto; background-color:yellow; }
#divFirstConnect { width:100%; height:auto; float:left; display:none; }
.trHeight { height:2.5em; }
.tdAlignRight { text-align:right; }
.tdAlignLeft { text-align:left; }


Tout se passe bien si tout est OK.
Par contre si il y une erreur de saisie, la div ne s'affiche pas.
J'avais essayé d'utiliser une variable $saisie pour afficher ou pas la div mais ça marche pas. donc je l'ai enlevé de la partie html !!

Merci d'avance

Configuration: Windows / Chrome 74.0.3729.131

9 réponses

  1. Modérateur
    Bonjour,

    Plusieurs remarques concernant ton code:

    Déjà, pour la récupération des variables, Au lieu de faire des IF/ELSE standard.. je t'invite à regarder l'écriture ternaire
    Donc au lieu de :
    if (isset($_POST['saisie']))		$saisie = $_POST['saisie'];
    else $saisie = "";
    

    Faire
    $saisie = isset($_POST['saisie']) ? $_POST['saisie'] : "";
    


    Ensuite, pour savoir si tu dois afficher la div ou non, il te suffirait d'ajouter une variable que tu définies à TRUE ou FALSE
    et ensuite faire un IF dessus
    1. J'ai vraiment du mal !! J'ai refait un exemple simple mais il ne fonctionne pas correctement.
      ça marche si le résultat est ok mais la div ne s'affiche pas si le résultat est faux

      <span style="cursor:pointer" onclick="javascript:montrer('madiv');"><b>Tester vos connaissances ?</b></span> <br />
      
      <?php
      $afficher = "";
      $total = isset($_POST['total']) ? $_POST['total'] : "";
      
      if (isset($_POST['valider1'])){
      	if ($total == 5){
      		$afficher = true;
      	}
      	else {
      		$afficher = false;
      	}
      }
      
      if ($afficher == false){
      	echo '<div id="madiv" >
      		<FORM NAME="log" ACTION="index.php?page=connexion" METHOD="POST">
      			indiquer le résultat de 2 + 3 <input type="text" name="total" value="" ><br />
      			<input type="submit" name="valider1" value="valider"/>
      		</FORM>
      	</div>';
      } 
      else {
      	echo "le résultat est correct";
      }
      ?>
      


      le fichier style.css
      #madiv {display:none; }
      


      le fichier script.js
      function montrer(id){
      	document.getElementById(id).style.display = "inline";
      }
      
      1. Modérateur
        Par défaut, faut initialiser ta variable à False ... sinon ... c'est normal...
        $afficher = false ; // au lieu de $afficher = "";
        
    2. J'ai fait la modification mais ça ne change rien, la div ne se réaffiche pas si le résultat est maucais !!
      1. Modérateur
        <span style="cursor:pointer" onclick="javascript:montrer('madiv');"><b>Tester vos connaissances ?</b></span> <br />
        
        <?php
        
        $total = isset($_POST['total']) ? $_POST['total'] : "";
        $afficher = $total == 5 ? true : false;
        
        if ($afficher == false){
        	echo '<div id="madiv" >
        		<FORM NAME="log" ACTION="" METHOD="POST">
        			indiquer le résultat de 2 + 3 <input type="text" name="total" value="" ><br />
        			<input type="submit" name="valider1" value="valider"/>
        		</FORM>
        	</div>';
        } else {
        	echo "le résultat est correct";
        }
        ?>
        
    3. Je viens de tester mais ça marche pas. La div est cachée que le résultat soit "true" ou "false" !!
      1. Modérateur
        pourtant.. si tu colles ce bout de code dans un fichier test.php .... et que tu le testes...il fonctionne parfaitement !
    4. J'ai copié le code dans un fichier test.
      ce qu'il y a dans les fichiers :
      fichier index.php
      <!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>toto</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <script type="text/javascript" src="scripts/scripts.js"></script />
      </head>
      <body style="font-family:verdana">
      
      <span style="cursor:pointer" onclick="javascript:montrer('madiv');"><b>Tester vos connaissances ?</b></span> <br />
      
      <?php
      $total = isset($_POST['total']) ? $_POST['total'] : "";
      $afficher = $total == 5 ? true : false;
      
      if ($afficher == false){
      	echo '<div id="madiv" >
      		<FORM NAME="log" ACTION="" METHOD="POST">
      			indiquer le résultat de 2 + 3 <input type="text" name="total" value="" ><br />
      			<input type="submit" name="valider1" value="valider"/>
      		</FORM>
      	</div>';
      } else {
      	echo "le résultat est correct";
      }
      ?>
      </body>
      </html>
      

      dans le fichier script
      function montrer(id){
      alert(id);
      	document.getElementById(id).style.display = "inline";
      }
      function cacher(id){
      	document.getElementById(id).style.display = "none";
      }
      

      dans le fichier css
      #madiv { display:none;}
      


      résultat sur les tests :
      - au chargement de la page index la div n'apparaît pas
      - au clic qui appelle la fonction la div apparaît
      - si je rentre une valeur différente de 5 et que je valide , la div disparaît
      - si je rentre la valeur 5 j'ai le message mais la div disparaît

      j'ai supprimé
      #madiv { display:none;}
      

      résultat :
      - la div est visible au chargement de la page index.
      - si je saisi un chiffre différent de 5 la div reste affichée
      - si je saisi 5 la div disparaît et j'ai le message

      Le résultat est presque là.
      1. Modérateur
        Donc ton souci se situe soit au niveau de tes CSS ... soit au niveau de ton Javascript... mais en aucun cas au code PHP.
    5. et pourtant le javascript et le css sont bien ce que j'ai !!!!!
      1. Modérateur
        Je ne dis pas le contraire.... mais là .. tu as posté une question dans le forum PHP.
        Le code PHP fonctionne.....
        Donc tes éventuels soucis viennent de tes css et/ou de tes JS ... ce n'est donc pas dans ce forum qu'ils seront traités.

        Je te rappelle également que nous ne savons rien du contenu de tes fichiers css et js
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="scripts/scripts.js"></script />
        

        Il ne nous est donc pas possible de débugger de notre côté....
    6. Bonjour,
      j'avais abandonné qq temps.
      le code ci-dessous fonctionne
      <?php
      // Traitement
      $is_correct = false;
      $total = isset($_POST['total']) ? $_POST['total'] : "";
       
      if (isset($_POST['valider1'])){
      	$is_correct = ($total == 5); // true ou false
      }
      ?>
      <span style="cursor:pointer" onclick="montrer('madiv1');"><b>Tester vos connaissances ?</b></span> <br />
      <?php
      // Affichage
      if ( $is_correct )
      {
      	echo $total." : le résultat est correct";
      } 
      ?>
      	<div id="madiv1" style="display:<?php echo ( $is_correct || $total == '' )? 'none' : 'block'; ?>">
      		<form name="log" action="index.php?page=connexion" method="post">
      			indiquer le résultat de 2 + 3 <input type="text" name="total" value="" ><br />
      			<input type="submit" name="valider1" value="valider"/>
      		</form>
      	</div>
      <?php
      if( !$is_correct && $total != ''){
      	echo $total." : ce résultat faux...";
      }
      ?>
      

      Dans mon projet j'ai une page dédiée à une "première connexion" et à "mot de passe oublié".
      Au clic sur "mot de passe oublié" j'affiche une div qui contient un formulaire avec un input de type text où l'utilisateur doit saisir son adresse mail pour lui envoyer un nouveau mot de passe.
      <?php
      include("fonctionsphp.php");
      // Traitement
      $saisi = isset($_POST['saisi']) ? $_POST['saisi'] : "";
      $is_correct = false;
      $mail = isset($_POST['mail']) ? $_POST['mail'] : "";
      if (!empty($_POST['mail'])){
      	$adresse_mail=htmlentities($_POST['mail']);
      	if(!VerifierAdresseMail($adresse_mail)){
      		$is_correct = false;
      	}
      	else { $saisi = 'ok'; 
      		$is_correct = true;
      	}
      }
       
      if (isset($_POST['valider2'])){
      	$is_correct = ($mail == 'ok'); // true ou false
      }
      ?>
      <span style="cursor:pointer" onclick="montrer('madiv');"><b>Mot de passe oublié ?</b></span> <br />
      <?php
      // Affichage
      if ( $is_correct )
      {
      	echo $mail." : adresse correcte";
      } 
      ?>
      	<div id="madiv" style="display:<?php echo ( $is_correct || $mail == '' )? 'none' : 'block'; ?>">
      		<form name="log" action="index.php?page=connexion" method="post">
      			Saisiez votre adresse mail <input type="text" name="mail" value="<?php echo $mail;?>" ><br />
      			<input type="submit" name="valider2" value="valider"/>
      		</form>
      	</div>
      <input type="text" name="saisi" value="<?php echo $saisi; ?>">
      <?php
      if( !$is_correct && $mail != ''){
      	echo $mail." : adresse incorrecte!";
      }
      ?>
      

      le code fonction
      //vérifie l'adresse mail
      function VerifierAdresseMail($adresse_mail){
         $Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,5}$#';
         if(preg_match($Syntaxe,$adresse_mail))
            return true;
         else 
           return false;
      }
      

      la fonction script
      function montrer(id){
      	document.getElementById(id).style.display = "inline";
      }
      

      le code css
      #madiv { display :none; }
      


      j'ai essayé un tas de chose mais rien à faire !!!
      Merci de votre aide
      1. Modérateur
        Commence déjà pour nous expliquer CLAIREMENT :
        - Quel est le comportement attendu ?
        - Quel est le comportement observé ?

        Et puis..... Ta question concerne le PHP ou le JAVASCRIPT ???

        Si javascript...
        1 - Tu n'es pas dans le bon forum
        2 - Il faut nous donner le code COMPLET de ta page
        3 - Il faut nous indiquer si tu as des erreurs affichées dans la CONSOLE ( et nous en montrer une capture écran )

        Et puis... comme je te l'ai déjà demandé dans mon message précédent :
        Il nous faudrait le contenu complet de tes fichiers :
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="scripts/scripts.js"></script />
        
    7. Je vais essayer d'être précis.
      Lorsque l'utilisateur a oublié son mot de passe il clique sur "Mot de passe oublié". Lors de ce clic j'affiche une div qui contient un formulaire avec un input de type text et un bouton "envoyer".
      Lorsque l'utilisateur clique sur le bouton envoyer je teste l'adresse mail saisie.
      PUIS
      Si l'adresse est correcte je cache la div et un j'affiche un message .
      Si l'adresse n'est pas valide, je laisse la div affichée avec un message d'erreur
      Les fonctions script et php fonctionnent
      Pour moi c'est bien un problème d'écriture PHP.
      voici le contenu de mes fichiers
      Fichier index.php
      <!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>toto</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <script type="text/javascript" src="scripts/scripts.js"></script />
      </head>
      <body style="font-family:verdana">
      <?php
      include("fonctionsphp.php");
      // Traitement
      $saisi = isset($_POST['saisi']) ? $_POST['saisi'] : "";
      $is_correct = false;
      $mail = isset($_POST['mail']) ? $_POST['mail'] : "";
      if (!empty($_POST['mail'])){
      	$adresse_mail=htmlentities($_POST['mail']);
      	if(!VerifierAdresseMail($adresse_mail)){
      		$is_correct = false;
      	}
      	else { $saisi = 'ok'; 
      		$is_correct = true;
      	}
      }
       
      if (isset($_POST['valider2'])){
      	$is_correct = ($mail == 'ok'); // true ou false
      }
      ?>
      <span style="cursor:pointer" onclick="montrer('madiv');"><b>Mot de passe oublié ?</b></span> <br />
      <?php
      // Affichage
      if ( $is_correct )
      {
      	echo $mail." : adresse correcte";
      } 
      ?>
      	<div id="madiv" style="display:<?php echo ( $is_correct || $mail == '' )? 'none' : 'block'; ?>">
      		<form name="log" action="index.php?page=connexion" method="post">
      			Saisiez votre adresse mail <input type="text" name="mail" value="<?php echo $mail;?>" ><br />
      			<input type="submit" name="valider2" value="valider"/>
      		</form>
      	</div>
      <input type="text" name="saisi" value="<?php echo $saisi; ?>">
      <?php
      if( !$is_correct && $mail != ''){
      	echo $mail." : adresse incorrecte!";
      }
      ?>
      
      </body>
      </html>
      


      le fichier scipt
      function montrer(id){
      	document.getElementById(id).style.display = "inline";
      }
      function cacher(id){
      	document.getElementById(id).style.display = "none";
      }
      

      le fichier des fonctions php
      <?php
      //vérifie l'adresse mail
      function VerifierAdresseMail($adresse_mail){
         $Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,5}$#';
         if(preg_match($Syntaxe,$adresse_mail))
            return true;
         else 
           return false;
      }
      ?>
      

      le fichier style.css
      #madiv { display :none; }
      

      les images écran :
      écran 1 = le texte sur lequel l'utilisateur doit cliquer
      écran 2 = l'écran qui affiche la div où l'utilisateur doit saisir son mail.
      écran 3 = quand l'utilisateur à cliquer sur le bouton. Ici l'adresse est correcte mais la div reste visible et le message n'est pas celui qui devrait être affiché
      écran 4 = l'adresse est incorrecte, la div reste affichée et le message est correcte.

      C'est l'image "écran 3" qui est incorrecte car la div ne devrait pas être affichée et le message n'est pas celui attendu.
      Je ne peux pas joindre les images écran. Il faut être inscrit. ce que je vais faire.
      1. Modérateur
        <?php
        //ON PLACE LA MAXIMUM DE PHP EN DEHORS DU HTML....
        // DONC :
        
        //Affichage des erreurs PHP
        error_reporting(E_ALL);
        ini_set('display_errors', TRUE);
        ini_set('display_startup_errors', TRUE);
        
        include("fonctionsphp.php");
        
        
        
        function VerifierAdresseMail($adresse_mail){
           $Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,5}$#';
           if(preg_match($Syntaxe,$adresse_mail))
              return true;
           else 
             return false;
        }
        
        // Traitement
        $is_correct = false;
        
        $saisi = isset($_POST['saisi']) ? $_POST['saisi'] : "";
        $mail = !empty($_POST['mail']) ? $_POST['mail'] : "";
        
        if ($mail){
          $adresse_mail = htmlentities($mail);
          echo "adresse_mail";
          $is_correct = !VerifierAdresseMail($adresse_mail) ? false : true;
          $saisi =  $is_correct == true ?  'ok' : '';
        }
         
        if (isset($_POST['valider2'])){
        	$is_correct = ($saisi == 'ok'); // true ou false
        }
        
        
        
        
        //MAINTENANT ON PEUT METTRE DU HTML :
        ?>
        <!DOCTYPE html>
        <html>
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>toto</title>
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script type="text/javascript" src="scripts/scripts.js"></script>
          </head>
          <body style="font-family:verdana">
            <span style="cursor:pointer" onclick="montrer('madiv');">
              <b>Mot de passe oublié ?</b>
            </span>
            <br />
            <?php
            // Affichage
            if ( $is_correct ) {
              echo $mail." : adresse correcte";
            } 
            ?>
              <div id="madiv" style="display:<?php echo ( $is_correct )? 'none' : 'block'; ?>">
                <form name="log" action="" method="post">
                  Saisiez votre adresse mail 
                  <input type="text" name="mail" value="<?php echo $mail;?>" ><br />
                  <input type="text" name="saisi" value="<?php echo $saisi; ?>">
                  <input type="submit" name="valider2" value="valider"/>
                </form>
              </div>
            
            <?php
            if( !$is_correct && $mail != ''){
              echo $mail." : adresse incorrecte!";
            }
            ?>
        
          </body>
        </html>
        
    8. Merci pour la réponse et pour ton aide
      Au chargement de la page la div est affichée. Ce que je ne souhaite pas.
      Alors j'ai mis :
      <div id="madiv" style="display:<?php echo ( $is_correct || $mail == '' )? 'none' : 'block'; ?>">
      

      au lieu de :
      <div id="madiv" style="display:<?php echo ( $is_correct )? 'none' : 'block'; ?>">
      

      Maintenant tout marche comme je souhaite.
      Je vais m'appuyer sur ce code pour la "première connexion", "changer l'adresse mail" et "changer le mot de passe"