Débutant JavaScript

Résolu
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   -  
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   -
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

  • 1
  • 2
Réponse 1 / 27
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
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
Réponse 2 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
Par activer tu veux dire qu'il doit devenir visible ?
0
Réponse 3 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
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
Réponse 4 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
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
Réponse 5 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
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
Réponse 6 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
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
Réponse 7 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
exactement !!!
0
Réponse 8 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
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
Réponse 9 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
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
Réponse 10 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
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
Réponse 11 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
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
Réponse 12 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
Oups, j'connais que dale à l'asp ^^

Y a possibilité de mettre un évènement onClick sur ton bouton ?
0
Réponse 13 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
oui oui !!
0
Réponse 14 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
Enfin, j'ai un OnClientClick
0
Réponse 15 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
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
Réponse 16 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
D'accord, mais, (oui oui, je débute !!) Comment on le fait ce span qui n'apparait qu'à ce moment la ?
0
Réponse 17 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
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   Statut Modérateur Dernière intervention   136
 
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
Réponse 18 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
J'ai déjà cherché, et je n'ai pas trouvé... désolé
0
Réponse 19 / 27
Thread Messages postés 298 Date d'inscription   Statut Membre Dernière intervention   35
 
Pas de soucis ^^

0
Réponse 20 / 27
Vinceg Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   17
 
Bon, je n'arrive pas encore a le faire marcher mais je te remercie de ton aide !!
0

Discussions similaires

FORMATION SAP DEBUTANT
zara93 -
ddpois -

7 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
formation pratique sap
patricia -
na3im05 -

49 réponses
javascript:void(0);
nano -
JCVD -

18 réponses