Utiliser des images avec un "post" dans un fichier PHP

jojorealisateur Messages postés 203 Date d'inscription Statut Membre Dernière intervention -
jojorealisateur Messages postés 203 Date d'inscription Statut Membre Dernière intervention - 30 déc. 2019 à 19:49

Bonjour à tous !

Je me lance dans la programmation en PHP/HTML et je suis maintenant confronté à un problème.

Avant de vous l'expliquer, je vais d'abord décrire ce à quoi j'aimerai arriver, ce sera plus simple pour comprendre... :)

Donc, j'ai créé un formulaire en HTML et j'utilise des images qui représentent chacune un jour de la semaine. Elles sont normalement en orange, et quand on clique dessus (c'est-à-dire quand elles sont sélectionnées) elles deviennent rouges. Quand l'utilisateur clique sur "Valider", le formulaire est envoyé (send) à un autre document php qui doit ajouter toutes les valeurs saisies dans une base de données MySQL.

Mon problème, c'est que je n'arrive pas à comprendre comment dire

Si l'image "Lu" est sélectionnée, alors tu ajoutes un X dans la colonne "Lu" de la BDD

au fichier php...

Voilà, j'espère que quelqu'un pourra m'aider...

Merci d'avance pour votre aide !

Jojorealisateur

Afficher la suite

A voir également:

Utiliser des images avec un "post" dans un fichier PHP
Comment réduire la taille d'un fichier - Guide
Comment ouvrir un fichier epub ? - Guide
Fichier bin - Guide
Fichier rar - Guide
Ouvrir un fichier .dat - Guide

5 réponses

Réponse 1 / 5

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

Les checkboxes
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/checkbox

Pour les masquer
https://www.w3schools.com/jsref/prop_style_display.asp

Exemple pour les cocher via du js

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>TEST</title>
  </head>
  <body>
   
    Choix 1 <input type="checkbox" id="chk1" name="chk_img1"  value=""> <button onclick="coche(1);">Click !</button>
    Choix 2 <input type="checkbox" id="chk2" name="chk_img2" value=""><button onclick="coche(2);">Click !</button>
    <script>
   function coche(i){
    document.getElementById('chk'+i).checked = true;
   }
    </script>
  </body>
</html>

jojorealisateur Messages postés 203 Date d'inscription Statut Membre Dernière intervention 18

Ok, merci beaucoup ! Je vais tester ça et je vous dit...

jojorealisateur Messages postés 203 Date d'inscription Statut Membre Dernière intervention 18

Juste une question... Dans votre exemple, comment puis-je rajouter les images et faire en sorte que quand on clique dessus, elles changent de couleur ?
Jusqu'à maintenant, je faisais comme ceci :

<!DOCTYPE html>
<html><body><div class="col">
            <div class="row text-center">
      <div class="col-sm text-center">
        <input type="image" src="./images/Lu.png" alt="..." class="rounded" id="img_1" onclick="changeImage_1()"><p>Lundi</p>
        </div>
      <div class="col-sm text-center">
        <input type="image" src="./images/Ma.png" alt="..." class="rounded" id="img_2" onclick="changeImage_2()"><p>Mardi</p>
</div>
      <div class="col-sm text-center">
        <input type="image" src="./images/Me.png" alt="..." class="rounded" id="img_3" onclick="changeImage_3()"><p>Mercredi</p>
       </div>
             <div class="col-sm text-center">
        <input type="image" src="./images/Je.png" alt="..." class="rounded" id="img_4" onclick="changeImage_4()"><p>Jeudi</p>
        </div>
              <div class="col-sm text-center">
        <input type="image" src="./images/Ve.png" alt="..." class="rounded" id="img_5" onclick="changeImage_5()"><p>Vendredi</p>
        </div>
              <div class="col-sm text-center">
        <input type="image" src="./images/Sa.png" alt="..." class="rounded" id="img_6" onclick="changeImage_6()"><p>Samedi</p>
        </div>
              <div class="col-sm text-center">
        <input type="image" src="./images/Di.png" alt="..." class="rounded" id="img_7" onclick="changeImage_7()"><p>Dimanche</p>
</div>
  </div>
  </div>
<script language="javascript">
    function changeImage_1() {

        if (document.getElementById("img_1").src == "./images/Lu.png") 
        {
            document.getElementById("img_1").src = "./images/Lu_CO.png";
        }
        else 
        {
            document.getElementById("img_1").src = "./images/Lu.png";
        }
    }    function changeImage_2() {

        if (document.getElementById("img_2").src == "./images/Ma.png") 
        {
            document.getElementById("img_2").src = "./images/Ma_CO.png";
        }
        else 
        {
            document.getElementById("img_2").src = "./images/Ma.png";
        }
    }
        function changeImage_3() {

        if (document.getElementById("img_3").src == "./images/Me.png") 
        {
            document.getElementById("img_3").src = "./images/Me_CO.png";
        }
        else 
        {
            document.getElementById("img_3").src = "./images/Me.png";
        }
    }
        function changeImage_4() {

        if (document.getElementById("img_4").src == "./images/Je.png") 
        {
            document.getElementById("img_4").src = "./images/Je_CO.png";
        }
        else 
        {
            document.getElementById("img_4").src = "./images/Je.png";
        }
    }
            function changeImage_5() {

        if (document.getElementById("img_5").src == "./images/Ve.png") 
        {
            document.getElementById("img_5").src = "./images/Ve_CO.png";
        }
        else 
        {
            document.getElementById("img_5").src = "./images/Ve.png";
        }
    }
            function changeImage_6() {

        if (document.getElementById("img_6").src == "./images/Sa.png") 
        {
            document.getElementById("img_6").src = "./images/Sa_CO.png";
        }
        else 
        {
            document.getElementById("img_6").src = "./images/Sa.png";
        }
    }
            function changeImage_7() {

        if (document.getElementById("img_7").src == "./images/Di.png") 
        {
            document.getElementById("img_7").src = "./images/Di_CO.png";
        }
        else 
        {
            document.getElementById("img_7").src = "./images/Di.png";
        }
    }
</script>
</body></html>

Comment puis-je utiliser le code en javascript pour changer l'image et l'intégrer dans le code que vous m'avez donné ?

Merci d'avance !

Réponse 2 / 5

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

Bonjour,

Si tu fais le traitement du formulaire via un submit, tu ne pourras pas récupérer directement les infos concernant les images.
Le plus simple serait d'associer des checkbox cachées à chacune...

Réponse 3 / 5

jojorealisateur Messages postés 203 Date d'inscription Statut Membre Dernière intervention 18

Merci beaucoup ! Comment puis-je faire pour mettre des checkbox ?

Réponse 4 / 5

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

    <div class="row text-center">
      <div class="col-sm text-center">
        <img src="./images/Lu.png" 
          alt="..." 
          class="rounded" 
          id="img_1" 
          onclick="changeImage(this);"
          data-img1 = "./images/Lu.png"
          data-img2 = "./images/Lu_CO.png"
          data-chkid = "1">
        <p>Lundi</p>
        <input type="checkbox" id="chk1" value="img1"> 
      </div>
      <div class="col-sm text-center">
      <img src="./images/Ma.png" 
          alt="..." 
          class="rounded" 
          id="img_2" 
          onclick="changeImage(this);"
          data-img1 = "./images/Lu.png"
          data-img2 = "./images/Ma_CO.png"
          data-chkid = "2">
         <input type="checkbox" id="chk2" value="img2">
      </div>
      
      <!-- etc... -->

    </div>

        
    <script>
      /*
       - Une seule fonction pour TOUTES les images
       - Utilisation des data-attributes pour savoir quoi mettre
       - Utilisation de l'écriture ternaire au lieu de faire des if/else
      */
      function changeImage(elm) {
      
            var img1 = elm.getAttribute('data-img1');
            var img2 = elm.getAttribute('data-img2');
            var chkid = elm.getAttribute('data-chkid');
            var chkb = document.getElementById('chk'+chkid);
            elm.src = elm.src == img1 ? img2 : img1;
            chkb.checked = chkb.checked ==true ? false : true;
            
            console.log(img1,img2,chkid,elm.src,document.getElementById('chk'+chkid).checked);//pour debuguer dans la console
            
       }
    </script>

jojorealisateur Messages postés 203 Date d'inscription Statut Membre Dernière intervention 18

Re,

Je viens d'essayer votre code, et il y a bien des checkbox, merci !

Par contre, l'image ne se modifie pas, est-ce normal ?

Merci beaucoup pour toute votre aide !

Jojorealisateur

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

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

Je suppose que tu bosses en "local" sur ton ordi sans passer par un serveur ou un logiciel pour en émuler un.
Dans ce cas, l'url utilisée pour tes images dans le src est retrancscrite en un truc genre c:\tonsite\tesimages...
Et donc il n'arrive pas à comparer.
Donc, soit tu utilises l'url absolue pour tes images (à mettre dans les data-attributes) soit tu t'installes un laragon ou xampp ou wamp ou uWamp ... pour émuler un serveur.

jojorealisateur Messages postés 203 Date d'inscription Statut Membre Dernière intervention 18

Je suppose que tu bosses en "local" sur ton ordi sans passer par un serveur ou un logiciel pour en émuler un.
Non, je suis sur un serveur Linux hébergé par PlanetHoster...

Je vais tester pour l'url absolue, merci ! :)

Votre réponse