[Formulier] Opties uitvouwen bij selecteren radio button

Status
Niet open voor verdere reacties.
B

Border013

Gebruiker
Lid geworden
7 mei 2008
Berichten
5
Het volgende probleem: Er moet een dynamisch formulier gebouwd worden welke in eerste instantie erg overzichtelijk is. In dit formulier komen bijvoorbeeld 3 hoofdopties in de vorm van een radio buttons. onder deze drie hoofdopties komen een aantal sub-opties welke pas mogen verschijnen op het moment dat de hoofdoptie geselecteerd wordt (voor het overzicht). Voor de duidelijkheid, de in dit voorbeeld drie hoofd radiobuttons hebben geen relatie met elkaar en kunnen dus net zo goed alle drie geselecteerd worden (waarna uit alle drie de opties een sub-optielijstje moet vouwen)

Een voorbeeld van een dergelijk script heb ik gevonden op: www.dynamicdrive.com/dynamicindex16/formdependency.htm

Echter bovenstaand script komt in conflict met mijn huidige scripts op de betreffende pagina. Nu is mijn vraag: Is er niet een makkelijker script wat dit mogelijk maakt (dus gewoon uitvouwen bij selecteren en inklappen bij deselecteren)?

Het bovenstaande moet in een zoekfunctie gebouwd gaan worden. Stel voor dat het om een zoekfunctie voor een auto database zou gaan, dan is het de bedoeling dat als iemand "kleur" selecteert, daar vervolgens een lijstje met kleuren uit vouwt.

Alvast bedankt voor jullie hulp, want met Google kom ik er niet uit (weet waarschijnlijk niet waar ik op moet zoeken).
 
in princiepe niet zo moeilijk....

Je maakt 3 radiobuttons en voegt daaraan toe: onClick="do_this_function('optienaam1', this.value);"

Je maakt voor elke radiobutton een DIV box aan met: id="optienaam1"

(de 1 vervangen voor 1-3 )


je maakt de volgende Javasscript functie aan

function do_this_function(id, value)
{

if(value == TRUE)
{
object = document.getElementById( id );
// Gebruik DIT om de div te tonen
}else{
object = document.getElementById( id );
// Gebruik DIT om de div te verbergen <-- zelfde url...
}
}

Als je dan ook nog wilt dat het van transparant naar "normaal" wordt, terwijl het naar beneden schuift voeg je dit ook nog toe....

Enig knip en plakwerk dus... :p

M.v.g.
JB'tje
 
Hartelijk dank voor je uitgebreide antwoord. Ik ga er mee stoeien en zal uiteraard even iets laten weten indien het gelukt is.
 
Beste JB'tje,

Ik ben met je scripts aan het stoeien geweest. In een leeg HTML document levert het geen problemen op, alleen op één of andere manier komt het script in conflict met een ander script zodra ik het op de betreffende pagina plaats. Ondanks dat ik het erg mooi vindt op de manier waarop in dit geval het "menu" uitvouwt, mag het wat mij betreft gerust wat simpeler.

In mijn zoekformulier (waar dit script voor is) moet bij het aanvinken van een checkbox een lijstje met extra formulieropties uitvouwen / verschijnen.

Stel voor: een bezoeker vinkt de checkbox voor "camera" aan, dan moet daaronder een lijstje met camera specificaties verschijnen, waaruit de bezoeker kan kiezen / aanvinken.

Ik heb echt al zo ongeveer alle mogelijke zoekopties in google ingevoerd (de searchstring "display field on check checkbox" kwam nog het meeste in de buurt) maar niets leverde een gewenst resultaat op.

Mijn hoop is derhalve op jouw gevestigd...
 
Hallo Border,

Ja.. z'n scriptje zul je idd zelf moeten maken :P of door middel van knippen en plakken van andere scripts....

Heb je misschien wat code (of link), zodat ik eens kan zien wat ik voor je kan doen?

M.v.g.
JB'tje
 
Wat ik bedoel is het volgende:

HTML: 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title></title>
</head>
<body>
<input type="checkbox" name="camera" value="camera"> camera<br>

<!-- DIT MAG PAS VERSCHIJNEN NA AANVINKEN CHECKBOX -->

<ul>
<table border="0" summary="">
	<tr>
	<td valign="top">Type camera:</td>
	<td><input type="radio" name="type" value="VGA"> VGA<br>
	<input type="radio" name="type" value="1,3 megapixel"> 1,3 megapixel<br>
	<input type="radio" name="type" value="2 megapixel"> 2 megapixel<br>
	<input type="radio" name="type" value="3 megapixel"> 3 megapixel<br>
	<input type="radio" name="type" value="4 megapixel"> 4 megapixel<br><br></td>
	</tr>
	<tr>
		<td valign="top">Flitser:</td>
		<td><input type="radio" name="flitser" value="Geen"> Geen<br>
	<input type="radio" name="flitser" value="LED"> Led<br>
	<input type="radio" name="flitser" value="Xenon"> Xenon<br><br></td>
	</tr>	
