Affichage d'un nouveau champs si une valeur est selectionner

Sujet résolu

30 juin 2011 à 16:13:00

Bonjour
J'aurais une question, j'ai un formulaire d'inscription sur mon site
Je demande plusieurs informations concernant la personne et a un moment je demande qu'elle parcourt la personne aimerait faire avec une liste déroulante
les options sont: Famille, Boucle 1, Boucle 2 ou Individuel.

Si les boucle 1,Boucle 2 ou Individuel sont sélectionner seulement une personne peut être s'inscrire
Mais si le parcourt famille est sélectionner j'aimerais qu'un nouveau champ apparaisse pour demander le nombre d'enfant et d'adulte qu'il y aura

a mon avis il faudrait utiliser du JavaScript mais je mis connais pas trop dans se langage alors un peut d'aide serait la bienvenue

Voila mon formulaire

<script>
	var famille = "Famille";
	var individuel = "Individuel";
	var boucle1 = "Boucle 1";
	var boucle2 = "Boucle 2";
	
	
	
</script>

<body>

<form id="form1" name="form1" method="post" action="">
  <label for="boucle"></label>
  <select name="boucle" id="boucle">
<option>
	<script>
        document.write(famille);
    </script>
</option>
<option>
	<script>
        document.write(individuel);
    </script>
</option>
<option>
	<script>
        document.write(boucle1);
    </script>
</option>
<option>
	<script>
        document.write(boucle2);
    </script>
</option>

  </select>

</form>

NoseborN

30 juin 2011 à 17:14:05

Alors, reprenons le cours de Javascript depuis le début.
Il était une fois ...

Nan mais sérieux, j'déconne. Javascript est extrêmement simple à apprendre et quand on voit les possibilités, ça en vaut largement le coup. Je comprends que t'es en train de faire un site, tu veux pas te mettre dans un nouveau cours ...

Je peux soit te donner la solution bêtement, soit te guider/former sur le langage.
A toi de voir, si tu veux t'as la première solution en dessous.

<form id="form1" name="form1" method="post" action="">
  <label for="boucle">Choix</label>
  <select name="boucle" id="boucle" onchange="changer(this.selectedIndex)">
    <option value="fami" selected="selected">Famille</option>
    <option value="indi">Individuel</option>
    <option value="b1">Boucle 1</option>
    <option value="b2">Boucle 2</option>
  </select>
  <span id="plusieur">
    nombre de personne : <input type="text" name="nbPers"/>
  </span>
</form>

function changer(index){
  if(index == 0){
    document.getElementById("plusieur").style.display = "";
  }
  else{
    document.getElementById("plusieur").style.display = "none";
  }
}

cherub1043

30 juin 2011 à 17:52:11

Merci pour ta réponse
Je compte bien l'apprendre mais pour l'instant il faut que je finisse le site dans un certain délais et je n'ai pas le temps de l'apprendre entre temps.
Je crois qu'il ya quelque chose qui ne marche pas dans le code que tu m'as donnée car même si 'famille' n'est pas sélectionner il affiche quand même le champ nombre de personne

EDIT : j'ai trouvé tu avais fais une faute de syntaxe je sais pas si c'étais volontaire

NoseborN

30 juin 2011 à 18:30:44

Heu nan involontaire.

C'est corrigé

cherub1043

30 juin 2011 à 18:45:14

Maintenant je galère pour le mettre dans mon tableau, c'est possible de mettre une class à la place d'un id pour le span 'plusieur' ?
pour mettre la class a chaque cellule ?
car cette syntaxe ne marche

<table>
  <span id="plusieur">
    <tr>
             
            <td>Adulte : </td>
            <td><input type="text" name="adulte"/></td>
    </tr> 		
    <tr>            
            <td>Enfant :</td> 
            <td><input type="text" name="enfant"/></td>
    </tr>   
  </span>
</table>

NoseborN

30 juin 2011 à 18:46:47

Met l'id="plusieur" sur le <tr> et enlève le span

cherub1043

30 juin 2011 à 19:16:24

Maintenant sa marche avec la première ligne mais pas la deuxième
voila le code

<tr id="plusieur">   
              <td>Adulte : </td>
              <td><input type="text" name="adulte"/></td>
        </tr>     
     	<tr id="plusieur">   
              <td>Enfant :</td> 
              <td><input type="text" name="enfant"/></td>
    	</tr>   
 
        </table>

NoseborN

30 juin 2011 à 19:35:59

Dans ce cas, tu met deux id (plus1 et plus2) sur les deux <tr>. Sans oublier de rajouter dans le js deux lignes en plus (getElem("plus1").display = ;getElem("plus2").display;)

cherub1043

30 juin 2011 à 19:42:03

Sa marche !

Merci beaucoup pour ton aide

Yo123456

2 août 2011 à 12:26:51

Je viens faire mon relou, mais ce code est invalide !!!
il est INTERDIT de mettre plusieurs id à des balises au sein d'une même page !
Pour contrer ce soucis, il faut manipuler différemment ton code, ou plus simplement passer par une librairie comme jQuery ou Prototype qui intègre des outils te permettant de sélectionner des éléments par leur class.