Formulaire variable en javascript

Bonjour,
Je cherche désespérément un moyen de me sortir de la situation suivante qui me creuse les méninge depuis un certain temps...ça doit pourtant pas être si compliqué !!

Voilà l'affaire: j'ai un menu deroulant en html construit de cette facon

<FORM name="liste1" onsubmit="modif();"><center>Type de boîte
<SELECT name="list" size="1" >
<OPTION value="0" id="liste" >Gestionnaire</option>
<OPTION value="1" id="liste" >Directeur</option>
<OPTION value="2" id="liste" >Chef de travaux</option>
</SELECT>

Il y a , juste sous cette liste, des champs dans lesquels on entre des informations sur le type de personne que l'on a selectionné dans la liste. (Nom prénom mail...)

Cependant, le nombre de champs va varier en fonction du type de personne (gestionnaire, directeur ou chef e travux).

Il faut que je puisse changer simplement la zone où se trouvent les champs en fonction de la personne selectionnée

Si on clique sur gestionnaire: on aura par exemple

champ 1: [ ]
champ 2: [ ]

et si on clique sur chef de travaux, on aura 3 champs. (PAR exemple je précise)


J'ai essayé de coder cela de deux façons différentes: en utilisant l'id que j'ai donné avec getelementbyid(), ou en récupérant la value (0, 1 ou 2) dans l'url par une fonction javascript très simple faite maison.

GROS PROBLEME. Il semblerait que la fonction s'execute AVANT que le numéro (value) ne s'affiche dans l'URL. Donc, par défaut, la valeur sera toujours de 0. Au final, quel que soit l'endroit où je cliquerai, j'obtiendrai toujours les mêmes nouveau champs correspondant à la value 0 du gestionnaire et qui plus est dans une autre page HTML !! Je voudrais juste faire bouger dynamiquement la zone où se trouvent les champs.

C'est un peu barbare comme explications mais j'essaie d'être le plus clair possible.
Pour finir, voici le code de la fonction permettant la changement des champs en fonction de la personne selectionnée:


if(document.getElementById('liste').value == '0')
{
text="<center>champ1: <input type='text' name='champ1' size='20'><p>";
text+="champ2: <input type='text' name='champ1' size='20'><p>";
text+="champ3: <input type='text' name='champ1' size='20'><p></center>";
document.write(text);
}

else if(document.getElementById('liste').value == '1')
{
text2="champ1: <input type='text' name='champ1' size='20'><p>";
document.write(text2);
}

else if(document.getElementById('liste').value == '2')
{
text3+="champ1: <input type='text' name='champ1' size='20'><p>";
text3+="champ2: <input type='text' name='champ1' size='20'><p>"
document.write(text3);
}



Il y avait un second code qui me donne strictement la même chose:

function modif()
{
var i=urlgetpart();//Cette fonction renvoi le numéro (value) de la liste qui a été selectionné (donc 0,1 ou 2)

if(i==0)
{
text="<center><div>champ1: <input type='text' name='champ1' size='20'><p>";
text+="champ2: <input type='text' name='champ1' size='20'><p>";
text+="champ2: <input type='text' name='champ1' size='20'><p></div></center>"
document.write(text);

}

if(i==1)
{
text2="<center><div>champ2: <input type='text' name='champ1' size='20'><p>"; //Directeur
text2+="champ2: <input type='text' name='champ1' size='20'><p></div></center>";
document.write(text2);
}

if(i==2)
{
text3="<center><div>champ2: <input type='text' name='champ1' size='20'><p></div></center>";
document.write(text3); //Chef de travaux
}

Je doute fort que quelqu'un ait la patiente digne d'un moine tibétain de me répondre, mais j'aurais tenté le coup. J'ai parcouru tout le web pour trouver... et rien à faire.

Sur ceux bonne journée, et merci pour votre éventuelle patience.