Validation de présence en cliquant sur des photos

Par Nouchi35, il y a 9 ans

Javascript

Bonjour à tous,
je cherche actuellement à mettre en place un système de validation de présence simplifié pour les utilisateurs.
Pour cela j'aimerai qu'à partir d'icones ou photos , l'utilisateur n'ai plus qu'à cliquer sur sa photo et valider pour dire qu'il sera présent.
Tout cela pour éviter un long formulaire

J'ai vaguement mis cela en place : http://www.cdbf.fr/ConvocationsU113.php

Mais je trouve pas ça très simple et beau.

Je ne sais pas trop comment le faire.

Quelq'un aurait-il une piste ?

Merci d'avance.

16 réponses

Ekim Kael, il y a 9 ans

salut
ton URL n'est plus valide
si tu as une image ou une autre url qui pourrais nous montrer un aperçu ce serai bien

Ekim Kael, il y a 9 ans

Okay
donc en gros que l'utilisateur n'est plus à cliquer sur le bouton " Présent " pour valider ça présence?

Nouchi35, il y a 9 ans

Oui voila, en gros si tu veux j'ai les photos en bleu, vert ou rouge.
J'ai envie que quand le joueur clique ça change de couleur et sa le reste quelque soit la personne qui va sur le site.

Après seul souci, j'ai peur que nimporte qui clique sur nimporte qu'elle photo et du coup les informations seraient éronné.

Mais en tout cas j'aimerai simplifié l'utilisation aux utilisateurs.

Ekim Kael, il y a 9 ans

vu que tu utilises bootstrap je me dis que ce serait mieux que tu mettes ça dans un tableau
je fais des tests et je te balance ce que j'ai fait

Nouchi35, il y a 9 ans

Ok merci c'est sympa de ta part =)

Ekim Kael, il y a 9 ans
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <style> .users{ display: flex; flex-direction: row; align-content: space-between; } .users img{ margin: 0 5px; } </style> </head> <body> <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-lg-offset-2"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="center">Convocations U11 3</h2> </div> <div class="panel-body"> <table class="table table-striped"> <thead> <tr> <th>Joueurs</th> <th>Date</th> <th>Validation</th> </tr> </thead> <tbody> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Nouchi35</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>James R.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> <tr> <th> <div class="users"> <img class="img-circle" src="http://placehold.it/50x50" alt=""> <h4>Leonel M.</h4> </div> </th> <th> 10/09/2016</th> <th> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> <button type="button" class="btn btn-danger">Absent</button> <button type="button" class="btn btn-success">Présent</button> </div> </th> </tr> </tbody> </table> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </body> </html>
Ekim Kael, il y a 9 ans

tu me dis si c'est un peu plus simple comme ça et si ça te va.
Bon apres tu va devoir mettre de l'ajax ou ta requête PHP de validation pour que ça fonctionne en supprimant les 2 boutons et en remplaçant par celui dont l'utilisateur aura cliqué

Nouchi35, il y a 9 ans

Ah génial l'idée !
juste j'aimerai que quand l'utiisateur coche présent sa photo change en vert tout seul.
Parceque jusqu'a maintenant je le faisais manuellement :$

As-tu une idée ?

Merci d'avance.

Ekim Kael, il y a 9 ans

genre un filtre couleur vert se pose sur la photo?

Nouchi35, il y a 9 ans

Non enfaite si tu veux j'ai les 2 photos vert et bleu et je changeais la source de l'image quand ils confirmaient.
Mais du coup j'aimerai qu'au lieu que ce soit moi et bien dès qu'il clique sur présent et bient l'image "Nouchi-vert.jpg" remplace l'image "Nouchi-bleu.jpg" par exemple.

Un peu comme quand tu as sur des sites " célib - en couple" à cocher et lorsque tu coche ton statut change tout seul.

Tu vois ce que je veux dire ?

Ekim Kael, il y a 9 ans

non une image m'aiderais bien ou un lien

Ekim Kael, il y a 9 ans

laisse l'exemple je te reprends apres je vais me déplacer

Nouchi35, il y a 9 ans

Enfaite par exemple sur youtube quand tu mets j'aime ça rajoute 1 j'aime.

Par exemple y'a 250 j'aime et tu clique sur j'aime ça met automatiquement 251.

Bah j'aimerai que ça face pareil avec les images.
Si tu mets présent l'image devient vert et si tu mets absent l'image devient rouge.

En gros ça remplace <img src="Nouchi bleu.jpg"> par <img src="Nouchi vert.jpg">.

Sa je le faisais manuellement mais j'aimerai que ça devienne automatique

Ekim Kael, il y a 9 ans

okay je comprends

Lartak, il y a 9 ans

Bonjour.

Enfaite par exemple sur youtube quand tu mets j'aime ça rajoute 1 j'aime.

Tu pourrais par exemple justement te baser sur Tutoriel Vidéo PHP » Like / Dislike.