Faire disparaitre un texte [Résolu]

Signaler
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
-
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
-
Bonjour j'ai une question je suis en train de créer un site de réservation de chaise et je voulais savoir comment faire pour que quand le client clique sur le bouton "commander" et qu'il n'a pas sélectionné de chaise il y ait un message qui s'affiche genre "veuillez sélectionner une chaise" mais que quand le client sélectionne une chaise le message s'enlève (mon réel problème c'est d'enlever le code quand il sélectionne une chaise) voilà mon code
<?php
    include("fonctions.php");
    ?>
    <?php
//-----------------------------------------//
//affichage des erreurs PHP
//-----------------------------------------//
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
 
//-----------------------------------------//
//connexion à la bdd
//-----------------------------------------//
connectMaBase();
 
//préparation de la requête et des variables
$places = mysql_query( "SELECT * FROM salle ORDER BY id_place ASC") or die(mysql_error());
session_start();
 
//-----------------------------------------//
// Récupération des variables AVANT de les utiliser
//-----------------------------------------//
$id_client = !empty($_SESSION["id_client"]) ? $_SESSION["id_client"] : NULL;
 
 
echo "<p class='bienvenue'>Bienvenue :".$_SESSION["prenom"]."</p> ";
echo "<p class='msg'>choississez maitenant une place !</p>";
//-----------------------------------------//
//traitement de la commande
//-----------------------------------------//
 
if(isset($_POST['commander'])) {
 
 
  $id_place = !empty($_POST['chaise']) ? $_POST['chaise'] : "";
 
  // ON MET A JOUR LE STATUT DE LA PLACE CHOISIE :
  mysql_query("UPDATE salle SET reserver=1 WHERE id_place ='$id_place'") or die(mysql_error());
 
   // ON REGARDE SI LE CLIENT AVAIT DEJA UNE RESERVATION
   $sql_location = mysql_query ("SELECT * FROM locations WHERE id_client ='$id_client'") or die(mysql_error());
 
  // SI LE CLIENT AVAIT DEJA UNE PLACE .. ON MET A JOUR LA TABLE LOCATION ET ON REMET A ZERO L'ANCIENNE CHAISE QUI ETAIT SELECTIONNEE
  $location = mysql_fetch_array($sql_location);
  if(!empty($location)){
    $old_id_place = $location['id_place'];
     mysql_query ("UPDATE salle SET reserver=0 WHERE id_place = '$old_id_place'") or die(mysql_error());
     // POUR METTRE à 1 LA NOUVELLE CHAISE
     mysql_query( "UPDATE locations SET id_place='$id_place' WHERE id_client ='$id_client'") or die(mysql_error());
     $query2 = mysql_query("SELECT * FROM locations WHERE id_client ='$id_client'")or die('ERREUR SQL ! <br>'.$sql.'<br>'.mysql_error()); 
     $resultatdelarequete2 = mysql_fetch_array($query2);
     $_SESSION['place'] = $resultatdelarequete2['id_place']; 
     $_SESSION['date'] = $resultatdelarequete2['date'];
     header("Location: commander.php");
     exit;
   }else{
     // SINON.. ON AJOUTE UNE LIGNE DANS LA TABLE LCOATION
     mysql_query ("INSERT INTO locations (id_place,id_client,date)
             VALUES('$id_place','$id_client',now())") or die(mysql_error());
 
   }  
 
 
}
  mysql_close();
?>
<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>Réservation</title>
    <link rel="stylesheet" href="CSS/Reserver.css">
    <link href="CSS/Reserver.css" rel="stylesheet" media="all" type="text/css">
     
    <style>
      /* HIDE RADIO */
      [type=radio] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
 
      /* IMAGE STYLES */
      [type=radio] + img {
        cursor: pointer;
      }
 
      /* CHECKED STYLES */
      [type=radio]:checked + img {
        outline: 2px solid #f00;
      }
 
      input{
        cursor:not-allowed;
        border-color:blue;
      }
 
 
    </style>
  </head>
  <body class="background-image" style="background-image: url(image/fond.png)">
    <header>
      <img class="logo" src="image/logo.png" ></img>
      <h2><a href="index.html">Cassin Seat</a></h2>
      <hr>
      <h1 class="titre2" >RESERVATION </h1><br>
      <div class="hr2">
      <hr>
      </div>
      <nav>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">À Propos</a></li>
          <li><a href="#">Contacts</a></li>
      </nav>
     
    </header>
    <nav>
      <img class="classe"  src="image/classe.png" align="center"></img>
      <img class="commande"  src="image/commande.png" align="right"></img>
    </nav>
     
    <form method="post" action="">
      <button type="submit" class="btn" name="commander">COMMANDER</button>
      <div class="grid2_radios-chaises">
       <?php
       //on boucle sur le résultat de la recherche
       if(!empty($places)){
        while ($R = mysql_fetch_array($places)){
          $reserver = $R['reserver'];
          $dejaReservee = !empty($reserver) ? "dejareservee" : "";
          echo '<label>
                  <input id="radio_'.$R['id_place'].'"" type="radio" class="chaise '.$dejaReservee.'" name="chaise"   id="" title="'.$R['id_place'] .'" value="'.$R['id_place'] .'">
                  <img class="chaise" src="image/chaise.png">
                </label>
                <label for="radio_'.$R['id_place'].'">'.$R['id_place'].'</label>';
        }
       }
 
       ?>
      </div>
    </form>
   <p class='place_texte'> </p>
 
    <script type="text/javascript">
     buttons = document.querySelectorAll(".chaise");
    for (i = 0; i < buttons.length; i++) {
        element = buttons[i];
        element.addEventListener("click", function(event){
        var targetElement = event.target || event.srcElement;
        console.log(targetElement);
          var valChaise = targetElement.value;
          document.querySelector('.place_texte').innerHTML=" Vous avez choisi le Seat: " +valChaise;
        });
        }
     
    </script>
  </body>
 </html>

2 réponses

Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
3 382
Bonjour,

La selection d'une chaise se fait, dans ton code, via du Javascript.
C'est donc dans ce langage qu'il faut faire ce que tu demandes

Déjà, il faut intercepter le "submit" de ton formulaire
pour ça :
Au niveau de ton code html, sur ton form, tu peux intercepter l'event via un onsubmit
<form method="post" action="" onsubmit="verif()"  id="myForm">

puis, dans le code au niveau du javascript

 <script type="text/javascript">
    var chaise = null;
    var  buttons = document.querySelectorAll(".chaise");
    for (i = 0; i < buttons.length; i++) {
        element = buttons[i];
        element.addEventListener("click", function(event){
        var targetElement = event.target || event.srcElement;
        console.log(targetElement);
          var valChaise = targetElement.value;
          chaise = valChaise;
          document.querySelector('.place_texte').innerHTML=" Vous avez choisi le Seat: " +valChaise;
        });
        }
     
function verif()
  event.preventDefault(); //permet de ne pas déclencher le submit
  //si aucune chaise selectionnée
  if(chaise == null){
     alert("veuillez sélectionner une chaise");
  }else{
     // si il y a une chaise de selectionnée ...
    
    //on envoi le formulaire :
    document.getElementById("myForm").submit();
  }

}
    </script>
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021

hello merci pour ta reponse mais tu commences a bien me connaître j'ai un problème... le message ne s'affiche pas pourtant j'ai bien suivi tes indications
<?php
    include("fonctions.php");
    ?>
    <?php
//-----------------------------------------//
//affichage des erreurs PHP
//-----------------------------------------//
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//-----------------------------------------//
//connexion à la bdd
//-----------------------------------------//
connectMaBase();

//préparation de la requête et des variables
$places = mysql_query( "SELECT * FROM salle ORDER BY id_place ASC") or die(mysql_error());
session_start();

//-----------------------------------------//
// Récupération des variables AVANT de les utiliser
//-----------------------------------------//
$id_client = !empty($_SESSION["id_client"]) ? $_SESSION["id_client"] : NULL;


echo "<p class='bienvenue'>Bienvenue :".$_SESSION["prenom"]."</p> ";
echo "<p class='msg'>choississez maitenant une place !</p>";
//-----------------------------------------//
//traitement de la commande
//-----------------------------------------//

if(isset($_POST['commander'])) {


  $id_place = !empty($_POST['chaise']) ? $_POST['chaise'] : "";

  // ON MET A JOUR LE STATUT DE LA PLACE CHOISIE :
  mysql_query("UPDATE salle SET reserver=1 WHERE id_place ='$id_place'") or die(mysql_error());

   // ON REGARDE SI LE CLIENT AVAIT DEJA UNE RESERVATION
   $sql_location = mysql_query ("SELECT * FROM locations WHERE id_client ='$id_client'") or die(mysql_error());

  // SI LE CLIENT AVAIT DEJA UNE PLACE .. ON MET A JOUR LA TABLE LOCATION ET ON REMET A ZERO L'ANCIENNE CHAISE QUI ETAIT SELECTIONNEE
  $location = mysql_fetch_array($sql_location);
  if(!empty($location)){
    $old_id_place = $location['id_place'];
     mysql_query ("UPDATE salle SET reserver=0 WHERE id_place = '$old_id_place'") or die(mysql_error());
     // POUR METTRE à 1 LA NOUVELLE CHAISE
     mysql_query( "UPDATE locations SET id_place='$id_place' WHERE id_client ='$id_client'") or die(mysql_error());
     $query2 = mysql_query("SELECT * FROM locations WHERE id_client ='$id_client'")or die('ERREUR SQL ! <br>'.$sql.'<br>'.mysql_error());  
     $resultatdelarequete2 = mysql_fetch_array($query2);
     $_SESSION['place'] = $resultatdelarequete2['id_place'];  
     $_SESSION['date'] = $resultatdelarequete2['date'];
     header("Location: commander.php"); 
     exit; 
   }else{
     // SINON.. ON AJOUTE UNE LIGNE DANS LA TABLE LCOATION
     mysql_query ("INSERT INTO locations (id_place,id_client,date) 
             VALUES('$id_place','$id_client',now())") or die(mysql_error());
             header("Location: commander.php"); 
             

   }      


} mysql_close();

  
?>
<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>Réservation</title>
    <link rel="stylesheet" href="CSS/Reserver.css">
    <link href="CSS/Reserver.css" rel="stylesheet" media="all" type="text/css">
    
    <style>
      /* HIDE RADIO */
      [type=radio] { 
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }

      /* IMAGE STYLES */
      [type=radio] + img {
        cursor: pointer;
      }

      /* CHECKED STYLES */
      [type=radio]:checked + img {
        outline: 2px solid #f00;
      }

      .dejareservee{
        cursor:not-allowed;
        border-color:blue;
      }


    </style>
  </head>
  <body class="background-image" style="background-image: url(image/fond.png)">
    <header>
      <img class="logo" src="image/logo.png" ></img>
      <h2><a href="index.html">Cassin Seat</a></h2>
      <hr>
      <h1 class="titre2" >RESERVATION </h1><br>
      <div class="hr2">
      <hr>
      </div>
      <nav>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">À Propos</a></li>
          <li><a href="#">Contacts</a></li>
      </nav>
    
    </header>
    <nav>
      <img class="classe"  src="image/classe.png" align="center"></img>
      <img class="commande"  src="image/commande.png" align="right"></img>
    </nav>
    
    <form method="post" action="" onsubmit="verif()"  id="myForm">
      <button type="submit" class="btn" name="commander">RESERVER</button>
      <div class="grid2_radios-chaises">
       <?php 
       //on boucle sur le résultat de la recherche
       if(!empty($places)){
        while ($R = mysql_fetch_array($places)){
          $reserver = $R['reserver'];
          $dejaReservee = !empty($reserver) ? "dejareservee" : "";
          echo '<label class="chaise '.$dejaReservee.'">
                  <input id="radio_'.$R['id_place'].'"" type="radio"  name="chaise"   id="" title="'.$R['id_place'] .'" value="'.$R['id_place'] .'">
                  <img class="chaise" class="chaise '.$dejaReservee.'" src="image/chaise.png">
                </label>
                <label for="radio_'.$R['id_place'].'">'.$R['id_place'].'</label>'; 
        }
       }

       ?>
  
      </div>
    </form>
   <p class='place_texte'> </p>

    <script type="text/javascript">
    
     buttons = document.querySelectorAll(".chaise");
    for (i = 0; i < buttons.length; i++) {
        element = buttons[i];
        element.addEventListener("click", function(event){
        var targetElement = event.target || event.srcElement;
        console.log(targetElement);
          var valChaise = targetElement.value;
          document.querySelector('.place_texte').innerHTML=" Vous avez choisi le Seat: " +valChaise;
        });
        }


        var chaise = null;
      var  buttons = document.querySelectorAll(".chaise");
      for (i = 0; i < buttons.length; i++) {
        element = buttons[i];
        element.addEventListener("click", function(event){
        var targetElement = event.target || event.srcElement;
        console.log(targetElement);
          var valChaise = targetElement.value;
          chaise = valChaise;
          document.querySelector('.place_texte').innerHTML=" Vous avez choisi le Seat: " +valChaise;
        });
        }
     
  function verif()
  event.preventDefault(); //permet de ne pas déclencher le submit
  //si aucune chaise selectionnée
  if(chaise == null){
     alert("<p class='place_texte'>veuillez sélectionner une chaise");
  }else{
     // si il y a une chaise de selectionnée ...
    
    //on envoi le formulaire :
    document.getElementById("myForm").submit();
  }

}
    </script>
  </body>
 </html>
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
>
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021

