Mettre un toogle sur "on" ou "off" en fonction d'une variabl [Résolu]

Signaler
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
-
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
-
Bonjour,

Je suis en train de programmer un fichier en php, mais je suis bloqué à une étape : j'ai mis un bouton "toggle" dans la partie html de mon fichier et j'aimerais pouvoir le mettre sur "on" ou sur "off" en fonction de la valeur d'une variable (qui provient de ma base de données MySQL).

Voici mon code (tiré de https://bootsnipp.com/snippets/j6k6b) :
<div class="switchToggle">
    <input type="checkbox" id="switch1">
    <label for="switch1">Toggle</label>
</div>


Comment faire pour dire
si ma variable est égale à 0, le bouton est sur "off", sinon, il est sur "on".
?

Merci beaucoup !

Jojorealisateur

5 réponses

Messages postés
3604
Date d'inscription
jeudi 16 juin 2005
Statut
Membre
Dernière intervention
3 juillet 2020
957
Bonjour,

Pour pré-cocher une checkbox, il faut lui rajouter l'attribut checked="checked".
Du coup en php, il suffit de mettre
<?php if ($taVariable) echo ' checked="checked" ';?>
, au bon endroit dans le <input> bien sûr.

Xavier
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
9
Ok, merci beaucoup ! Juste une autre question : si je veux après, via un bouton "valider" enregistrer le "on" ou le "off" dans ma base de données, je fais comment ?
Je dois utiliser un "post" ?

Merci !
Salut,
quelques précisions car votre logique est étrange:
un input est un élément de formulaire.
PHP peut récupérer la valeur comme cela par les variables globales comme $_POST/$_GET.
Hors d'un formulaire un input sert pas à grand chose, en tout cas pour PHP.

Vous indiquez un switch (interrupteur) avec bascule(toggle en anglais basculer d'une valeur à une autre: par ex. 'on' ou 'off') hors l'élément de formulaire input de type checkbox fonctionne comme une liste à choix multiples dont on peut sélectionner une valeur. Avec type = radio plusieurs sont possibles.
Pas vraiment le principe d'un interrupteur et surtout quel besoin d'un interrupteur si vous avez déjà la croix de la case à cocher qui fait le même rôle.

Quelques liens qui détaillent le principe des formulaires pour fournir les données du client à PHP:

https://www.php.net/manual/fr/tutorial.forms.php
plus précisément avec une checkbox:
https://forum.phpfrance.com/php-debutant/checkbox-php-t280150.html

Une astuce fréquente est d'utiliser un input de type hidden(qui dit input dit formulaire hein^^) où on peut donner la valeur qu'on veut et qui ne sera pas visible par l'utilisateur.
On peut très bien penser un bouton on/off (donc qui fonctionne comme un interrupteur) et modifier la valeur d'un champ hidden côté client avec JavaScript.
Sinon pas besoin puisque vous n'avez pas à chercher cette valeur puisque elle existe déjà si vous envoyez un formulaire à la page en PHP qui la traite.

Sinon pour modifier/supprimer/ajouter des enregistrements sur la base de données c'est plutôt du côté de SQL qu'il faut voir(fonctions ALTER, INSERT...etc).
> Tonnot
Perso je ferais plutôt un simple gif vert ou rouge pour les 2 états avec un bouton qui permet de changer(si c'est la seule donnée à modifier c'est le plus pratique et rien n'empêche de faire en sorte que ce bouton soit celui qui valide le formulaire).


<form name='activedesactive' method='post' target='machin.php'>
<input id='etat' type='hidden' value='<?php echo $etat ?>' />
Etat : <img id='voyant' src='
<?php
if($etat=='on'){
echo 'feuvert.gif';
}else{
echo 'feurouge.gif';

}
?>alt='indication on ou off' />
<button type='submit'>
Active/désactive
</button>

</form>

<script>
//-- écouteur du click
document.getElementById('activedesactive').addEventListener('click', function(){//-- contient les instructions:

//-- interrupteur en écriture ternaire
document.getElementById('etat').value = document.getElementById('etat').value=='on' ? 'off' : 'on';
//-- et on change l'image de la même façon
document.getElementById('voyant').src = document.getElementById('etat').value=='on' ? 'feuvert.gif' : 'feurouge.gif';


return true;/* pour confirmer l'envoi des données du formulaire vers la page php indiquée par le target du form) */

});
</script>


Mais bon les possibilités sont diverses de ce côté là. Ce qui est quasiment indispensable c'est de maîtriser les formulaires pour envoyer à PHP, ensuite PHP n'a que 2 rôles: faire le lien entre la page côté client et la base de donnée(par la possibilité d'envoyer du SQL à la base) et dans le sens inverse avec la fonction echo.

Pour optimiser on peut utiliser AJAX aussi mais le principe de base reste le même.
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
9
Bonjour,

Merci pour vos deux réponses, effectivement, je n'avais pas pensé au formulaire ^^...
Je suis encore un débutant en programmation web, j'apprends sur le tas... Je chipote beaucoup et j’enregistre au fur et à mesure...

Je teste tout de suite ! Merci !!!
Bon courage...mais la base d'une page web c'est HTML alors il vaut mieux être au point là dessus(surtout que c'est simpliste).
Si vous débutez vous n'inventerez pas la roue , imitez des exemples concrets ça aide beaucoup si vous les comprenez.
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
9 > Tonnot
Bon courage...mais la base d'une page web c'est HTML alors il vaut mieux être au point là dessus

Je sais, je sais... Les bases du HTML, je pense que je maîtrise quand même un peu... Il faut dire que mon bouton est le seul élément de formulaire sur cette page, alors je n'ai pas vraiment pensé au form... En plus, je n'ai pas beaucoup de temps à passer sur mon site par jour donc je dois toujours arriver à me remettre dans le bain pour pouvoir recommencer (ça amène parfois des moment d'égarement :) )...

imitez des exemples concrets ça aide beaucoup si vous les comprenez.
J'ai utilisé la documentation de Bootstrap pour commencer, il y avait des tas de bouts de code "prêts à l'emploi"... Maintenant, à force de les avoir utilisés, je connais globalement le fonctionnement...
Ceci dit, c'est vrai que j'ai parfois de gros problèmes de logique ^^
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
9
Bon voilà, j'ai mis mon bouton dans un formulaire, mais quand je fais "post", comment je fais pour savoir s'il est sur "on" ou sur "off" ?

Je dois utiliser la variable "$_POST", je suppose... Voilà mon code, mais il ne fonctionne pas des masses :
    <form action="setmaj.php?automaj=<?php $un="1"; $zero="0"; if (automaj=="checked") echo '1'; if (automaj=="checked") echo '0';?>" method="post">
<div class="switchToggle">
    <input type="checkbox" id="switch" name="automaj" id="automaj" <?php $c="0"; if ($automaj>$c) echo ' checked="checked" ';?>>
    <label for="switch">Toggle</label>
</div>
<button type="submit" class="btn btn-dark">Valider</button>
</form>


Je suppose que le problème vient de la partie "action", mais je ne vois pas trop comment faire...

Merci !
Messages postés
3604
Date d'inscription
jeudi 16 juin 2005
Statut
Membre
Dernière intervention
3 juillet 2020
957
Bonjour;

Je vois trois problèmes dans ton code.
1 - Tu définis deux id sur ta chackbox, qui ne peut en avoir qu'un seul ;
2 - Le formulaire ne s'utilise pas comme ça. Dans « action », il ne faut mettre que la page appelée. Donc action="setmaj.php", et c'est tout.
3 - Ta checkbox n'a pas de value. Rajoute l'attribut value="1" (ici, la valeur dans value n'a pas d'importance)

Dans setmaj.php, tu récupèreras la valeur d'automaj comme ceci :
$automaj = !empty($_POST['automaj']);


Xavier
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
9 >
Messages postés
3604
Date d'inscription
jeudi 16 juin 2005
Statut
Membre
Dernière intervention
3 juillet 2020

Merci ! Une fois tout cela fait alors, j'utilise $_POST dans setmaj.php avec la valeur du toggle ?
Messages postés
3604
Date d'inscription
jeudi 16 juin 2005
Statut
Membre
Dernière intervention
3 juillet 2020
957 >
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020

Tu n'as pas besoin de faire plus, avec $_POST, que la ligne que je t'ai mise :
$automaj = !empty($_POST['automaj']);

La valeur du toggle (le champ value) n'a pas besoin d'être testée dans le cadre d'une boîte à cocher unique (elle est surtout intéressante si tu as plusieurs boîtes à cocher qui ont le même "name" et font donc partie d'un groupe cohérent).
Dans ton cas, il suffit de regarder s'il y a une valeur, d'où le !empty(). Soit la case est cochée et il y a une valeur, soit elle n'est pas cochée et il n'y a pas de valeur.

Xavier
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
9 >
Messages postés
3604
Date d'inscription
jeudi 16 juin 2005
Statut
Membre
Dernière intervention
3 juillet 2020

D'accooord ! Je n'ai pas percuté tout de suite, mais je comprends maintenant (alléluia !!!) !

Un immense merci, je fais ça tout de suite !
Messages postés
203
Date d'inscription
jeudi 9 mars 2017
Statut
Membre
Dernière intervention
8 juillet 2020
9
Hourra ! Ça fonctionne !!!

Merci à tout le monde !

Je poste mon code source, on ne sait jamais, ça peut aider !

Le fichier setmaj.php
<?php
session_start();
$DATABASE_HOST = 'HOTE';
$DATABASE_USER = 'NOMUTILISATEUR';
$DATABASE_PASS = 'MDPBDD';
$DATABASE_NAME = 'NOMBDD';

$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);

$automaj = !empty($_POST['automaj']);
if (empty($_POST['automaj'])){
    $automaj=0;
} elseif (!empty($_POST['automaj'])){
    $automaj=1;
}


if ( mysqli_connect_errno() ) {
	die (header('Location: maj.php?error=1'));
}
$username = $_SESSION['name'];

   $modification='UPDATE accounts SET automaj='.$automaj.' WHERE username = ?';

if ($stmt = $con->prepare($modification)) {
	$stmt->bind_param('s', $username);
	$stmt->execute();
header('Location: maj.php?success=1');
	} else {
header('Location: maj.php?error=1');
	
$stmt->close();
}
?>


Et le HTML
    <form action="setmaj.php" method="post">
<div class="switchToggle">
    <input type="checkbox" value="1" name="automaj" id="automaj" <?php $c="0"; if ($automaj>$c) echo ' checked="checked" ';?>>
    <label for="automaj">Toggle</label>
</div>
<button type="submit" class="btn btn-dark">Valider</button>
</form>

Si jamais quelqu'un veut toute la page HTML, qu'il n'hésite pas à me contacter par MP...

Encore un tout grand merci !