Eventueel verborgen vragen in PHP

Status
Niet open voor verdere reacties.
A

annuh

Gebruiker
Lid geworden
15 sep 2006
Berichten
40
Hallo,
Ik ben bezig met een enquete.
Dit zijn enkele vragen

1) Heb je een spelcomputer (checkbox, ja of nee)
2) Zo ja, welke?
3) Ben je er tevreden mee

Nu wil ik dat je alleen 2 en 3 ziet als er ja geantwoord is bij vraag 1.
Hoe doe ik dat?
Alvast bedankt!
 
In dit geval is Javascript een handigere oplossing, want dan kan het formulier tijdens het invullen worden aangepast. Hier vind je een mooie tutorial (specifiek het laatste kopje, "Formulierelementen uitschakelen") :)
 
Bedankt, dit komt aardig in de buurt! Is het echter ook mogelijk om die vragen dan helemaal weg te laten als er bij vraag 1 'nee' is ingevuld? En dus niet alleen 'disable maken'.

Is het ook nog mogelijk om te vragen: "hoeveel spelcomputers heb je?"
En als ze dan bijvoorbeeld 3 kiezen dat er dan 3 velden komen waar de bezoeker
wat in kan tikken?

Alvast bedankt!
 
annuh zei:
Is het echter ook mogelijk om die vragen dan helemaal weg te laten als er bij vraag 1 'nee' is ingevuld? En dus niet alleen 'disable maken'.
Klik om te vergroten...

Dat kan. De code wordt dan iets als dit:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head> 
   <TITLE>Cursus Javascript - IVO Brugge</TITLE>
   <link rel="stylesheet" type="text/css" href="vb.css">
<script language= "JavaScript">
<!--
function initieer(){
   //codematig het textvak disablen
   //werken met het attribuut disabled in de input-tag
   //zorgt ervoor dat in Firefox het element niet meer enabled wordt
   f.aantaldieren.disabled = true;
   f.aantaldieren.style.visibility = "hidden";
}
function controle(){
   if(f.naam.value == "" || f.voornaam.value == "") {
      alert('Vul uw naam en voornaam in aub.');
      return false;
   }
   return true;
}

function CHKhuisdier(){
   if(f.huisdier.checked){
      f.aantaldieren.disabled = false;
      f.aantaldieren.style.visibility = "visible";
      f.aantaldieren.value = "1";
   } else {
      f.aantaldieren.disabled = true;
      f.aantaldieren.style.visibility = "hidden";
      f.aantaldieren.value = "";
   }
}
//-->
</script>
</head>

<body onload="initieer()">
<h1>Huisdieren</h1>
<form id="f" name="f" action="../../formscript.asp" method="POST" onsubmit="return controle()">
<table>
<tr>
       <td>Naam:</td>
       <td><input name="naam" type="text" value=""></td>
</tr>
<tr>
       <td>Voornaam:</td>
       <td><input name="voornaam" type="text" value=""></td>
</tr>
<tr>
       <td><input type="checkbox" name="huisdier" value="HDOK" onclick="CHKhuisdier()">Ik heb huisdieren.</td>
       <td>
      Aantal:
      <input style="width:30px;text-align:right" type="text" name="aantaldieren" value="">
      </td>
</tr>
</table>

<p><input type="submit" value="Toon keuze">
</form>
</body>
</html>

Ik heb hierbij de visibility eigenschap (f.aantaldieren.style.visibility) gebruikt, maar met display kan het ook. Het verschil is dat visibility:hidden de ruimte die is gereserveerd voor het element vrijhoudt, en display:none niet (dan gaat de layout dus schuiven).

annuh zei:
Is het ook nog mogelijk om te vragen: "hoeveel spelcomputers heb je?"
En als ze dan bijvoorbeeld 3 kiezen dat er dan 3 velden komen waar de bezoeker
wat in kan tikken?
Klik om te vergroten...

