Faire disparaitre un texte

Résolu/Fermé
Yazho Messages postés 87 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 - 28 mars 2021 à 15:16
Yazho Messages postés 87 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 - 29 mars 2021 à 20:53
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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
28 mars 2021 à 23:25
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>
0
Yazho Messages postés 87 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2
29 mars 2021 à 00:58
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>
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
29 mars 2021 à 10:31
Heu.. tu lis un peu le code que je te donne ou tu copie colle bêtement ?
Tu ne vois pas un ' "doublon"
0
Yazho Messages postés 87 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
29 mars 2021 à 18:44
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
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > Yazho Messages postés 87 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022
29 mars 2021 à 19:02
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>
0
Yazho Messages postés 87 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
29 mars 2021 à 19:13
Ah oui super idée le popup merci beaucoup ça marche eheh !
0
Yazho Messages postés 87 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
Modifié le 29 mars 2021 à 19:46
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
0