ahah.... j'avais pas repéré j'avoue mais c'est vrai qu'en réglant ce problème de doublon le code ne marche toujours pas '-' pourtant quand j'enleve le javascript tout marche bien mais quand je l'insère il n'y a même plus marqué la place sélectionnée, ça doit être une petite erreur de ma part.....mais j'avoue que je l'a trouve pas
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
3 382 >
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021

TU dois certainement avoir une erreur dans la console JS de ton navigateur

Essaye ça :
 <?php
 // Démarrage des sessions ( à mettre AVNAT TOUT AUTRE CODE !! )
session_start();
//-----------------------------------------//
//affichage des erreurs PHP
//-----------------------------------------//
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//fonctions
 include("fonctions.php");

//-----------------------------------------//
//connexion à la bdd
//-----------------------------------------//
connectMaBase();

//préparation de la requête et des variables
$places = mysql_query( "SELECT * FROM salle ORDER BY id_place ASC") or die(mysql_error());


//-----------------------------------------//
// Récupération des variables AVANT de les utiliser
//-----------------------------------------//
$id_client = !empty($_SESSION["id_client"]) ? $_SESSION["id_client"] : NULL;


echo "<p class='bienvenue'>Bienvenue :".$_SESSION["prenom"]."</p> ";
echo "<p class='msg'>choississez maitenant une place !</p>";
//-----------------------------------------//
//traitement de la commande
//-----------------------------------------//

