Débutant JavaScript Résolu

Question

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 !!!

Thread · Answer

Par activer tu veux dire qu'il doit devenir visible ?

Vinceg · Answer

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 ?

Thread · Answer

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 ^^

Vinceg · Answer

ou alors, bêtement revenir sur la page et afficher une msgbox indiquant qu'il faut cocher la case pour poursuivre, c'est possible ?

Thread · Answer

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 ?

Vinceg · Answer

exactement !!!

Thread · Answer

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 ?

Vinceg · Answer

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.

Thread · Answer

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 ?

Vinceg · Answer

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

Thread · Answer

Oups, j'connais que dale à l'asp ^^

Y a possibilité de mettre un évènement onClick sur ton bouton ?

Vinceg · Answer

oui oui !!

Vinceg · Answer

Enfin, j'ai un OnClientClick

Thread · Answer

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.

Vinceg · Answer

D'accord, mais, (oui oui, je débute !!) Comment on le fait ce span qui n'apparait qu'à ce moment la ?

Thread · Answer

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) : Veuillez cocher la checkBox 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 ? ^^

Vinceg · Answer

J'ai déjà cherché, et je n'ai pas trouvé... désolé

Thread · Answer

Pas de soucis ^^

Vinceg · Answer

Bon, je n'arrive pas encore a le faire marcher mais je te remercie de ton aide !!

Thread · Answer

De rien, en espérant que ça finisse par marcher ;)

Vinceg · Answer

Mais, il n'y a pas de condition dans le bout de code que tu m'as donné ?? Je ne vois pas de condition disant que l'on reste sur la même page mais avec le Span en plus, c'est normal ?

Thread · Answer

La condition est sur le document.getElementById("checkBox").checked. Ce code renvoit un boolean indiquant si la checkbox est cochée ou non.
Si elle l'est le code renvoi true ce qui aura pour effet de valider le formulaire (seulement si la fonction est appellé sur un évènement onSubmit d'un bouton submit).
Sinon le code renvoi false ce qui empécheras la validation du formulaire.

Alain_42 · Answer

j'avais pas lu tous les post mais seulement le premier voici un petit exemple, avec plusieurs solutions en même temps: Nota : tu as Firefox alors serts toi de la console d'erreur du menu outil pour voir les erreurs Javascript c'est super pratique

Vinceg · Answer

J'aimerai bien mais, visual studio lance Google Chrome et je ne trouve pas comment changer de navigateur...
Et puis ça fait  beaucoup de texte pour moi qui suis débutant, enfin, je veux dire que je ne sais pas ou mettre tout ça ! Dans un fichier JS, dans l'en-tête de ma page html ??
Ou alors une partie dans un js, ue autre dans l'entete et une autre encore ailleurs ??
Je n'y comprend rien... :'(

Vinceg · Answer

Aidez moi s'il vous plaiiiiiiiiit !!!

Alain_42 · Answer

c'est pourtant pas bien compliqué, je t'ai maxhé le boulot avec 3 cas différents et le script au bon endroit c a d entre les balises esayes de lire et de faire un minimum d'effort

Vinceg · Answer

Figure toi que j'ai lu !
Et que en essayant il me dit qu'il ne trouve pas la balise </head>

Modification de deniere minute : j'ai ajouté un </head> en plus, donc dans le code il y a un <head> et deux </head> comprenez mon étonnement...

En tout cas, merci de votre aide et désolé pour mon impatience, je suis resté toute la journée d'hier sur ce problème sans arriver à le résoudre, ce qui commençait à me taper sur le système...

Sinon, existe-t-il un site avec des exemples en Javascript claires ?

Sur ce, merci encore ! Problème résolu !

Débutant JavaScript - Page 2

Discussions similaires

Newsletters