Différents Choix Formulaire

09 oct. 2010, 15:15

Bonjour à tous,

J'ai actuellement un petit problème, je n'arrive pas à mettre le doigt sur les bons mots clés donc je ne trouve pas de réponses.. je viens donc demander conseil au plus expérimenté.

Je souhaiterais créer un formulaire de la forme suivante :

- Un choix de couleur peau parmi les deux
Pâle
Mate

- Un choix de couleur des yeux en fonction de la race.
Pâle : Noir, Rouge, Marron. (3 choix)
Mate : Vert, , Bleu (2 choix)

J'espère avoir été le plus précis possible, n'hésitez pas à me poser des questions si vous ne comprenez pas ma question..

Merci d'avance, j'attends avec impatience vos réponses..

09 oct. 2010, 15:43

Une liste de choix ? (comme pour sélectionner la taille du texte sur ce forum)

<select name="ma_liste">
  <option value="valeur_1">Mon choix numéro 1</option>
  <option value="valeur_2">Mon choix numéro 2</option>
</select>

09 oct. 2010, 15:59

Merci de ta réponse,

Je connais les codes nécessaire, pour l'instant j'ai ceci :

        <tr>
            <td><FONT size="1">Teint :&nbsp;</font></td>
            <td>    <select name="teint">
                    <option value="Pale">Pâle</option>
                    <option value="Mate">Mate</option>
                    <option value="Foncé">Foncé</option>
                    </select>
            </td>
        </tr>
        <tr>
            <td><FONT size="1">Couleur des yeux :&nbsp;</font></td>
            <td>    <select name="c_eyes">
                    <option value="Noir">Noir</option>
                    <option value="Rouge">Rouge</option>
                    <option value="MarronC">Noisette</option>
                    <option value="MarronF">Marron Foncé</option>
                    <option value="VertC">Vert Clair</option>
                    <option value="VertF">Vert Foncé</option>
                    <option value="BleuC">Bleu Clair</option>
                    <option value="BleuF">Bleu Foncé</option>
                    </select></td>
        </tr>

Ce que je cherche à faire c'est de limité certaines couleurs à un teint particulier, ai-je été un peu plus clair ?

09 oct. 2010, 17:42

Personne n'a de solution ?

09 oct. 2010, 20:53

Le mot clé qu'il te manque est peut-être listes liées ? Regardes cet exemple si cela te conviens

<?php
if (isset($_POST["envoyer"]))
{
        //Région
        print_r('sélection = ' .$_POST["selection"].'<br />');
		
		echo '<pre>';
		print_r($_POST);
		echo '</pre>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_ensemble_select,id_select)
{
                var ensemble_select = document.getElementById(id_ensemble_select);
                var selection = document.getElementById(id_select);
               
                if(ensemble_select && selection)
                {
                                var tab = new Array();
                               
                                //cherche les balises select inlues dans l'id id_ensemble_select (id = categorie dans cet exemple)
                                tab = ensemble_select.getElementsByTagName('select');
                               
                                for (i=0; i < tab.length; i++)        
                                        {
                                                /* on regarde si l'id du select est celui qu'on recherche */
                                                if (tab[i].id == id_select)
                                                        {
                                                                // Met le select en disable à false et le fait afficher
                                                                tab[i].disabled = false;
                                                                tab[i].style.display = 'inline';
                                                        }
                                                        else
                                                        {
                                                                // Met le select en disable à true et le cache
                                                                tab[i].disabled = true;
                                                                tab[i].style.display = 'none';
                                                        }
                                        }
                                // Affiche la partie cachée du formulaire (id = categorie dans cet exemple)
                                ensemble_select.style.visibility = "visible";
                }
}
-->
</script>
<style type="text/css">
#categorie{
visibility:hidden;
}
</style>
</head>

<body>


<div style="position: relative">
<form action = "#" method = "post">

<p style="font-style:italic">Deux possibilités uniquement pour exemple. Pour l'utilisation finale choisir soit les boutons radios, soit le select.<br />
1/ La classe des boutons radios (ou du premier select) doit correspondre à l'id du bloc contenant la deuxième liste.<br />
2/ Les valeurs des boutons radio (ou des options du premier select) doivent correspondre aux id des selects de la deuxième liste.<br />
</p>

	juniors <input type="radio" name = "choix_radio_categorie" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
	
	seniors <input type="radio" name = "choix_radio_categorie" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
	

    <select name = "choix_select_categorie" class = "categorie" onchange = "Affiche_liste(this.className,this.value)" />
       
       <option value = "">«Choisissez»</option>
       <option value = "juniors">juniors</option>
       <option value = "seniors">seniors</option>
           
    </select>

<p style="font-style:italic">Liste déroulante qui s'affichera en fonction du choix précédent :</p>

     <p id = "categorie">
	 
    <select name = "selection" id = "juniors">
       
       <option value = "0">«Choisissez»</option>
       <option value = "junior1">junior1</option>
       <option value = "junior2">junior2</option>
           
    </select>
       
       
    <select name = "selection" id = "seniors">
       
       <option value = "0">«Choisissez»</option>
       <option value = "senior1">senior1</option>
       <option value = "senior2">senior2</option>
       <option value = "senior3">senior3</option>
           
    </select>
       
   </p>
   
   <p style="font-style:italic">Autre champ exemple texte</p>
   <input type="text" name="autre_champ"/>
   <br />
   
   <input name = "envoyer" value = "envoyer" type = "submit"/>

 
</form>
</div>

</body>
</html>

Sinon il y a d'autres solutions dans ce tuto

09 oct. 2010, 21:51

C'est exactement ce que je cherchais merci infiniment !

10 oct. 2010, 04:29

Alors un petit résolu ?

Différents Choix Formulaire

Qui est en ligne