Pour présenter deux volets d'un même formulaire sur une seule page, je souhaite présenter chacune des parties dans un bloc <div>.
En CSS, aucun problème pour faire apparaître, à la demande, l'un ou l'autre bloc et donc, l'un ou l'autre volet dudit formulaire.
Idéalement, cependant, chacun des blocs doit être présenté au même endroit de la page.
J'imagine que le problème est trivial, mais pour le coup, je cale sévère.
L'idée de base est de fixer, tour à tour, la propriété "visibility" de chaque bloc à "hidden" ou à "visible".
J'en suis à qque chose comme ceci:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">
function swap (c1, c2)
{
document.getElementById(c1).style.visibility = "hidden";
document.getElementById(c2).style.visibility = "visible";
}
</script>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
Un peu de texte, un peu de texte,...<br>
<form name="form1" method="post" action="test.php">
<div id="cadre1"
style="background-color: yellow; visibility: visible;"
onclick="swap('cadre1','cadre2')">
Le contenu du bloc 1
</div>
<div id="cadre2"
style="background-color: red; visibility: hidden;"
onclick="swap('cadre2','cadre1')">
Le contenu du bloc 2<br>
Le contenu du bloc 2
</div>
<hr />
[Bouton d'envoi]
</form>
</body>
</html>
Je serais très reconnaissant aux puits de sciences qui passent par ici de bien vouloir se pencher sur mon soucis.