Page 1 sur 1

récuperer les valeurs d'une liste déroulante

Posté : 05 nov. 2012, 13:29
par tiomil
bonjour,

je viens pour avoir votre aide car, aprés avoir écumer les forums et les recherches sur google, je ne trouve pas de solutions à mon probleme:

j'ai un formulaire avec une liste déroulante au début qui fait apparait 2 champs cachés (id=famille et id=couple) suivant le choix effectués, ces 2 champs ne sont pas dans le formulaire car cela ferais un espace vide apres ma premiere liste déroulante, ils sont sur le coté à droite du formulaire (image ci-dessous)
Image

et aussi parce que c'est le seulement moyen que j'ai trouvé pour qu'ils s'affichent uniquement lors de la selection dans la liste déroulante "qui désirez-vous assurer?" , mon probleme c'est que je ne peut pas récupérer les valeurs de ces deux champs (age conjoint et nbres d'enfants)

voici mon code pour afficher le formulaire et les champs cachés:

Code : Tout sélectionner

<!-- formulaire demande de devis santé --> <div id="devis"> <h1>Devis santé</h1><br /> <h2>Vos besoins</h2> <div class="formulaire"> <form action="devissante2.php" method="post"> <table width="742" border="0" align="left" cellpadding="0" cellspacing="10"> <tr> <td>qui désirez-vous assurer?</td> <td class="center"><SELECT onChange="affichechoix(this.value)" name="qui" > <OPTION value="vous">vous</OPTION> <OPTION value="couple">votre couple</OPTION> <OPTION value="famille">votre famille</OPTION> </SELECT> </td> </tr> <tr> <td>vous êtes: </td> <td> <?php $requete="SELECT * FROM questions WHERE id_prestation='7' AND id_question='18'"; $exec_requete=mysql_query($requete); while($aff_requete=mysql_fetch_array($exec_requete)){ ?> <?php $ensemble = $aff_requete["choix_reponse"]; $tableau = explode(";",$ensemble); foreach ($tableau as $valeursexe) { ?> <input name="sexe" type="radio" value="<?php echo $valeursexe ?>" /><?php echo $valeursexe ?>&nbsp; <?php } ?> <?php } ?> </td> </tr> <tr> <td><input name="conjoint" type="hidden" value="aucun" /></td> <td><input name="nbrenfants" type="hidden" value="0" /></td> </tr> <tr> <td>votre situation familiale:</td> <td><select name="fami"> <option>faites votre choix</option> <?php $requete="SELECT * FROM questions WHERE id_prestation='7' AND id_question='19'"; $exec_requete=mysql_query($requete); while($aff_requete=mysql_fetch_array($exec_requete)){ ?> <?php $ensemble = $aff_requete["choix_reponse"]; $tableau = explode(";",$ensemble); foreach ($tableau as $valeurfami) { ?> <option value="<?php echo $valeurfami ?>"><?php echo $valeurfami ?></option> <?php } ?> <?php } ?> </select> </td> </tr> <tr> <td>votre date de naissance:</td> <td><input name="age" type="text" value="JJ/MM/AAAA" maxlength="10" /></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td><input name="cache" type="hidden" value="<?php echo $id?>" /></td> <td><input name="envoyer" type="submit" value="questions suivantes" /></td> </tr> </table> </form> </div><!--div formulaire--> <div id="cache"> <div id="couple" style="visibility:hidden"> <table width="300" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td>votre conjoint:</td> <td><input name="ageconjoint" type="text" value="JJ/MM/AAAA" maxlength="10" /></td> </tr> </table> </div><!--div couple--> <div id="famille" style="visibility:hidden"> <table width="300" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td>votre conjoint:</td> <td><input name="ageconjoint" type="text" value="JJ/MM/AAAA" maxlength="10" /></td> </tr> <tr> <td>Nbre d'enfant(s)</td> <?php $requete="SELECT * FROM questions WHERE id_question='6'"; $exec_requete=mysql_query($requete); while($aff_requete=mysql_fetch_array($exec_requete)){ ?> <td> <select name="nbrenfants"> <?php $ensemble = $aff_requete["choix_reponse"]; $tableau = explode(";",$ensemble); foreach ($tableau as $valeurnbrenfants) { ?> <option value="<?php echo $valeurnbrenfants ?>" placeholder="0"><?php echo $valeurnbrenfants ?></option> <?php } ?> <?php } ?> </select> </td> </tr> </table> </div><!--div famille--> </div><!--div cache-->
et le code javascript pour les champs cachés:

