[Javascript & Php] Afficher/Cacher des champs avec un onClick.

Petit nouveau ! | 8 Messages

16 août 2007, 05:51

Bonjour à tous,
Voilà mon problème est assez simple, j'aimerai afficher des champs supplémentaire lorsque l'utilisateur effectue un simple click sur ma checkbox, si ce dernier la decoche les champs disparaissent. Ne connaissant pas grand chose au javascript je me suis servi des différentes ressources disponible sur le web. Seulement Firebug me renvoi une erreur de syntaxe sur ma fonction javascript :o

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>XXX - Ajouter un article. </title> <style type="text/css" media="screen">@import "style_formulaire.css";</style> [b]<script type="text/javascript"> function switchMenu(obj) { var basculer = document.getElementById(obj); if(basculer.style.display != "block") { basculer.style.display = "block"; } else { basculer.style.display = "none"; } } </script>[/b] </head> <body> <form method="POST" action="ajouter.php"> <p><label>Référence : </label><input type="text" name="referenceArticle" size="20" maxlength="7"></p> <p><label>Nom : </label><input type="text" name="nomArticle" size="20" maxlength="35"></p> <p><label>Prix : </label><input type="text" name="prixArticle" size="20" maxlength="3"></p> <p><label>Marge : </label><input type="text" name="margeArticle" size="20" maxlength="3"></p> <p><label>Couleurs : </label></p> <?php include("connection.php"); $sql = "SELECT idCouleur, nomCouleur FROM couleur"; $req = mysql_query($sql) or die('Erreur SQL'.$sql.'<br>'.mysql_error()); while ($data = mysql_fetch_array($req)) { [b] echo "<div id='couleurs'>".$data["nomCouleur"]." <INPUT type=checkbox name='Couleurs' value='".$data["idCouleur"]."' onclick='switchMenu('formulaireTaille".$data['idCouleur']."');' ></div>"; echo '<span id="formulaireTaille'.$data['idCouleur'].'" > test </span>';[/b] } mysql_close(); ?> <p> <input type="submit" value="Ajouter"> <input type="reset" value="Annuler"> </p> </form> </body> </html>
Je me demande donc si le probleme ne viendrait pas d'une erreur d'attention avec tout ces guillemets :o

Merci de bien vouloir m'aider ;)

Eléphanteau du PHP | 26 Messages

16 août 2007, 09:39

slt
il te donne l'erreur de syntaxe sur quelle ligne?

ViPHP
ViPHP | 928 Messages

16 août 2007, 09:40

Bonjour, pour cacher un champ en Javascript c'est très simple. Tu dois en premier lieu mettre les informations que tu veux cacher dans un block, un div par exemple. Bien sur comme ce div est caché par défaut, il a une CSS display: none. Tu dois aussi mettre une ID à ce DIV, par exemple :

Code : Tout sélectionner

<div id="mon_block" style="display: none"> Informations cachées qui s'afficheront lorsque je cliquerai sur une checkbox </div>
Ensuite tu dois définir une fonction Javascript (au dessus du block, ou bien dans les balisesw <head> mais jamais en dessous) :

Code : Tout sélectionner

