Bonjour

J'ai actuellement un problème avec le changement d'un bouton (soyez indulgent je suis encore débutant ;).

J'ai un bouton vert qui comporte un petit + à l'intérieur, et dès que je clique dessus pour effectuer une requête php qui insert une variable dans une table, j'aimerais qu'il devienne rouge avec un petit - (dès que la requête à réussi). Est-ce possible ?

Voici mon code HTML pour le bouton :

<form method="post">

      <input type="hidden" name="oeuvre" value="Overwatch" />

      <input id="bouton-plus" type="submit" value="+" />

</form>

Je fais cette requête php en début de page :

<?php

session_start();

    if (isset($_POST['oeuvre'])) {

        require_once 'login.php';

        $conn = new mysqli($hn, $un, $pw, $db);

        if ($conn->connect_error) die ($conn->connect_error);

        $query = "INSERT INTO `Preferences` (`Pseudo`, `JVA`) VALUES ('". $_SESSION['pseudo'] ."', '". $_POST['oeuvre'] ."')";

        $result = $conn->query($query);

        if (!$result) echo "INSERT failed: $query" . $conn->error . "</br>";

    }

?>

Puis une fois cette requête terminée, j'aimerais que le bouton devienne rouge avec un - ... Si quelqu'un pouvait m'aider

Bonjour,

Je ne peux pas t'aider en PHP, mais je peux te donner une solution en JS.

En gros, on effectue la requête, et à l'aide de "addEventListener", on détecte quand la requête est terminée, et on change la couleur.

var req = new XMLHttpRequest();
req.open("mode", "URL");
req.addEventListener("load"), function () {
    if (req.status >= 200 && req.status < 400) { // si la requête a été terminée avec succès //
        //on change la couleur ici //
        document.getElementById("bouton-plus").style.backgroundColor = red; 
        document.getElementById("bouton-plus").value = "-";
    }
}
req.send(null);

Bonne journée

-
Edité par bergiLeZÉR0 5 juin 2019 à 18:23:55

(désolé pour la taille, j'l'ai fait dans Notes sur iOS et il me le met en grand )

Bonjour,

BergiGnon le XMLHttpRequest n'est pas supporté par tous les navigateurs, pareil pour ActiveX alors plutôt faire la requête en PHP, qui exécute une fonction JS:

function changeButton() {

document.querySelector("#mybutton").style.backgroundColor = "red";

document.querySelector("#mybutton").innerHTML = "-";

}

et après la requête PHP, tu exécutes ça "changeButton();" (P.-S.: met l'id du button en "mybutton" comme ça: <input id="mybutton" type="submit">)

Good luck

-
Edité par Majoras16Forever 5 juin 2019 à 6:36:00

Bonjour MateoPiccarreta,

Pour moi, il faut directement le traiter en php, je vois pas l’intérêt de passer par le js, car il n'y pas de requête de type ajax

le formulaire semble  recharger la page.

Bonjour

Merci à tous pour vos réponses

Après de longues heures sur ce problème, j'ai enfin réussi mon coup grâce à une requête php.

Merci car vos conseils m'ont bien aidé !

Bonne journée

Salut

Pourrais-tu mettre le résultat de tes recherches, pour aider ceux qui veulent faire la même chose ?

Hello,

Passe ton post en résolu ça évite de nous faire lire les messages pour rien Aha

Bonne journée