Aller au contenu

Changer l'état d'un bouton et un seul


Arcy

Messages recommandés

Bonjour !

Comme dans mon précédent sujet, on va je vais encore parler Javascript !

Je dispose, sur un formulaire, de 3 boutons : un qui permet de se connecter, un autre pour réinitialiser le formulaire et le dernier est un bouton pour utiliser les cookies (se souvenir de moi ?), ce qui est nettement plus pratique pour un usage type tablette.

Ceci fonctionne très bien, sauf que le fait de cliquer sur "Envoyer" ou "Réinitialiser" change aussi l'état du bouton pour les cookies, pas top ...

Comment donc faire pour attribuer le changement uniquement au bouton concerné ?

Mon script :

<form name="formConnexion" action="index.php" method="POST">

                    <!-- ligne UTILISATEUR -->
                    <div class="row-fluid">
                        <div class="span3">
                            <label>Nom d'utilisateur</label>
                        </div>
                        <div class="span3">
                            <input type="text" name="utilisateur" value="" size="30" />
                        </div>
                    </div>

                    <!-- ligne MOT DE PASSE -->
                    <div class="row-fluid">
                        <div class="span3">
                            <label>Mot de passe</label>
                        </div>
                        <div class="span3">
                            <input type="password" name="mdp" value="" size="16" />
                        </div>
                    </div>
                    
                    <!-- case "Se souvenir de moi" -->
                    <div class="row-fluid">
                        <div class="span3 offset3">
                            <button type="button" id="activeCookie" class="btn btn-danger tailleBtnUtilisateursPHP" >Ne pas se souvenir de moi</button>
                            <input type="hidden" name="choixCookie" value="N" size="1" />
                        </div>
                    </div>
                    
                    <br>
                    
                    <!-- BOUTONS -->
                    <div class="row-fluid">
                        <div class="span3 offset3 btn-group">
                            <button class="btn btn-success tailleBtnUtilisateursPHP_2" type="submit" name="Connexion">Se connecter</button>
                            <button class="btn btn-danger tailleBtnUtilisateursPHP_2" type="reset">Réinitialiser</button>  
                        </div>
                    </div>
                   <!-- MESSAGES D'ERREUR -->
                    <div class="row-fluid">
                        <?PHP
                        if ($msg != "")
                        {
                            ?>
                            <br>
                            <div class="span6 alert alert-danger">    
                                <strong><?PHP echo $msg; ?></strong>
                            </div>    
                            <?PHP
                        }
                        ?>
                    </div>
                </form>

Le javascript

    // changement d'état / cookies
    var state;
    $(function (){
            $('button').click(function() {
                    with($(this)) {
                            button('toggle');
                            if(state = !state)
                            {
                                removeClass('btn-danger').addClass('btn-success');
                                document.getElementById('activeCookie').innerHTML = 'Se souvenir de moi';
                                document.formConnexion.choixCookie.value = 'O';
                            }
                            else
                            {
                                removeClass('btn-success').addClass('btn-danger');
                                document.getElementById('activeCookie').innerHTML = 'Ne pas se souvenir de moi';
                                document.formConnexion.choixCookie.value = 'N';
                            }
                    }
            })
    });

:inpactitude2::merci:

Lien vers le commentaire
Partager sur d’autres sites

Au lieu d'appeler ta fonction sur 'button', il faut que tu mettes un ID sur ton bouton se souvenir de moi qui permet de ne cibler exclusivement que celui ci, je dirais.

<button type="button" id="activeCookie" class="btn btn-danger tailleBtnUtilisateursPHP" id="SaveCookie">Ne pas se souvenir de moi</button>
// changement d'état / cookies
    var state;
    $(function (){
            $('#SaveCookie').click(function() {
                    with($(this)) {
                            button('toggle');
                            if(state = !state)
                            {
                                removeClass('btn-danger').addClass('btn-success');
                                document.getElementById('activeCookie').innerHTML = 'Se souvenir de moi';
                                document.formConnexion.choixCookie.value = 'O';
                            }
                            else
                            {
                                removeClass('btn-success').addClass('btn-danger');
                                document.getElementById('activeCookie').innerHTML = 'Ne pas se souvenir de moi';
                                document.formConnexion.choixCookie.value = 'N';
                            }
                    }
            })
    });

A essayer, mais je pense que c'est ça que tu as besoin :D

Lien vers le commentaire
Partager sur d’autres sites

Il a déjà un ID ... :p

En fait c'est une fonction JS que j'ai trouvé sur le net donc ...

EDIT : ça marche, je t'aime ! :transpi:

:inpactitude:

// changement d'état / cookies
    var state;
    $(function (){

            $('#activeCookie').click(function() {

                    with($(this)) {
                            button('toggle');
                            if(state = !state)
                            {
                                removeClass('btn-danger').addClass('btn-success');
                                document.getElementById('activeCookie').innerHTML = 'Se souvenir de moi';
                                document.formConnexion.choixCookie.value = 'O';
                            }
                            else
                            {
                                removeClass('btn-success').addClass('btn-danger');
                                document.getElementById('activeCookie').innerHTML = 'Ne pas se souvenir de moi';
                                document.formConnexion.choixCookie.value = 'N';
                            }
                    }
            })
    });
Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×
×
  • Créer...