Bonjour, j'ai un soucis avec innerHtml. J'aimerais faire un formulaire qui se modifie en fonction du choix des gens.
Par exemple, en fonction de si la personne choisit 'appart' ou 'maison'.
Voici mon code HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
 <div id="bien" >
   <tr>
    <td><label for="type_bien">Type de bien :</label>
    </td>
    <td><select name="type_bien" id="type_bien" onchange='changerForm(document.getElementById("type_bien").value)' >
               <option value="1" >Appartement</option>
               <option value="2" >Maison</option>
	   </select>
    </td>
   </tr>
 
   </div>
 
   <div id="appart" >
     <tr id="appart1" >
        <td><label for="etage">Etage :</label></td>
	<td><input name="etage" id="etage" /></td>
     </tr>
   </div>
 
   <div id="maison" >
   </div>
</table>
et voici mon Javascript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="Javascript">
	function changerForm(type_bien) {
	if ( type_bien == "2" )
		{
			document.getElementById("appart1").innerHTML = '';
			document.getElementById("maison").innerHTML = '<tr id="maison1" ><td><input name="button_maison" id="button_maison" value="coucou1" /><br/></td><td><input name="button_maison2" id="button_maison2" value="coucou2" /></td></tr>';
		}
	else
		{
			document.getElementById("appart1").innerHTML = '<tr id="appart1" ><td><label for="etage">Etage :</label></td><td><input name="etage" id="etage" /></td></tr>';
			document.getElementById("maison1").innerHTML = '';
		}
	}
</script>
Et voici mon problème :
Lorsque je clique sur 'maison', il me rajoute les champs au tout début. Alors que mon code HTML précise qu'il devrait apparaître après (cf le div "maison').
De même, si je clique ensuite sur 'appart', l'input 'etage' réapparait, mais décalé sur la droite :/
Quelqu'un sait-il pourquoi ça se passe ainsi ?

Merci par avance !