Débutant JavaScript

Résolu
Bonjour,

Comme le titre l'indique, je suis débutant en JS, et même pire, j'en ai juste entendu parlé.
Hors, pour mon stage on me demande de l'utiliser, et pour commencer il faudrait que, je vais essayer d'être le plus claire possible, quand je coche une checkbox, un bouton qui permet d'aller sur la page suivante pour s'inscrire s'active !
J'ai déjà fait une recherche sur ce sujet et tout ce que je trouve, c'est un ensemble de codes totalement hermétiques pour moi... Je vous remercie d'avance pour votre aide !!!
Configuration: Windows XP
Firefox 3.0.10

27 réponses

Résumé de la discussion

Un débutant en JavaScript cherche à faire activer un bouton menant à la page suivante dès qu'une checkbox est cochée, afin de pouvoir s'inscrire lors de son stage. Des exemples montrent d'utiliser l'événement onchange sur la checkbox pour modifier l'état du bouton ou la visibilité d'un lien, en lisant la propriété checked via document.getElementById et basculant l'attribut disabled. Certaines réponses évoquent aussi une validation lors de l'envoi du formulaire (onSubmit) ou l'affichage d'un message d'aide près de la checkbox plutôt que des alertes, pour une meilleure expérience utilisateur. Pour une mise en œuvre rapide sans framework, on peut utiliser l'attribut disabled pour le bouton et révéler le lien par style, tout en vérifiant les erreurs via la console.

Bobot (l’IA à votre service)
  1. Par activer tu veux dire qu'il doit devenir visible ?
    0
    1. En fait, j'aimerai qu'il soit grisé quand la checkbox n'est pas cochée et normal quand elle est cochée. Est-ce claire ?
      0
      1. Ouais c'est plutôt clair, mais grisé je sais pas faire xD

        J'peux par contre t'indiquer la marche à suivre pour que cocher la checkbox te déclenche une action X ou Y. Après à toi de trouver comment griser ^^
        0
        1. ou alors, bêtement revenir sur la page et afficher une msgbox indiquant qu'il faut cocher la case pour poursuivre, c'est possible ?
          0
          1. Tu veux dire revenir sur la page si la checkbox n'a pas été coché ?

            En fait, ce que tu veux c'est que l'accès à la suite ne soit possible que si la checkbox est cochée ?
            0
            1. Bon, alors t'as 2 solutions. Enfin j'en connais 2.
              Soit tu rends visible le bouton qui permet de continuer seulement si la checkbox est cochée.
              Soit tu places un contrôle sur le bouton qui vérifie que la checkbox est bien cochée avant de continuer.

              T'as une préférence ?
              0
              1. Mais, si le bouton est invisible, il est toujours physiquement la ? Je veux dire, on peut quand même cliquer dessus si on place la souris a l'endroit ou j'ai placé le bouton ?
                Je pense plutôt à la deuxième solution quand même.
                0
                1. Nan, il est dans la page mais il y a absolument aucun moyen de cliquer dessus. Ca se fait via l'attribut display du css. Si tu le mets à none l'élément est invisble pour l'utilisateur.

                  Donc si tu veux mettre en place un contrôle, il faut que tu rajoutes une fonction javascript qui s'occupera de vérifier que la checkbox est bien cochée au moment où tu cliqueras sur le bouton.

                  A propos, ton bouton c'est un submit ou juste un input type button ?
                  0
                  1. C'est du dotNET

                    <asp:Button ID="btn_suiv" runat="server" Text="Suivant" />

                    voila à quoi ça ressemble grossomodo

                    Mais je peux le changer pour le mettre en input ou submit, ca ne me dérange absolument pas
                    0
                    1. Oups, j'connais que dale à l'asp ^^

                      Y a possibilité de mettre un évènement onClick sur ton bouton ?
                      0
                      1. Okay. Bon ça vaut ce que ça vaut ce que j'vais te donner, je développe d'habitude avec PHP mais bon, ça devrait aussi marcher sous ASP. Et dans le pire des cas ça te donneras des pistes.

                        Donc :

                        Il va te falloir un fichier JavaScript (ou alors en dur dans ta page asp) contenant la fonction suivante

                        function checkBox() {
                        if (document.getElementById("Id_de_ta_checkBox").checked) {
                        return true;
                        }
                        else {
                        alert("Ton message indiquant qu'il faut cocher la checkBox");
                        return false;
                        }
                        }

                        Dans ton onClick tu places un appel à cette fonction.

                        Maintenant 2 p'tits détails :
                        - Cette fonction marche à la base plutôt sur l'évènement onSubmit d'un input de type submit
                        - Le alert, c'est moche et bourrin. Il vaudrait mieux faire un affichage plus soft sur ta page. Par exemple en fesant apparaître un span (en évidence, genre en rouge) prêt de la checkBox.

                        0
                        1. D'accord, mais, (oui oui, je débute !!) Comment on le fait ce span qui n'apparait qu'à ce moment la ?
                          0
                          1. Via ce que je t'ai dit tout à l'heure, avec l'attribut display du css

                            Tu fais un span comme suit dans ton code (c'est du XHTML, je sais pas si en ASP ça diffère) :
                            <span id="monSpan">Veuillez cocher la checkBox</span>

                            Dans ton css t'aura :
                            #monSpan {
                            display : none;
                            color : #FF0000;
                            }

                            Et ton code JavaScript deviendra :
                            function checkBox() {
                            if (document.getElementById("Id_de_ta_checkBox").checked) {
                            document.getElementById("monSpan").style.display="none";
                            return true;
                            }
                            else {
                            document.getElementById("monSpan").style.display="block";
                            return false;
                            }
                            }

                            Par contre à ton tour de m'aider, tu saurais pas comment spécifier une zone de code quand on écrit un message sur ce forum ? ^^
                            0
                            1. Modérateur
                              bonjour
                              voila les balise pour formater un texte sur ce forum
                              1)<gras>
                              2)<ital>
                              3<souligne>
                              4)<code>
                              les boutons pour le faire sont juste au dessus de la zone de saisi à gauche pour le code c'est le 4eme bouton (feuille blanche avec chevrons)
                              bonne journée
                              0
                          2. J'ai déjà cherché, et je n'ai pas trouvé... désolé
                            0
                            1. Bon, je n'arrive pas encore a le faire marcher mais je te remercie de ton aide !!
                              0
                              1. De rien, en espérant que ça finisse par marcher ;)
                                0
                                • 1
                                • 2