Débutant JavaScript

Résolu/Fermé
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 - 9 juin 2009 à 09:39
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 - 10 juin 2009 à 09:22
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 !!!

27 réponses

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 juin 2009 à 13:58
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>

1
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 09:40
Par activer tu veux dire qu'il doit devenir visible ?
0
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 09:42
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
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 09:45
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 09:47
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
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 09:51
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
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 09:56
exactement !!!
0
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 09:59
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
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 10:03
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
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 10:11
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
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 10:20
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
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 10:24
Oups, j'connais que dale à l'asp ^^

Y a possibilité de mettre un évènement onClick sur ton bouton ?
0
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 10:26
oui oui !!
0
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 10:30
Enfin, j'ai un OnClientClick
0
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 10:38
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
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 10:41
D'accord, mais, (oui oui, je débute !!) Comment on le fait ce span qui n'apparait qu'à ce moment la ?
0
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 10:48
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
Noureddine Bouzidi Messages postés 22674 Date d'inscription jeudi 19 mars 2009 Statut Modérateur Dernière intervention 7 janvier 2021 136
9 juin 2009 à 12:34
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
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 10:58
J'ai déjà cherché, et je n'ai pas trouvé... désolé
0
Thread Messages postés 298 Date d'inscription lundi 20 octobre 2008 Statut Membre Dernière intervention 9 juin 2009 35
9 juin 2009 à 10:59
Pas de soucis ^^

0
Vinceg Messages postés 56 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 16 février 2012 17
9 juin 2009 à 11:27
Bon, je n'arrive pas encore a le faire marcher mais je te remercie de ton aide !!
0