Hide/show formulier

[stebentje]

Hopelijk kan iemand mij hiermee helpen:

Bovenaan de pagina staat er een aankomstdatum en vertrekdatum die de klant dient in te vullen.

Daarna dienen ze een keuze aan te klikken:

- keuze 1
- keuze 2
of
- keuze 3

Bij het aanklikken van een bepaalde keuze zouden de keuze's moeten verdwijnen en zou er een invulformulier moeten tevoorschijn komen

Hoe kan ik dit oplossen ZONDER andere pagina's, maar dus met een soort HIDE/SHOW functief?

Alle browsers dienen dit te ondersteunen...

Iemand een idee? Alvast bedankt!

 

[Egel]

Iets als dit?

<style type="text/css">
 .part { display: none; width: 480px; height: 320px; background: #eee;}
</style>

<script type="text/javascript">
 // Egel 070405 ;)
 function showPart(nr) {
  for (var i = 1; i <= 3; i++) {
   document.getElementById('part' + i).style.display = (nr == i ? 'block' : 'none');
   };
  };
</script>

<form>
 <input type="button" onclick="showPart(1)" value="Deel 1">
 <input type="button" onclick="showPart(2)" value="Deel 2">
 <input type="button" onclick="showPart(3)" value="Deel 3">
 <input type="submit" value="Versturen">
 <br><br>
 <div id="part1" class="part" style="display: block;">
  [Deel 1]
 </div>
 <div id="part2" class="part">
  [Deel 2]
 </div>
 <div id="part3" class="part">
  [Deel 3]
 </div>
</form>

Vr.Gr. Egel.

 

[stebentje]

Ja, inderdaad zoiets :thumb:

Maar bestaat er ook de mogelijkheid dat de 3 knoppen verdwijnen wanneer je op een bepaalde knop drukt?

 

[Egel]

Ja. Door ze in eenzelfde div te zetten als de drie delen:

<style type="text/css">
 .part { display: none; width: 480px; height: 320px; background: #eee;}
</style>

<script type="text/javascript">
 // Egel 070423 ;)
 function showPart(nr) {
  for (var i = 0; i <= 3; i++) {
   document.getElementById('part' + i).style.display = (nr == i ? 'block' : 'none');
   };
  };
</script>

<form>
 <input type="button" onclick="showPart(0)" value="Overnieuw">
 <div id="part0" class="part" style="display: block;">
  <input type="button" onclick="showPart(1)" value="Deel 1">
  <input type="button" onclick="showPart(2)" value="Deel 2">
  <input type="button" onclick="showPart(3)" value="Deel 3">
 </div>
 <div id="part1" class="part">
  [Deel 1]
 </div>
 <div id="part2" class="part">
  [Deel 2]
 </div>
 <div id="part3" class="part">
  [Deel 3]
 </div>
 <input type="submit" value="Versturen">
 <input type="reset" value="Beginwaarden" onclick="showPart(0)">
</form>

Je kunt een knopje als 'Overnieuw' gebruiken om terug te gaan.

Bij een reset-knop moet ook onclick="showPart(0)" worden toegevoegd.


Vr.Gr. Egel.

 

[stebentje]

:thumb: amai, dit is exact wat ik zoek!!! Hartelijk dank voor uw hulp!!!:thumb:

ps: Ondersteunen alle browsers dit?

 

[Egel]

Graag gedaan!

Alle nieuwere browsers ondersteunen het, IE versie 4 niet.

Maar IE, FX, Opera, Netscape zullen het allemaal goed doen.


Vr.Gr. Egel.