[javascript]
<script type="text/javascript">
function affichechoix(texte)
{
if (texte=="famille")
document.getElementById("famille").style.visibility= 'visible';
else
document.getElementById("famille").style.visibility= 'hidden';

if (texte=="couple")
document.getElementById("couple").style.visibility= 'visible';
else
document.getElementById("couple").style.visibility= 'hidden';
}
</script>
[/javascript]

si vous avez une solution pour mettre les champs masqués dans le formulaire sans tout "péter" je suis preneur

merci pour votre aide

Re: récuperer les valeurs d'une liste déroulante

Posté : 05 nov. 2012, 13:56
par dix2
salut,

il y a plusieurs solutions :
1) au lieu d'utiliser l'attribut visibility, tu peux utiliser l'attribut display
voir http://www.journaldunet.com/developpeur ... none.shtml

2) en HTML5, tu peux lier un champ à un formulaire et de ce fait, le champ peut se trouver en dehors des balises <form> </form>
voir http://dmouronval.developpez.com/tutori ... res-html5/

@+
dix2

Re: récuperer les valeurs d'une liste déroulante

Posté : 05 nov. 2012, 15:47
par tiomil
re,

j'ai remplacé l'attribut visibility par display, et remis mes 2 champs cachés dans mon formulaire, maintenant lorsque l'on fais un choix dans la liste déroulante elle reste sur ce choix, on ne peut plus sélectionner autre chose

Re: récuperer les valeurs d'une liste déroulante

Posté : 05 nov. 2012, 17:01
par Ryle
Le problème vient simplement du fait que tes deux champs supplémentaires ne sont pas placés à l'intérieur de la balise form de ton formulaire. Résultat, quand le formulaire est envoyé, ces deux valeurs ne sont pas transmises (puisqu'elles ne lui appartiennent pas).

Passe tes balises <form></form> autour de tes deux div et cela devrait résoudre le problème :)

Après, tu peux effectivement utiliser display (none, block, ...) au lieu visibility (hidden, visible) pour masquer tes éléments sans que la place qu'ils occupent ne reste vide, du coup au lieu d'une colonne à côté tu pourrais avoir une ligne de ton tableau qui apparaît ou disparaît selon ta sélection. Mais dans tous les cas, il faut que tes champs soient dans ton formulaire pour pouvoir recevoir leurs valeur :)

Re: récuperer les valeurs d'une liste déroulante

Posté : 06 nov. 2012, 12:56
par tiomil
la liste déroulante reste bloquée lorsqu'on fait un choix, le probleme ne viendrais t'il pas du " <SELECT onChange="affichechoix(this.value)>" ?
<div id="devis">
            <h1>Devis santé</h1><br />
            <h2>Vos besoins</h2>
                <div class="formulaire">
            <form action="devissante2.php" method="post">
                <table width="742" border="0" align="left" cellpadding="0" cellspacing="10">
              <tr>
                <td>qui désirez-vous assurer?</td>
                    
                <td class="center"><SELECT onChange="affichechoix(this.value)" name="qui" >
                <OPTION value="vous">vous</OPTION>
                <OPTION value="couple">votre couple</OPTION>
                <OPTION value="famille">votre famille</OPTION>
                </SELECT>
                </td>
              </tr>

Re: récuperer les valeurs d'une liste déroulante

Posté : 06 nov. 2012, 16:35
par cezame
Hello,

Perso je m 'y serais pris autrement d'un point de vu accessibilité et ergonomie c'est vraiment pas ça...
Je vais pas t'embrouiller plus que ça donc on va pas tout refaire non plus.

