Affichage de valeurs

Résolu/Fermé

Yazho Messages postés 85 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 - Modifié le 24 mars 2021 à 22:11
Yazho Messages postés 85 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 - 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;
}

A voir également:

Affichage de valeurs
Affichage double ecran - Guide
Comment agrandir l'affichage de l'écran - Guide
Windows 11 affichage classique - Guide
Excel liste de valeurs - Guide
Problème affichage fenêtre windows 10 - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694
24 mars 2021 à 22:14

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 dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2
Modifié le 24 mars 2021 à 23:50

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 dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2
24 mars 2021 à 23:51

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 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694
25 mars 2021 à 00:02

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 dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2 > jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024
25 mars 2021 à 00:24

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

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 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694 > Yazho Messages postés 85 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022
25 mars 2021 à 12:11

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

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 dimanche 24 mars 2019 Statut Membre Dernière intervention 14 septembre 2022 2
25 mars 2021 à 17:41

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 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694
25 mars 2021 à 17:44

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

jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694 > jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024
25 mars 2021 à 17:49

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>

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

adele

Première connexion

Obtenir un affichage décimal sur ma Casio fx 92

Les paramètres d'affichage NVIDIA ne sont pas

Agrandir la taille d'affichage de toute l'interface OUTLOOK 2010