if(isset($_POST['commander'])) {


  $id_place = !empty($_POST['chaise']) ? $_POST['chaise'] : "";

  // ON MET A JOUR LE STATUT DE LA PLACE CHOISIE :
  mysql_query("UPDATE salle SET reserver=1 WHERE id_place ='$id_place'") or die(mysql_error());

   // ON REGARDE SI LE CLIENT AVAIT DEJA UNE RESERVATION
   $sql_location = mysql_query ("SELECT * FROM locations WHERE id_client ='$id_client'") or die(mysql_error());

  // SI LE CLIENT AVAIT DEJA UNE PLACE .. ON MET A JOUR LA TABLE LOCATION ET ON REMET A ZERO L'ANCIENNE CHAISE QUI ETAIT SELECTIONNEE
  $location = mysql_fetch_array($sql_location);
  if(!empty($location)){
    $old_id_place = $location['id_place'];
     mysql_query ("UPDATE salle SET reserver=0 WHERE id_place = '$old_id_place'") or die(mysql_error());
     // POUR METTRE à 1 LA NOUVELLE CHAISE
     mysql_query( "UPDATE locations SET id_place='$id_place' WHERE id_client ='$id_client'") or die(mysql_error());
     $query2 = mysql_query("SELECT * FROM locations WHERE id_client ='$id_client'")or die('ERREUR SQL ! <br>'.$sql.'<br>'.mysql_error());  
     $resultatdelarequete2 = mysql_fetch_array($query2);
     $_SESSION['place'] = $resultatdelarequete2['id_place'];  
     $_SESSION['date'] = $resultatdelarequete2['date'];
     header("Location: commander.php"); 
     exit; 
   }else{
     // SINON.. ON AJOUTE UNE LIGNE DANS LA TABLE LCOATION
     mysql_query ("INSERT INTO locations (id_place,id_client,date) 
             VALUES('$id_place','$id_client',now())") or die(mysql_error());
             header("Location: commander.php"); 
             

   }      


} mysql_close();

  
?>
<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>Réservation</title>
    <link rel="stylesheet" href="CSS/Reserver.css">
    <link href="CSS/Reserver.css" rel="stylesheet" media="all" type="text/css">
    
    <style>
      /* HIDE RADIO */
      [type=radio] { 
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }

      /* IMAGE STYLES */
      [type=radio] + img {
        cursor: pointer;
      }

      /* CHECKED STYLES */
      [type=radio]:checked + img {
        outline: 2px solid #f00;
      }

      .dejareservee{
        cursor:not-allowed;
        border-color:blue;
      }


    </style>
  </head>
  <body class="background-image" style="background-image: url(image/fond.png)">
    <header>
      <img class="logo" src="image/logo.png" ></img>
      <h2><a href="index.html">Cassin Seat</a></h2>
      <hr>
      <h1 class="titre2" >RESERVATION </h1><br>
      <div class="hr2">
      <hr>
      </div>
      <nav>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">À Propos</a></li>
          <li><a href="#">Contacts</a></li>
      </nav>
    
    </header>
    <nav>
      <img class="classe"  src="image/classe.png" align="center"></img>
      <img class="commande"  src="image/commande.png" align="right"></img>
    </nav>
    
    <form method="post" action="" onsubmit="verif()"  id="myForm">
      <button type="submit" class="btn" name="commander">RESERVER</button>
      <div class="grid2_radios-chaises">
       <?php 
       //on boucle sur le résultat de la recherche
       if(!empty($places)){
        while ($R = mysql_fetch_array($places)){
          $reserver = $R['reserver'];
          $dejaReservee = !empty($reserver) ? "dejareservee" : "";
          echo '<label class="chaise '.$dejaReservee.'">
                  <input id="radio_'.$R['id_place'].'"" type="radio"  name="chaise"   id="" title="'.$R['id_place'] .'" value="'.$R['id_place'] .'">
                  <img class="chaise" class="chaise '.$dejaReservee.'" src="image/chaise.png">
                </label>
                <label for="radio_'.$R['id_place'].'">'.$R['id_place'].'</label>'; 
        }
       }

       ?>
  
      </div>
    </form>
   <p class='place_texte'> </p>

    <script type="text/javascript">
      var chaise = null;
      var  buttons = document.querySelectorAll(".chaise");
      for (i = 0; i < buttons.length; i++) {
        element = buttons[i];
        element.addEventListener("click", function(event){
        var targetElement = event.target || event.srcElement;
        console.log(targetElement);
          var valChaise = targetElement.value;
          chaise = valChaise;
          document.querySelector('.place_texte').innerHTML=" Vous avez choisi le Seat: " +valChaise;
        });
        }
     
    function verif(){
      event.preventDefault(); //permet de ne pas déclencher le submit
      //si aucune chaise selectionnée
      if(chaise == null){
         alert("<p class='place_texte'>veuillez sélectionner une chaise");
      }else{
         // si il y a une chaise de selectionnée ...
        
        //on envoi le formulaire :
        document.getElementById("myForm").submit();
      }

    }
    </script>
  </body>
 </html>
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
>
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021

Ah oui super idée le popup merci beaucoup ça marche eheh !
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
>
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021

mince en fait y'a un autre petit problème quand on sélectionne une chaise est qu'on appuie sur réserver rien ne se passe on n'est pas dirigé sur l'autre page et la location n'est pas enregistré dans la BDD et c'est quand je retire event.preventDefault(); que ça marche mais après avoir cliqué sur le "ok" du popup on est redirigé sur l'autre page
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
>
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021

j'ai trouvé la solution et je la met ici si ça peut en interesser certain
    <script type="text/javascript">
      var chaise = null;
      var  buttons = document.querySelectorAll(".chaise");
      for (i = 0; i < buttons.length; i++) {
        element = buttons[i];
        element.addEventListener("click", function(event){
        var targetElement = event.target || event.srcElement;
        console.log(targetElement);
          var valChaise = targetElement.value;
          chaise = valChaise;
          document.querySelector('.place_texte').innerHTML=" Vous avez choisi le Seat: " +valChaise;
        });
        }
     
    function verif(){
  
      //si aucune chaise selectionnée
      if(chaise == null){
         event.preventDefault(); //permet de ne pas déclencher le submit
         alert("<p class='place_texte'>veuillez sélectionner une chaise");
      }else{
         // si il y a une chaise de selectionnée ...
        
        //on envoi le formulaire :
        document.getElementById("myForm").submit();
      }

    }
    </script>