J'ai repris ton code en simplifiant pour tester j'ai pas de problème en particulier.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title></title>

  <script type="text/javascript">
    
	function affichechoix(texte)
{
if (texte=="famille")
document.getElementById("famille").style.display= 'block';
else
document.getElementById("famille").style.display= 'none';

if (texte=="couple")
document.getElementById("couple").style.display= 'block';
else
document.getElementById("couple").style.display= 'none';
}
  </script>
</head>
<body>
<form action="devissante2.php" method="post">
                
                   
                <SELECT onChange="affichechoix(this.value);" name="qui" >
                <OPTION value="vous">vous</OPTION>
                <OPTION value="couple">votre couple</OPTION>
                <OPTION value="famille">votre famille</OPTION>
                </SELECT>
				
				<div id="couple" style="display:none">
				couple
				</div>
				<div id="famille" style="display:none">
				famille
				</div>
</form>

</body>
</html>

Re: récuperer les valeurs d'une liste déroulante

Posté : 07 nov. 2012, 11:26
par tiomil
re,
pour l'ergonomie et l'accessibilité je me doute qu'il ya énormement de chose à revoir, je n'ai que quelques mois de pratique (formation débutée en janvier)

j'ai modifié le code de cezame car je voulais mettre un tableau dans mon formulaire
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title></title>

  <script type="text/javascript">
   
        function affichechoix(texte)
{
if (texte=="famille")
document.getElementById("famille").style.display= 'block';
else
document.getElementById("famille").style.display= 'none';

if (texte=="couple")
document.getElementById("couple").style.display= 'block';
else
document.getElementById("couple").style.display= 'none';
}
  </script>
</head>
<body>
<form action="devissante2.html" method="post">
              
                                  <tr>
                                    <td>Qui assurer?</td>
                                    <td>
                                    <SELECT onChange="affichechoix(this.value);" name="qui" >
                                    <OPTION value="vous">vous</OPTION>
                                    <OPTION value="couple">votre couple</OPTION>
                                    <OPTION value="famille">votre famille</OPTION>
                                    </SELECT>
                                    </td>
                                </tr>
                                <div id="couple" style="display:none">
                                <tr>
                                    <td>couple</td>
                                    <td><input name="couple" type="text" /></td>
                                </tr>
                                </div>
                                <div id="famille" style="display:none">
                                <tr>
                                	<td>date conjoint:</td>
                                    <td><input name="conjoint" type="text" /></td>
                                </tr>
                                <br />
                                <tr>
                                	<td>Nbre d'enfants</td>
                                    <td><select name="enfants">
                                    <option></option>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    </select></td>
                                </tr>
                                </div>
                                
</form>

</body>
</html>
effectivement ça fonctionne sauf si je rajoute la balise table pour mettre un tableau

merci pour votre aide

Re: récuperer les valeurs d'une liste déroulante

Posté : 07 nov. 2012, 16:32
par Ryle
C'est parce que certaines choses ne sont pas permises au sein d'un tableau. A l'intérieur d'une balise <table> les seules balises que tu fois pouvoir trouver sont <thead>, <tbody> voire directement <tr>. Aucune autre balise n'est autorisée, donc pas de <div> ou de <br> au niveau des <tr>. Idem, sous un <tr> on ne doit trouver que des <th> ou des <td> et rien d'autre. A l'intérieur de ta cellule en revanche, tu peux mettre tout ce que tu veux :)

En revanche tu peux mettre des id ou des styles (voire des classes) sur des lignes ou des cellules pour les masquer/afficher dynamiquement.

Re: récuperer les valeurs d'une liste déroulante

Posté : 07 nov. 2012, 20:02
par cezame
A la base les tableaux sont prévus pour mettre en forme des données, ils ont vite été détournés de leur utilisation pour faire de la mise en page à l' époque ou CSS existait pas.

Vu que tu débutes autant partir sur de bonnes bases et éviter d'utiliser les tableaux pour la mise en page, utilise plutôt le positionnement CSS et pense a séparer le contenu et la présentation.
Tu gagneras en accessiblité et en facilité d'utilisation/maintenance.

C'est un conseil que je te donne.