</table>
</ul>

<!-- EINDE VERSCHIJNEN NA AANVINKEN CHECKBOX-->

</body>
</html>

Ik zoek dus een scriptje welke ik op één pagina meermaals kan gebruiken. Wanneer de bezoeker dus een hoofdoptie aanvinkt krijgt de bezoeker vervolgens een aantal sub-opties te zien. Erg mooi is het als deze kunnen verschijnen (dus een soort uitschuif- en fade effect zoals het scriptje waarnaar je eerder verwees), maar dit is geen must. Het moet namelijk wel compatible kunnen zijn met de pagina's die ik al heb (en dat betreffende script is dat blijkbaar niet echt).

Ik moet heel eerlijk zeggen dat ik op javascript gebied echt een n00b ben, heb zelf redelijk wat PHP kennis, maar javascript volg ik echt niet... Ik hoop derhalve dat je me toch kunt en wilt helpen.
 
Hey,

Ik zal eens kijken wat ik voor je kan doen... zal wel lukken lijkt me :P
de reden waarom het niet "compatible" is, zal wel te maken hebben met dat in zowel het uitschuif script, als je eigen script een dezelfde variabele voorkomt....

Tja.. Javascript is leuk om te kunnen.. maar met PHP kun je veel meer :P (dus goede keus om PHP goed te leren)

Ik laat nog van me horen :P
JB'tje
 
He, bedankt voor je reactie! Als je me uiteindelijk kunt helpen zou dat heel fijn zijn! Ik had al gekeken naar dubbele variabelen, maar daar was voor zover ik dat vanuit mijn PHP kennis kon zien geen sprake van, dat maakt het dus ook zo vreemd. Daarnaast werkte dat script enkel indien ik de content type in de meta-tags aanpaste, maar daardoor ging weer de opmaak van de pagina naar de vaantjes...
 
Hallo,

Hier een simpel scriptje dat zijn werk doet zoals het hoort :D

't princiepe is heel makkelijk....
Je neemt één div (xxx_content) en daar prop je alle gegevens in en deze verberg je de gehele tijd... je gebruikt hem als "opslag" van de gegevens :)

Dan neem je nog een div (xxx_slide) waar je de gegevens in propt als de checkbox is aangevinkt, en anders niet!

Uiteraard is er ook de mogelijkheid om maar één div te gebruiken, en die de hele tijd te tonen en te verbergen, maar dit vind ik makkelijker... kans op succes is groter :P (als je een div gebruikt kunnen er lay-out fouten ontstaan bij het verbergen)

Zie de meegeposte code :thumb: (ff een html bestandje van maken...)

Gegroet,
JB'tje
 

Bijlagen

Nog iets eenvoudiger: ;)
PHP: 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title></title>
 <script type="text/javascript">
  function showhide(obj,id) {
   document.getElementById(id).style.display = (obj.checked ? '' : 'none');
   };
 </script>

</head>
<body>
<input type="checkbox" name="camera" value="camera" onclick="showhide(this,'camex')"> camera<br>

<!-- DIT MAG PAS VERSCHIJNEN NA AANVINKEN CHECKBOX -->

<ul id="camex" style="display: none;">
<table border="0" summary="">
	<tr>
	<td valign="top">Type camera:</td>
	<td><input type="radio" name="type" value="VGA"> VGA<br>
	<input type="radio" name="type" value="1,3 megapixel"> 1,3 megapixel<br>
	<input type="radio" name="type" value="2 megapixel"> 2 megapixel<br>
	<input type="radio" name="type" value="3 megapixel"> 3 megapixel<br>
	<input type="radio" name="type" value="4 megapixel"> 4 megapixel<br><br></td>
	</tr>
	<tr>
		<td valign="top">Flitser:</td>
		<td><input type="radio" name="flitser" value="Geen"> Geen<br>
	<input type="radio" name="flitser" value="LED"> Led<br>
	<input type="radio" name="flitser" value="Xenon"> Xenon<br><br></td>
	</tr>	
</table>
</ul>

<!-- EINDE VERSCHIJNEN NA AANVINKEN CHECKBOX-->

</body>
</html>
De functie showhide() zet je in de head, bij de checkbox gebruik je onclick="showhide(this,'camex')" en dat schakelt dan de weergave van het element met id="camex" style="display: none;" :)


Vr.Gr Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan