Débutant JavaScript
RésoluComme 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
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.
-
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 ! -
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 <head> </head>
esayes de lire et de faire un minimum d'effort -
Aidez moi s'il vous plaiiiiiiiiit !!!
-
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... :'( -
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
<html> <head> <script type="text/javascript"> //on met les fonctions JS dans la partie <head> //fonction affichage/masquage en fct checkbox, elle a deux arguments, l'id de la case à "lire" et l'ide à afficher function affich(id_bt_choix,id_aff){ var obj_bt=document.getElementById(id_bt_choix); // on atteint l'obj case chekbox var obj_aff= document.getElementById(id_aff); // on atteint l'objet div if(obj_bt.checked == true){ //on verifie si la case est cochée par la propriétée checked de la chekbox //si cochée on joue sur la propriété style du <div> if(obj_aff.style.visibility=="hidden") obj_aff.style.visibility="visible"; }else{ //si pas cohée ou décochée if(obj_aff.style.visibility=="visible") obj_aff.style.visibility="hidden"; } } //fonction qui grise le bouton function griser(id_bt_choix,id_grise){ var obj_bt=document.getElementById(id_bt_choix); // on atteint l'obj case chekbox var obj_aff= document.getElementById(id_grise); // on atteint l'objet div if(obj_bt.checked == true){ //on verifie si la case est cochée par la propriétée checked de la chekbox //si cochée on joue sur la propriété disabled du bouton if(obj_aff.disabled == true) obj_aff.disabled = false; //si desactivé on l'active }else{ //si pas cohée ou décochée if(obj_aff.disabled == false) obj_aff.disabled = true; } } </script> </head> <body> <form name="test" method="post" action=""> <!-- sur le changement de l'état de la chekbox on appelle la fonction affich() en lui passant les deux arguments - l'id de la chekbox concernée (ex 'choix_1') et l'id du div a afficher ('lien_1') --> <input type="checkbox" name="bt_choix" id="choix_1" value="choix_1" onChange="affich('choix_1','lien_1');">Affiche lien 1<br /> <input type="checkbox" name="bt_choix" id="choix_2" value="choix_2" onChange="affich('choix_2','bt_1');">Affiche bouton 1<br /><br /><br /> <input type="checkbox" name="bt_choix" id="choix_3" value="choix_3" onChange="griser('choix_3','bt_page_suivante2');">Active ou grise bouton 2<br /><br /><br /> <!-- on peut mettre le lien ou le bouton dans un div c'est à dire une "boite" sur laquelle on pourra intervenir en JS sur sa propriété style--> <div id="lien_1" style="visibility:hidden;"><a href="page_suivante.html">lien page suivante</a></div> <div id="bt_1" style="visibility:hidden;"><input type="button" name="page_suivante" value="Vers page suivante" onClick="javascript:location.href='page_suivante.html';" /></div> <input type="button" name="page_suivante2" id="bt_page_suivante2" value="Vers autre page suivante" onClick="javascript:location.href='page_suivante2.html';" disabled=true/></div> </body> </html> -
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. -
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 ?
-
De rien, en espérant que ça finisse par marcher ;)
-
Bon, je n'arrive pas encore a le faire marcher mais je te remercie de ton aide !!
-
Pas de soucis ^^
-
J'ai déjà cherché, et je n'ai pas trouvé... désolé
-
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 ? ^^ -
D'accord, mais, (oui oui, je débute !!) Comment on le fait ce span qui n'apparait qu'à ce moment la ?
-
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.
-
Enfin, j'ai un OnClientClick
-
oui oui !!
-
Oups, j'connais que dale à l'asp ^^
Y a possibilité de mettre un évènement onClick sur ton bouton ? -
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 -
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 ? -
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.
- 1
- 2