Affichage de valeurs

Résolu

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention -
Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention - 25 mars 2021 à 17:51

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

Afficher la suite

A voir également:

Affichage de valeurs
Affichage double ecran - Guide
Windows 11 affichage classique - Guide
Problème affichage fenêtre windows 10 - Guide
Excel liste de valeurs - Guide
Affichage youtube trop grand ✓ - Forum YouTube

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention 2

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

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention 2

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Pour remettre des chaises sur le code que je t'ai donné il suffit d'appliquer le CSS non pas sur des button mets sur les input de type radio que je t'ai mis.
Pour le reste il n'y a rien de complexe c'est le b a-ba du fonctionnement de PHP.

Mais si tu veux conserver tes button dans ce cas le plus simple serait de passer par du JavaScript...

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention 2 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

D’accord merci beaucoup je verrais ça demain et je te tiendrais au courant de mes avancés merci beaucoup pour ta patience !

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention 2 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

hello bon je pense que je suis vraiment nul XD mais j'arrive même pas a rajouter les images j'ai tout essayé dans le CSS et même dans le input j'ai essayé avec src ou même en changeant le type radio par image mais rien n'y fait ... si tu as la solution je suis preneur;)

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention

https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons/17541916

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention 2 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

hey merci beaucoup j'ai enfin reussi a afficher mes chaises !!! maintenant j'ai une autre question le nom de la chaise est affiché en haut a droite de l'image où est ce que je peux mettre une class pour modifier le positionnement du texte dans le css stp merciii encore !

Réponse 4 / 4

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention 2

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

On en revient toujours à la même chose .... montre nous ce que tu as fais ....

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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>

Yazho Messages postés 85 Date d'inscription Statut Membre Dernière intervention 2 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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 ...

Discussions similaires

Les images ne s'affichent plus

impossible de voir les photos et videos sur une conversation messenger

Probleme d'affichage google chrome

Problème d'affichage d'une page web.

Problème d'affichage/bugs graphiques sur Chrome sur Android

Votre réponse

Discussions similaires