Natuurlijk, daarvoor heb je een combinatie nodig van de verschillende technieken in de tutorial. Dat ga ik je niet voorkauwen ;). Maar misschien is het ook beter daarvoor gewoon checkboxes (of eventueel lijsten - zie "Meervoudige selecties" in de tutorial) te gebruiken, want dat scheelt de bezoeker heel wat tikwerk.

Ik verplaats deze thread trouwens even naar Programmeren > Javascript :)
 
Laatst bewerkt:
Heel erg bedankt voor je antwoorden!

Nu wou ik ook nog graag zoiets maken: de bezoeker kan dus kiezen welke
spelcomputers hij heeft (waarschijnlijk ga ik dat doen met checkboxen).
Maar bij de volgende prijs moet hij invullen wat hoeveel hij er voor betaald heeft.

Dus als hij "Playstation 2" én "Xbox" aanvinkt, moet er een 'tabel' bij de volgende vraag staan:
Naam Spelcomputer(s): | Prijs
Playstation 2 | hier moet een invulveld dan staan voor de bezoeker kan invullen wat hij betaald heeft.
Xbox | En hier ook.

Is zoiets ook mogelijk?
Of hoe zou ik dit ook anders kunnen doen?
 
Een vlug opzetje:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head> 
   <TITLE>Cursus Javascript - IVO Brugge</TITLE>
   <link rel="stylesheet" type="text/css" href="vb.css">
<script language= "JavaScript">
<!--
function initieer(){
   document.getElementById('tr_xbox').style.visibility = "hidden";
   document.getElementById('tr_ps3').style.visibility = "hidden";
   document.getElementById('tr_wii').style.visibility = "hidden";
}

function CHKconsole(){
   if(f.xbox.checked){
      document.getElementById('tr_xbox').style.visibility = "visible";
   } else {
      document.getElementById('tr_xbox').style.visibility = "hidden";
   }
   if(f.ps3.checked){
      document.getElementById('tr_ps3').style.visibility = "visible";
   } else {
      document.getElementById('tr_ps3').style.visibility = "hidden";
   }
   if(f.wii.checked){
      document.getElementById('tr_wii').style.visibility = "visible";
   } else {
      document.getElementById('tr_wii').style.visibility = "hidden";
   }
}
//-->
</script>
</head>

<body onload="initieer()">
<h1>Consoles</h1>
<form id="f" name="f" action="#" method="POST" onsubmit="return controle()">

<input type="checkbox" name="xbox" value="1" onclick="CHKconsole()">Xbox<br />
<input type="checkbox" name="ps3" value="1" onclick="CHKconsole()">PS3<br />
<input type="checkbox" name="wii" value="1" onclick="CHKconsole()">Wii

<table>
   <tr>
      <th>console</th><th>prijs</th>
   </tr>
   <tr id="tr_xbox">
      <td>Xbox</td><td><input type="text" value="€ " /></td>
   </tr>
   <tr id="tr_ps3">
      <td>PS3</td><td><input type="text" value="€ " /></td>
   </tr>
   <tr id="tr_wii">
      <td>Wii</td><td><input type="text" value="€ " /></td>
   </tr>
</table>

<p><input type="submit" value="Verzenden">
</form>
</body>
</html>
 
Heeeeel erg bedankt!

Nu vroeg ik mij alleen nog af of de tekstvelden onder elkaar geplaatst kunnen worden,
ik ga proberen om alle (bekende) consoles toe te voegen. Het is dan niet erg overzichtelijk als je veel lege rijen tussen ertussen hebt zitten!

Toch is dit ERG goed al! :thumb:
 
Vervang dan style.visibility = "hidden" resp. "visible" met style.display = "none" resp. "table-row" :)
 
Sorry, maar wat bedoel je daarmee? Wat moet ik vervangen door wat? :o
Ik kan style.display niet vinden in de code die je me gaf :o
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan