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

Fermé
jojorealisateur Messages postés 203 Date d'inscription jeudi 9 mars 2017 Statut Membre Dernière intervention 8 juillet 2020 - 28 déc. 2019 à 17:55
jojorealisateur Messages postés 203 Date d'inscription jeudi 9 mars 2017 Statut Membre Dernière intervention 8 juillet 2020 - 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
A voir également:

5 réponses

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
Modifié le 28 déc. 2019 à 21:40
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>




1
jojorealisateur Messages postés 203 Date d'inscription jeudi 9 mars 2017 Statut Membre Dernière intervention 8 juillet 2020 18
28 déc. 2019 à 22:22
Ok, merci beaucoup ! Je vais tester ça et je vous dit...
0
jojorealisateur Messages postés 203 Date d'inscription jeudi 9 mars 2017 Statut Membre Dernière intervention 8 juillet 2020 18
28 déc. 2019 à 23:00
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 !
0
jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
28 déc. 2019 à 18:17
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...


0
jojorealisateur Messages postés 203 Date d'inscription jeudi 9 mars 2017 Statut Membre Dernière intervention 8 juillet 2020 18
28 déc. 2019 à 21:34
Merci beaucoup ! Comment puis-je faire pour mettre des checkbox ?
0
jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
29 déc. 2019 à 04:07
    <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>

0
jojorealisateur Messages postés 203 Date d'inscription jeudi 9 mars 2017 Statut Membre Dernière intervention 8 juillet 2020 18
29 déc. 2019 à 16:33
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
0

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

Posez votre question
jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
30 déc. 2019 à 08:36
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.

0
jojorealisateur Messages postés 203 Date d'inscription jeudi 9 mars 2017 Statut Membre Dernière intervention 8 juillet 2020 18
Modifié le 30 déc. 2019 à 19:50
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 ! :)
0