Affichage de valeurs [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 à tous j'ai un problème je n'arrive pas a afficher les valeurs de mes boutons en PHP je m'explique j'ai modélisé une classe avec des chaises qui sont en fait des boutons et j'aimerai que quand j'appuie sur une chaise le nom de la chaise s'affiche a droite j'aimerai qu'on puisse ne faire qu'une chaise par une chaise c'est a dire que si on appuie sur une autre chaise ca va remplacer son nom merci beaucoup de votre aide 
<?php
include("fonctions.php");
?>

<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 href="CSS/Reserver.css" rel="stylesheet" media="all" type="text/css">
    </head>
    
 <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">

    </div>
    <nav>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">À Propos</a></li>
        <li><a href="#">Contacts</a></li>
  
    </nav>
  
</header>
    <body class="background-image" style="background-image: url(image/fond.png)">
    <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">
    <a href="#" class="btn">COMMANDER</a>
    <div class="grid2">
    <button class="chaise"  name="chaise"  title="A1"></button>
    <button class="chaise" name="chaise"   title="A2"></button>
    <button class="chaise" name="chaise"  title="A3"></button>
    <button class="chaise" name="chaise"  title="A4"></button>
    <button class="chaise"name="chaise"  title="A5"></button>
    <button class="chaise"name="chaise"   title="A6"></button>
    <button class="chaise"name="chaise"   title="B1"></button>
    <button class="chaise"name="chaise"   title="B2"></button>
    <button class="chaise"name="chaise"   title="B3"></button>
    <button class="chaise"name="chaise"   title="B4"></button>
    <button class="chaise" name="chaise"  title="B5"></button>
    <button class="chaise" name="chaise"   title="B6"></button>
    <button  class="chaise" name="chaise"   title="C1"></button>
    <button  class="chaise" name="chaise"  title="C2"></button>
    <button class="chaise" name="chaise" title="C3"></button>
    <button  class="chaise" name="chaise"  title="C4"></button>
    <button  class="chaise"  name="chaise" title="C5"></button>
    <button  class="chaise" name="chaise"  title="C6"></button>
    <button  class="chaise" name="chaise" title="D1"></button>
    <button  class="chaise"name="chaise" title="D2"></button>
    <button  class="chaise" name="chaise" title="D3"></button>
    <button  class="chaise" name="chaise" title="D4"></button>
    <button  class="chaise"name="chaise"  title="D5"></button>
    <button  class="chaise"name="chaise" title="D6"></button>
    </div>
  </form>
 </body>

</html>
CSS
@import url(https://fonts.googleapis.com/css?family=Raleway%29;
/*-------------
  General
-------------*/
.scroll{
  color: white;
  text-decoration: none;

}
 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: normal 16px sans-serif;
  color: #555;
  max-zoom: 0%;

}

ul, nav {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.9;
}

a:hover {
  opacity: 1;
}

a.btn {
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: #5c5c5c;
  font-weight: 800;
  text-align: center;
}

hr {
  width: 150px;
  height: 2px;
  background-color: #555;
  position : relative;
  left:13%;
}
.hr2 {
    width: 150px;
    height: 2px;
    background-color: #555;
    position: relative;
    right:7%;
  }
  

@media (max-width: 1000px) {
  section {
    padding: 100px 50px;
  }
}
@media (max-width: 600px) {
  section {
    padding: 80px 30px;
  }
}
section h3.title {
  color: #404a4f;
  text-transform: capitalize;
  font: bold 32px "Open Sans", sans-serif;
  margin-bottom: 35px;
  text-align: center;
}

section p {
  max-width: 800px;
  text-align: center;
  margin-bottom: 35px;
  padding: 0 20px;
  line-height: 2;
}

ul.grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*-------------
  Header
-------------*/
header{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 10;
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #fff;
 padding: 35px 100px 0;
}

header h2{
 font-family: 'Quicksand', sans-serif;
 margin-left: 10px;
}

header nav{
 display: flex;
}

header nav li{
 margin: 0 15px;
  position:relative;
  right:255px;
  bottom:5px;
}

.logo
 {
  position:absolute;
  width: 250px;
  height: 250px;
  right:90%;
 }
  header h1 {
    position: relative;
    font-family: "Quicksand", sans-serif;
    left:7%;
    text-shadow:  white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px;color:#fff;
    
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    z-index: -1;
  }
  
  /*--------------------
  RESERVER PAGE
---------------------*/

body nav{
  top:20%;
  position:relative;
  left:15%
  
}
.classe{
  position:relative;
  left:10%;
}
.commande{
  position:relative;
  top:150px;
  right:20%;
}
.chaise{
  z-index:1;
  height:135px;
  width:115px;
  background:url("../image/chaise.png");
  background-size: 70%;
  background-repeat: no-repeat;
  margin:-20px;
  padding:0px;
  text-decoration: none;
  border: none; 
}
.chaise:hover{
  z-index:1000;
  height:135px;
  width:115px;
  background:url("../image/chaise_2.png");
  background-size: 75%;
  background-repeat: no-repeat;
  padding:0px;
  margin:-20px;
  text-decoration: none;
  border: none; 
  
}

.grid2 {

  position:absolute;
  bottom:170px;
  left:29%;
  display: grid;
  grid-template-columns: 90px 100px 165px 90px 90px 90px;
}

.btn{
 text-decoration: none;
 color: inherit;
 cursor: pointer;
 opacity: 0.9;
  position:absolute;
  left:81%;
  bottom:37%;
 color: #fff;
 border-radius: 4px;
 text-transform: uppercase;
 background-color: #5c5c5c;
 font-weight: 800px;
 text-align: center;
  padding: 20px 46px;

}

.btn:hover{
 opacity: 1;
}

.commande2{

  position:relative;
  left:80%;
  bottom:49%;

  font: bold 20px "Open Sans", sans-serif;
}

4 réponses

Réponse 1 / 4
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
 3 386
Tu n'as pas repris le code que je t'ai donné ??
A la place des "button" je t'avais mis des input "radio" ... ainsi qu"un bouton "submit" pour valider ton formulaire .....

Je t'avais également corrigé ton html ... car tu as placé ton header en dehors du body .. ce qui n'est pas correct ...

Donc... au lieu de créer une nouvelle discussion... tu aurais mieux faire de répondre dans la précédente en expliquant éventuellement ce qui ne te convenait pas !



Réponse 2 / 4
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
J’avais fait une réponse mais je crois qu’elle ne s’est pas posté et j’ai donc recréé une discussion pour voir si d’autre personne avait une solution non pas parce que la tienne ne me convenait pas mais pour avoir plusieurs versions:)
Réponse 3 / 4
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
Et je disais donc dans ma réponse que ton code était très très complet mais je dirais un peu trop pour mon niveau parce que j’avais franchement pas compris grand chose parce que mon grid avait disparu mes chaises aussi XD mais je pense que ton code était bien plus propre et formelle merci beaucoup pour ce que tu as fait eheh après je veux bien qu’on reprenne ça si tu veux bien
Afficher les 16 commentaires
Signaler
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
 3 386 >
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
donc, tu remplacer par .place_texte (avec le point devant )

