Afficher une zone de texte suivant checkbox cocher/décocher

par **Ryle** » 25 mars 2008, 16:54

Quand la checkbox est coché au chargement de la page : je la décoche, cela met bien le message "affiche" mais le message "affiche2" n'apparait pas. L'erreur doit venir des 3 lignes de la fonction.. masi je ne vois pas trop.

Tu dois avoir une erreur javascript, probablement un p'tit triangle jaune en bas à gauche de ton navigateur (si tu utilises IE) et en double cliquant dessus tu auras un message d'erreur qui t'aidera certainement à mieux y voir.
Tu peux également déplacer l'instruction alert() en la plaçant tour à tour après chacune de tes 3 lignes qui posent problème et ainsi savoir laquelle est réellement incriminée.
Enfin, si cette fonction est appellée pendant le chargement (c'est à dire un appel directement dans le code et pas dans le onLoad, alors il est nécessaire que les 3 élément ait déjà été définis lorsque la fonction est appellée, c'est à dire qu'ils doivent se trouver au dessus dans le code de la page.

Par contre quand la checkbox est décoché au chargement de la page et que je la coche les 2 messages (affiche et affiche2) s'affiche bien.

C'est pas plutôt cache et cache2 qui devraient apparaitre lorsque la case est cochée ?

Si cela ne t'avance pas plus, montre nous le code qui génère tes 3 éléments "mois_sortie", "label_sortie" et "annee_sortie". Indique nous également s'ils sont placés avant ou après l'appel à la fonction javascript et donne nous le message d'erreur js vu plus haut

par **angebleu17** » 25 mars 2008, 12:04

Code : Tout sélectionner

function affichageZoneTexte(caseACocher) 
{ 
   if (caseACocher.checked) 
   { 
	    alert("cache");
	    document.getElementById("mois_sortie").style.display="none";
	    document.getElementById("label_sortie").style.display="none";
	    document.getElementById("annee_sortie").style.display="none";
	    alert("cache2");
   } 
   else 
   { 
			alert("affiche");
			document.getElementById("annee_sortie").style.display="inline";
			document.getElementById("label_sortie").style.display="inline";
			document.getElementById("mois_sortie").style.display="inline";
			alert("affiche2");
   } 
}

Quand la checkbox est coché au chargement de la page : je la décoche, cela met bien le message "affiche" mais le message "affiche2" n'apparait pas. L'erreur doit venir des 3 lignes de la fonction.. masi je ne vois pas trop.

Par contre quand la checkbox est décoché au chargement de la page et que je la coche les 2 messages (affiche et affiche2) s'affiche bien.

Quelqu'un à une idée de l'erreur ?

par **angebleu17** » 20 mars 2008, 16:31

Même en mettant le code en fin de page ça ne marche pas.

Quand je décoche la checkbox, ça met erreur ds la barre de la page en bas.

Voici mon code :

<?
$sql = "SELECT * FROM club WHERE id = '".intval($_GET['id'])."' AND id_membre = '".$_SESSION['id_membre']."' AND valider='oui'";
	$resultat = mysql_query($sql) or die('Erreur SQL : <br />'.$sql .mysql_error() );
	
	while ($data=mysql_fetch_array($resultat))
	{
		
		$fonction_club = $data["fonction"];
		$annee_sortie = $data["annee_sortie"];
		$mois_sortie = $data["mois_sortie"];
		$annee_entree = $data["annee_entree"];
		$mois_entree = $data["mois_entree"];
		$checkbox_present = $data["tjrs_present"]; //erreur ICI
		if($checkbox_present == '' ) { $checkbox_present = 'non'; }

		
	}	


if($_GET['action2'] == 'valider') //si on clique sur le bouton submit
	{
                if(isset($_POST['annee_sortie'])) { $annee_sortie = $_POST['annee_sortie']; }
	if(isset($_POST['mois_sortie'])) { $mois_sortie = $_POST['mois_sortie']; }
	if(isset($_POST['checkbox_present'])) 
	{
	$checkbox_present = $_POST['checkbox_present']; 
	
	if($checkbox_present == '' ) { $checkbox_present = 'non'; }
	else { $mois_sortie = '' ; $annee_sortie = '';}
}
		
	$query="UPDATE... ";	
	$result = mysql_query($query)  or die (mysql_error());

Je ne vois pas trop l'erreur.. ce n'est pas du au fait que le nom de ma checkbox et le nom de la variable ou je récupére la valeur de la checkbox soit le même ?

par **Ryle** » 20 mars 2008, 15:51

hmm.. là tu fais appel à la fonction pendant le chargement de la page et non après.
Le bloc javascript doit dans ce cas être placé après :
- la déclaration de ta fonction affichageZoneTexte()
- la déclaration de la case à cocher
- la déclaration des champs qu'elle doit afficher/cacher

<?php if ($checkbox_present == 'oui') { ?> 
  <script type="text/javascript"> 
    var box = document.getElementById("checkbox_present"); 
    affichageZoneTexte(box); 
  </script> 
<?php } ?>

par **angebleu17** » 20 mars 2008, 14:04

Merci de ta réponse.

Voilà mon code :

Code : Tout sélectionner

if ($checkbox_present == 'oui') //Si checkbox coché
{
 $check = 'checked="checked"';
}
	
?>
<span style="margin-left:2;"><font class="linknoir2">
<INPUT  type="checkbox" name="checkbox_present" id="checkbox_present" value="oui"  <? echo $check; ?> onclick="affichageZoneTexte(this)" >TEXTE</font></span></td></p>
	
<?
if ($checkbox_present == 'oui')
{
?>
  <script type="text/javascript"> 
   var box = document.getElementById("checkbox_present");
    var box2 = affichageZoneTexte(box); 
     document.write(box2);    
   </script> 
<?
}
?>

Quand j'ouvre ma page, la chexkbox est coché car $checkbox_present = oui, dc j'ai le message "cache" qui apparait, mais lorsque je décoche la checkbox ça me met bien "affiche" mais ça n'affiche toujours pas.. Pourtant je fait bien appel a la fonction au chargement de la page si $checkbox_present = oui.

par **Ryle** » 20 mars 2008, 13:41

Si tu arrives sur la page et que la checkbox est déjà cochée, c'est que tu as demandé explicitement à ce qu'elle le soit par défaut, via un contrôle javascript ou php. L'idée est la même, et il te faut utiliser ce même contrôle pour dire si tes champs doivent être affichés ou cachés par défaut à l'ouverture de la page et en fonction de ton contrôle

L'autre solution consiste simplement à faire un appel à ta fonction sur le onLoad de la page. Ainsi elle sera exécutée dès que la page aura été chargée et les champs apparaitront/disparaitront en fonction de l'état de la case à cocher... mais c'est quand même moins agréable

par **angebleu17** » 20 mars 2008, 13:30

Merci pour vos réponses, ça marche assez bien sauf un petit soucis.

D'abord voici ma fonction :

Code : Tout sélectionner

<script type="text/javascript"> 
function affichageZoneTexte(caseACocher) 
{ 
   if (caseACocher.checked) 
   { 
	    alert("cache");
	    document.getElementById("mois_sortie").style.display="none";
	    document.getElementById("label_sortie").style.display="none";
	    document.getElementById("annee_sortie").style.display="none";
   } 
   else 
   { 
			alert("affiche");
			document.getElementById("annee_sortie").style.display="inline";
			document.getElementById("label_sortie").style.display="inline";
			document.getElementById("mois_sortie").style.display="inline";
			
   } 
} 
</script>

Donc en fait quand j'arrive sur la page ça marche, quand je coche la checkbox, les input (zone de texte) disparaissent et vice versa.

Par contre si j'arrive sur la page et que la checkbox est déjà coché, là ça ne marche pas, pourtant quand je décoche la checkbox cela me met bien le message "affiche" mais les input ne s'affiche pas.

Je ne sais pas trop ce qu'il faut faire pour remédier à ce petit probléme..

par **chrislabricole** » 16 mars 2008, 13:15

perso, j'opterai plus pour le "disabled"

comme ça, le visiteur vois mieux que c'est racrocher

par **d0m** » 13 mars 2008, 17:11

pour enlever/ajouter des éléments à l'écran, tu peux utiliser 2 propriété css :
- visible
- display

en les utilisant comme ceci :

Code : Tout sélectionner

//cacher
element.style.visible="hidden";
//afficher
element.style.visible="visible";

//cacher
element.style.display="none";
//afficher
element.style.visible="block";
element.style.visible="inline";

La difference entre les 2 est que cacher un élément par visible laisse la place vide pour cet élément dans la page
alors qu'avec display, la place de l'élément n'est pas réservée.

par **angebleu17** » 13 mars 2008, 16:24

Ca marche, les messages s'affichent bien.

J'aimerais afficher 2 listes déroulantes si la checkbox est décoché et si elle est coché j'aimerais enlever les 2 listes déroulantes. Comment faire ? Il faut surmenr rajouter du code dans la fonction, mais je ne m'y connais pas trop en javascript..

Voici ma fonction :

Code : Tout sélectionner

<script type="text/javascript">
function affichageZoneTexte(caseACocher)
{
	if (caseACocher.checked)
	{ 
	 alert ("wabon!"); 
	}
	else 
	{
	 alert("perdu!"); 
	} 
}
</script>

par **Ryle** » 13 mars 2008, 15:54

Ton erreur est vraissemblablement dans le nom de ta fonction... "test" est également le nom d'une méthode permettant de tester une expression régulière, du coup doit y avoir conflit...

Donne un nom explicite à ta fonction pour qu'il n'y ait pas de toute quant à son usage, ça t'évitera également ce genre de désagrément

(genre : affichageZoneTexte() .... )

par **d0m** » 13 mars 2008, 14:47

Tu peux éviter d'aller chercher la checkbox avec son id en la passant directement en paramètres :

Code : Tout sélectionner

function test(caseACocher){
if (caseACocher.checked)
 alert ("wabon!");
else
 alert("perdu!);
}

<INPUT  type="checkbox" ....  onclick="test(this)"  ... >

Des erreurs javascript?

par **angebleu17** » 13 mars 2008, 14:37

Merci pr ta réponse, j'ai testé mais ça ne marche pas, voici mon code:

Code : Tout sélectionner

function test(ID_checkbox)
{
var box = document.getElementById(ID_checkbox); 
if (box.checked) 
 alert ("wabon!"); 
else 
 alert("perdu!); 

}

<?
$checkbox_present = $_POST['checkbox_present'];

if ($checkbox_present == 'oui')
{
$check = 'checked="checked"';
}
?>
<INPUT  type="checkbox" id="checkbox_present" name="checkbox_present" value="oui"  onclick="test('checkbox_present')"  <? echo $check; ?> >

Ca n'affiche aucun message !! Je ne vois pas trop ou est mon erreur..[/php]

par **Berzemus** » 13 mars 2008, 14:22

salut,

Avec un simple "onclick" sur le checkbox, tu pourrais lancer une fonction qui vérifie l'état du checkbox, et s'il est coché, désactive le input (ou le cache)..

genre

Code : Tout sélectionner

var box = document.getElementById("checboxId");
if (box.checked)
 alert ("wabon!");
else
 alert("perdu!);

par **angebleu17** » 13 mars 2008, 14:13

Bonjour,

Sur mon site j'ai un formulaire avec une zone de texte (input) et une checkbox. En fait j'aimerais que si la checkbox est décocher la zone de texte s'affiche et si la personne coche la checkbox, on enléve la zone de texte (tout ça dynamiquement sans cliquer sur un bouton).

Je ne sais pas trop comment il faut faire, j'espére que vous pourrez m'aider

Afficher une zone de texte suivant checkbox cocher/décocher

Répondre

Étendre la vue Revue du sujet : Afficher une zone de texte suivant checkbox cocher/décocher

Afficher une zone de texte suivant checkbox cocher/décocher