function afficher_cache_block(id) { // Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id) // Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction) var e = document.getElementById(id); // Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche e.style.display = 'block'; }

Maintenant l'agencement final du code :

Code : Tout sélectionner

<script type="text/javascript"> <!-- function afficher_cache_block(id) { // Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id) // Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction) var e = document.getElementById(id); // Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche e.style.display = 'block'; } --> </script> <input type="checkbox" onclick="afficher_cache_block('mon_block')" /> Afficher <br /> <div id="mon_block" style="display: none"> Informations cachées qui s'afficheront lorsque je cliquerai sur une checkbox </div>

Je te laisse comprendre mon code afin de pouvoir cacher / afficher des blocks à gogo dans ton projet.

Petit nouveau ! | 8 Messages

16 août 2007, 10:45

Merci de m'avoir répondu aussi rapidement :)
Alors apres lecture de ton code je remarque qu'il n'est pas si différent de celui que j'utilisais. Donc j'ai fait le test.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Blanc Bleu - Ajouter un article. </title> <style type="text/css" media="screen">@import "style_formulaire.css";</style> <script type="text/javascript"> <!-- function afficher_cache_block(id) { // Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id) // Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction) var e = document.getElementById(id); // Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche e.style.display = 'block'; } --> </script> </head> <body> <form method="POST" action="ajouter.php"> <p><label>Référence : </label><input type="text" name="referenceArticle" size="20" maxlength="7"></p> <p><label>Nom : </label><input type="text" name="nomArticle" size="20" maxlength="35"></p> <p><label>Prix : </label><input type="text" name="prixArticle" size="20" maxlength="3"></p> <p><label>Marge : </label><input type="text" name="margeArticle" size="20" maxlength="3"></p> <p><label>Couleurs : </label></p> <?php include("connection.php"); $sql = "SELECT idCouleur, nomCouleur FROM couleur"; $req = mysql_query($sql) or die('Erreur SQL'.$sql.'<br>'.mysql_error()); while ($data = mysql_fetch_array($req)) { echo "<div id='couleurs'>".$data["nomCouleur"]." <INPUT type=checkbox name='Couleurs' value='".$data["idCouleur"]."' onClick='afficher_cache_block(formulaireTaille".$data['idCouleur'].")' ></div>"; echo "<div id='formulaireTaille".$data['idCouleur']."' style='display: none' > test </div>"; } mysql_close(); ?> <p> <input type="submit" value="Ajouter"> <input type="reset" value="Annuler"> </p> </form> </body> </html>
Cela ne marche toujours pas. Je pense que l'erreur se trouve dans l'echo qui suit :
echo "<div id='couleurs'>".$data["nomCouleur"]." <INPUT type=checkbox name='Couleurs' value='".$data["idCouleur"]."' onClick='afficher_cache_block('formulaireTaille".$data['idCouleur']."')' ></div>";
Je pense que l'on est pas loin de la solution :D

ViPHP
ViPHP | 928 Messages

16 août 2007, 10:52

Dans ton code :

Code : Tout sélectionner

echo "<div id='couleurs'>".$data["nomCouleur"]." <INPUT type=checkbox name='Couleurs' value='".$data["idCouleur"]."' onClick='afficher_cache_block(formulaireTaille".$data['idCouleur'].")' ></div>";
il manque des " " dans afficher_cache_block(formulaireTaille".$data['idCouleur'].").

Petit nouveau ! | 8 Messages

16 août 2007, 11:02

Oups, je l'avais changer dans le quote mais pas dans le code :)

Code : Tout sélectionner

echo "<div id='couleurs'>".$data["nomCouleur"]." <INPUT type=checkbox name='Couleurs' value='".$data["idCouleur"]."' onClick='afficher_cache_block('formulaireTaille".$data['idCouleur']."')' ></div>";
Ca ne marche tout de même pas :'(
J'ai effectué un test, j'ai prit le code source que me renvoyait mon navigateur (en html donc) et je l'ai enregistré dans un document html séparé, l'erreur existe tout de meme.

Code : Tout sélectionner

<div id='couleurs'>Bleu Royal <INPUT type=checkbox name='Couleurs' value='1' onClick='afficher_cache_block(formulaireTaille1)' ></div> <div id='formulaireTaille1' style='display: none' > test </div>

ViPHP
ViPHP | 928 Messages

16 août 2007, 11:07

Justement dans cette ligne :

Code : Tout sélectionner

<div id='couleurs'>Bleu Royal <INPUT type=checkbox name='Couleurs' value='1' onClick='afficher_cache_block(formulaireTaille1)' ></div>
tu as

Code : Tout sélectionner

onClick='afficher_cache_block(formulaireTaille1)'
et tu devrais avoir

Code : Tout sélectionner

onClick='afficher_cache_block("formulaireTaille1")'
formulaireTaille1 doit être une chaîne de caractère, donc comprise entre des " " dans l'appel de ta fonction.

Petit nouveau ! | 8 Messages

16 août 2007, 11:32

Ah oui en effet :O

Donc voila j'ai changé le type de guillemets de echo.

Code : Tout sélectionner

echo '<div id="couleurs">'.$data["nomCouleur"].' <INPUT type=checkbox name="Couleurs" value="'.$data["idCouleur"].'" onClick=afficher_cache_block("formulaireTaille'.$data['idCouleur'].'")" ></div>' ;
Ce qui me donne en html

Code : Tout sélectionner

<div id="couleurs">Bleu Royal <INPUT type=checkbox name="Couleurs" value="1" onClick="afficher_cache_block("formulaireTaille1")" ></div>
Ca ne marche encore pas :')

Je n'arrive pas a avoir

onClick='afficher_cache_block("formulaireTaille1")'

Vraiment désolé de ne pas comprendre, et merci encore pour ton aide :)

ViPHP
ViPHP | 928 Messages

16 août 2007, 11:39

Lorsque tu lances ta page, ouvre la source de la page depuis ton navigateur et copie la moi ici, ça sera plus simple pour que je debug.

Petit nouveau ! | 8 Messages

16 août 2007, 11:44

Voilà : :)

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>XXX - Ajouter un article. </title> <style type="text/css" media="screen">@import "style_formulaire.css";</style> <script type="text/javascript"> <!-- function afficher_cache_block(id) { // Cette ligne déclare une variable e, qui pointera sur le résultat du document.getElementById(id) // Le document.getElementById(id) permet de dire que tu veux accéder aux informations sur la balise ayant pour id la variable id (que tu passeras en paramètre dans ta fonction) var e = document.getElementById(id); // Ici, tu accèdes au style de ta balise donc, et tu modifies la propriété display en lui donnant la valeur 'block' pour qu'elle s'affiche e.style.display = 'block'; } --> </script> </head> <body> <form method="POST" action="ajouter.php"> <p><label>Référence : </label><input type="text" name="referenceArticle" size="20" maxlength="7"></p> <p><label>Nom : </label><input type="text" name="nomArticle" size="20" maxlength="35"></p> <p><label>Prix : </label><input type="text" name="prixArticle" size="20" maxlength="3"></p> <p><label>Marge : </label><input type="text" name="margeArticle" size="20" maxlength="3"></p> <p><label>Couleurs : </label></p> <div id="couleurs">Bleu Royal <INPUT type=checkbox name="Couleurs" value="1" onClick=afficher_cache_block("formulaireTaille1")" ></div><div id='formulaireTaille1' style='display: none' > test </div><div id="couleurs">Blanc <INPUT type=checkbox name="Couleurs" value="2" onClick=afficher_cache_block("formulaireTaille2")" ></div><div id='formulaireTaille2' style='display: none' > test </div><div id="couleurs">Teck Embrun <INPUT type=checkbox name="Couleurs" value="3" onClick=afficher_cache_block("formulaireTaille3")" ></div><div id='formulaireTaille3' style='display: none' > test </div> <p> <input type="submit" value="Ajouter"> <input type="reset" value="Annuler"> </p> </form> </body> </html>

ViPHP
ViPHP | 928 Messages

16 août 2007, 11:48

Code : Tout sélectionner

<div id="couleurs">Bleu Royal <INPUT type=checkbox name="Couleurs" value="1" onClick=afficher_cache_block("formulaireTaille1")" >
A ce niveau là :
onClick=afficher_cache_block("formulaireTaille1")"

Il te manque le guillement ouvrant. Tous les cas, si tu as onclick=" ... " tu dois mettres des ' ' dans ta fonction, et vice versa, afin que le navigateur ne s'embrouille pas.

Généralement je conseil d'utiliser " " dans les attributs HTML (src=" ... ", onclick=" ... ") et de mettre des simple quote dans les fonctions Javascript , par exemple : onclick="ma_fonction_javascript('une chaine de caractère')"

Petit nouveau ! | 8 Messages

16 août 2007, 12:12

Justement ! J'arrive très bien à le concevoir en html basique mais dès que je dois controler mes guillemets dans un echo. Si je commence commence echo ' ... '; alors tout mes attributs html seront sous " .... " et vicee versa. Peut etre que echo n'est pas la meilleure solution ? Print ?

ViPHP
ViPHP | 928 Messages

16 août 2007, 12:15

echo est très bien, ça n'a pas vraiment de rapport avec echo ou print.

Voilà un affichage qui devrait marcher :

Code : Tout sélectionner

echo '<div id="couleurs">' . $data['nomCouleur'] . ' <INPUT type=checkbox name="Couleurs" value="' . $data["idCouleur"] . '" onClick="afficher_cache_block(\'formulaireTaille' . $data['idCouleur'] . '\')" ></div>';

Petit nouveau ! | 8 Messages

16 août 2007, 12:20

Ah oui en effet ca marche :o
Je ne connaissais cette facon de faire :(
Merci dans tout les cas ;)

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

16 août 2007, 14:01

Modération :
Maïckel, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton Image en haut à gauche de ce sujet.

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute