Afficher les options selon le choix sans recharger la page

26 avr. 2009, 15:07

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

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

26 avr. 2009, 17:14

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")

26 avr. 2009, 19:40

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

26 avr. 2009, 19:52

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.

28 avr. 2009, 11:20

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

28 avr. 2009, 11:40

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é.

28 avr. 2009, 12:43

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 ?

Afficher les options selon le choix sans recharger la page

Qui est en ligne