Afficher les options selon le choix sans recharger la page

Bonjour j'ai un petit problème j'ai fait mon code "select"

<form action="index.php" method="post" name="action">
<tr>
    <td width="23%"><strong>Forme juridique :</strong></td>
    <td><select id="formejuridique" name="formejuridique">
   <option value="Particulier">Particulier</option>
   <option value="Societe">Société</option>
   <option value="Association">Association</option>
    </select></td>
</tr>
</form>

Et quand la personne choisi "Société" ou "Association" je voudrais que sa affiche ceci en plus

<tr>
    <td><strong>Raison sociale :</strong></td>
    <td><input type="text" id="societe" name="societe" size="35" value="" /></td>
    <td><strong>Code APE :</strong></td>
    <td><input type="text" name="codeape" size="10" value="" /></td>
</tr>
<tr>
    <td width="23%"><strong>SIRET :</strong></td>
    <td><input type="text" name="numsiret" size="35" value="" /></td>
    <td width="23%"><strong>Num TVA Intra :</strong></td>
    <td><input type="text" name="numtvaintra" size="35" value="" /></td>
</tr> 

Mais pour faire ceci je ne sait comment m'y prendre j'ai essayer de chercher dans google mais mes recherches n'aboutissent a rien je pense avec du javascript mais comment ? Merci pour vos réponses

Le plus simple peut-être, je connais plus JQuery que Javascript, serait d'utiliser JQuery.

Le code ressemblerai à ça

$(document).ready(function(){
  if($("#formejuridique option:selected").val() == "Société") {
    $("#id=societe").show();
  }
  elseif($("#formejuridique option:selected").val() == "Association") {
    $("#id=asso").show();
  }
  else {
    $("#id=asso").hide();
    $("#id=societe").hide();
  }
});

Et il faut modifer

<tr [b]id="societe"[/b]>

et

<tr [b]id="asso"[/b]>

Tu peux évidemment remplacer les "asso" et "société" par ce que tu veux. Et il faudrait ajouter dans le CSS ceci.

#asso, #societe { display : none;}

Modifié par kurt11 (28 Apr 2009 - 17:00)

Merci pour ta réponse mais j'utilise mootools et je pense que d'utiliser jquery n'est pas compatible
Modifié par staff (28 Apr 2009 - 17:17)

On peut sans doute faire sensiblement la même chose avec Mootools.

Marche à suivre:
1. apprendre les bases de JavaScript si elles ne sont pas connues;
2. lire la documentation de base de Mootools;
3. commencer à écrire un script JS/Mootools qui répond à tes besoins, et nous le soumettre si tu bloques.

Bonne continuation.

A la base je ne voulait pas utiliser mootools ni jquery mais javascript bien entendu je vous demandez ici parce que j'ai bon lire et relire je n'y arrive pas c'est pourquoi je me retourne vers vous croyez moi si je savait je le ferai moi même au lieu d'embêter les gens.

Se que j'ai commencer a faire c'est sa mais sa ne fonctionne pas

function afficher(id)
{
if(document.getElementById(id).style.visibility=="hidden")
        {
	document.getElementById(id).style.visibility="visible";
	}
	else{
	document.getElementById(id).style.visibility="hidden";
	}
}

		</script>

Modifié par staff (28 Apr 2009 - 21:21)

J'utiliserais plutôt une classe qu'une manipulation directe des styles de l'élément. Ça permet de gérer côté CSS ce qu'on veut faire exactement, si on souhaite masquer l'élément en le positionnant en absolu en dehors du viewport (plus accessible dans certains cas), etc.

Dans l'idéal, il faudrait une fonction qui rajoute la classe de masquage au chargement du DOM, comme ça en l'absence de JavaScript les contenus sont visibles.

La fonction d'affichage/masquage elle-même peut donner quelque chose comme ceci:

function afficher(id) {
	var cible = document.getElementById(id);
	if (cible.className == 'cache') {
		cible.className = 'visible';
	} else {
		cible.className = 'cache';
	}
}

C'est en gros ce que tu fais, mais avec moins de répétitions (grâce à une simple variable), et en passant par les classes plutôt que par element.style.visibility. D'ailleurs, diagnostic rapide: la condition initiale de ta fonction ne marche pas car la propriété visibility n'est pas définie ou est définie dans la feuille de styles, et element.style.visibility ne permet d'accéder qu'à la propriété CSS visibility définie dans l'attribut HTML style de l'élément (de mémoire, à vérifier).

Note: la solution que je propose est sommaire, et ne marche que si tu n'utilises que ces classes ("cache" et "visible") pour les éléments visés, et pas d'autres classes ou des classes multiples.

Pour savoir si tu vas ouvrir ou non ta boite selon l'option sélectionnée, il faut savoir quel options a été sélectionné, pour cela il faut on utilise l'événement "onchange" sur le select box.
Ensuite tu peux, soit récupérer la valeur de l'option soit lui attribuer une classe qui indiquera qu'elle doit ouvrir la boite, exemple :

<form action="index.php" method="post" name="action">
    
   <select id="formejuridique" name="formejuridique">
      <option value="Particulier">Particulier</option>
      <option value="Societe" class="open_company_box">Société</option>
      <option value="Association" class="open_company_box">Association</option>
   </select>
       
   <div id="company_box" class="hide">
      <div>
         <label>Raison sociale :</label>
         <input type="text" id="societe" name="societe" size="35" value="" />
         <label>Code APE :</label>
         <input type="text" name="codeape" size="10" value="" />
      </div>
      <div>
         <label>SIRET :</label>
         <input type="text" name="numsiret" size="35" value="" />
         <label>Num TVA Intra :</label>
         <input type="text" name="numtvaintra" size="35" value="" />
      </div>
   </div>
</form>

<script type="text/javascript">
   function showCompanyBox(){
      document.getElementById('formejuridique').onchange = function(){
         var companyFields = document.getElementById('company_box');
         var selected = this.options[this.selectedIndex];
         if(selected.className == 'open_company_box'){      
            if(companyFields.className == 'hide'){
               companyFields.className = '';
            }
         }else{
            companyFields.className = 'hide';
         }
      }
   }
   showCompanyBox();
</script>

Florent V. a écrit :
Note: la solution que je propose est sommaire, et ne marche que si tu n'utilises que ces classes ("cache" et "visible") pour les éléments visés, et pas d'autres classes ou des classes multiples.

Très important, et c'est pour cela que quand on a beaucoup de scripts de ce genre sur une page on utilise des bibliothèques. Ces bibliothèque ne constitue pas un langage différent, c'est absurde de dire je code en jQuery ou en Mootools, on code avec un bibliothèque qui va nous aider dans ces opérations.

Par exemple avec Mootools au lieu d'écrire :

if(selected.className == 'open_company_box'){}

on écrit

if(selected.hasClass('open_company_box')){}

La fonction hasClass permet de savoir si l'élément à la classe en question même si celui ci à plusieurs classes.

Et hasClass dans Mootools est une fonction du genre :

function hasClass(el, cn){
  if(el) return el.className.match(new RegExp("(^|\\s)"+cn+"(\\s|$)"));
}

Avec jQuery la fonction s'écrirait :

function showCompanyBox(){
   $('#formejuridique').change(function(){
      if($("#formejuridique option:selected").hasClass('open_company_box')){
         $('company_box').show();
      }else{
         $('company_box').hide();
      };  
   });
}

Modifié par matmat (29 Apr 2009 - 04:48)