NB: Quand tu postes du code, il faut préciser le langage ( ici php ) afin d'avoir la coloration syntaxique et la numérotation des lignes.
Explications à lire entièrement disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Signaler
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
Oui voilà je remplace par .place_texte mais dans ton programme javascript il y a .chaise mais je n'ai plus de .chaise dans mon css c'est normal ?
car pour l'instant ça ne marche pas vraiment c'est toujours ton autre code qui marche c'est à dire quand j'appuie sur le bouton commander
Signaler
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
 3 386 >
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
hein ????

Tu remplaces .. juste ... le mot dans la ligne de code 
document.querySelector('element_ou_afficher').innerHTML(valChaise);
Signaler
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
ahh! il faut que je mette genre 
document.querySelector('<p class=".place_text">Ton siège</p>').innerHTML(valChaise);
Signaler
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
 3 386 >
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
Je t'ai dit :
Remplacer : element_ou_afficher
par : .place_text 

document.querySelector('.place_text').innerHTML(valChaise);
Réponse 4 / 4
Messages postés
77
Date d'inscription
dimanche 24 mars 2019
Statut
Membre
Dernière intervention
2 avril 2021
oui voilà c'est ce que j'ai fait au début mais rien ne s'affiche bon si tu dis que ça devrait marcher c'est peut être le placement de mon texte qui n'est pas bon
Signaler
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
 3 386
On en revient toujours à la même chose .... montre nous ce que tu as fais ....
Signaler
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
 3 386 >
Messages postés
32045
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 avril 2021
J'ai vu le souci

là ça marche 
<?php

if(isset($_POST['commander'])) {
  $choix = !empty($_POST['chaise']) ? $_POST['chaise'] : "";
}

?>
<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;
}


    </style>
  </head>
  <script>
         buttons = document.querySelectorAll(".chaise");
    for (i = 0; i < buttons.length; i++) {
        element = buttons[i];
        element.addEventListener("click", function(){
          var valChaise = this.value;
          document.querySelector('.place_texte').innerHTML(valChaise);
        });
    }
    </script>
  <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
       $rangs = array('A','B','C','D');
       foreach($rangs as $R){
         for($i=1;$i<=6;$i++){
          echo '<label><input id="radio_'.$R . $i.'"" type="radio" class="chaise" name="chaise"   id="" title="'.$R . $i .'" value="'.$R . $i .'"><img class="chaise" src="image/chaise.png"></label>';
          echo '<label for="radio_'.$R . $i.'">'.$R . $i.'</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 choisis : " +valChaise;
        });
    }
    </script>
  </body>
 </html>
Signaler
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
OUIIIIII!!!!! super merci beaucoup t'as vraiment pris le temps de m'expliquer je t'en remercie mais je vais pas te lacher j'ai encore plein de questions ahah ...
Répondre Posez votre question