Page 1 sur 1
Afficher les options selon le choix sans recharger la page
Posté : 26 avr. 2009, 15:07
par scorpion
Bonjour j'ai un petit problème j'ai fait mon code "select"
Code : Tout sélectionner
<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
Code : Tout sélectionner
<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 je pense avec du javascript mais comment ? Merci pour vos réponses
Posté : 26 avr. 2009, 17:14
par AB
Tu peux utiliser le DOM. Dans ce cas tu devrais avoir besoin des fonctions
Code : Tout sélectionner
document.getElementById
document.createElement
setAttribute
document.createTextNode
appendChild
Pour trouver des explications et exemples tu peux utiliser selfhtml (en rentrant par exemple chacune de ces fonctions dans google suivies de selfhml, ex : "createElement selfhtml")
Posté : 26 avr. 2009, 19:40
par Ryle
Tu peux aussi de façon plus simple, laisser ce code présent dès le chargement de ta page et jouer simplement sur le style pour les masquer (display:none ou visibility:hidden selon ce dont tu as besoin)
Ensuite, en fonction de ce qui est choisir par l'utilisateur, tu mets à jour la propriété des éléments que tu veux faire apparaitre/disparaitre en changeant l'attribut :
document.getElementById('idDeLObjetAAfficherMasquer').style.display = 'block'; // ou 'none' le cas échéant
Posté : 26 avr. 2009, 19:52
par Genova
Attention, car pour cacher / afficher des lignes de tables (<tr>) en utilisant la propriété CSS display, il ne faut pas utiliser block mais table-row pour les navigateurs respectant les standards. Pour IE par contre (du moins IE <= 7, je n'ai pas testé sur le 8) il faut utiliser block.
Posté : 28 avr. 2009, 11:20
par scorpion
Merci beaucoup pour toutes vos réponses je suis vraiment nulle en javascript je n'arrive pas a faire ce que je voudrait avec vos informations
Posté : 28 avr. 2009, 11:40
par Nagol
le plus compatible et universel c'est de faire Node.style.display = 'none'; pour cacher et Node.style.display = ''; pour montrer les block inline inline-block table-row et autres sont particulièrement pénibles le fait de ne rien mettre laissera au navigateur le soin de choisir le format approprié.
Posté : 28 avr. 2009, 12:43
par scorpion
je me suis peut etre tromper mais si je faisait ceci :
function cacheMontre(val) {
document.getElementById('config1').style.display = 'none';
document.getElementById('config2').style.display = 'none';
document.getElementById('config3').style.display = 'none';
document.getElementById(val).style.display = 'block';
}
Es ce que sa serai bon ?