Ik ben bezig met een formulier om bepaalde bestanden up te loaden. Het is de bedoeling dat wanneer men vooraf keuze maakt uit een categorie (uit een drop-down menu), deze keuze vervolgens wordt gebruikt om enkel specifieke upload mogelijkheden te tonen. De overige mogelijkheden blijven verborgen.
Dit lukte tot nu toe op deze manier:
(javascript)
<head>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#parent2, #parent3, #parent4").css("display","none");
$("#categorie").change(function (){
if ($('select option:selected').val() == "4") {
$("#parent2").slideDown("fast"); //Slide Down Effect
$("#parent3").slideUp("fast"); //Slide Up Effect
$("#parent4").slideUp("fast"); //Slide Up Effect
}
if ($('select option:selected').val() == "5") {
$("#parent3").slideDown("fast");
$("#parent2").slideUp("fast");
$("#parent4").slideUp("fast");
}
if ( ($('select option:selected').val() == "1") || ($('select option:selected').val() == "2") || ($('select option:selected').val() == "3")) {
$("#parent4").slideDown("fast");
$("#parent2").slideUp("fast");
$("#parent3").slideUp("fast");
}
if ($('select option:selected').val() == ""){
$("#parent3").slideUp("fast");
$("#parent2").slideUp("fast");
$("#parent4").slideUp("fast");
}
});
});
</script>
/head>
(HTML)
<body>
<fieldset>
<ol class="formset">
<li>
<select name="categorie" id="categorie" size="1">
<option class="" value="" selected></option>
<option class="1" value="1">1</option>
<option class="2" value="2">2</option>
<option class="3" value="3">3</option>
<option class="4" value="4">4</option>
<option class="5" value="5">5</option>
</select>
</li>
</ol>
<ol id="parent2" class="formset">
<li>Resultaat van 1, 2 of 3</li>
</ol>
<ol id="parent3" class="formset">
<li>Resultaat van 4</li>
</ol>
<ol id="parent4" class="formset">
<li>Resultaat van 5</li>
</ol>
</fieldset>
</body>
Het probleem is nu dat ik op de rest van de pagina met tabellen werk, en deze het liefst ook hier wil gebruiken. Mijn idee was namelijk om de wisselende content ergens midden in een tabel te plaatsen. De "hoofd tabel" zorgt in dit geval voor de opmaak van het betreffende formulier.
Echter ontstaat er een probleem wanneer ik enige vorm van tabel-elementen (<table><tr><td>) laat zien in dit stuk HTML. De lijst-item waarin die elementen voorkomen wordt simpelweg niet vertoont! (Balen!)
Daarnaast zou ik nog het liefst de drop-down lijst in row <tr> plaatsen, en de resultaten in de daaropvolgende row, dus zo:
(HTML)
<body>
<tr><!--deze regel maakt deel uit van de hoofd-tabel -->
<table><!-- hier komt het dropdown menu>
<tr class="formset">
<td>Opties</td>
<td>
<select name="categorie" id="categorie" size="1">
<option class="" value="" selected></option>
<option class="1" value="1">1</option>
<option class="2" value="2">2</option>
<option class="3" value="3">3</option>
<option class="4" value="4">4</option>
<option class="5" value="5">5</option>
</select>
<td>
</tr>
<tr id="parent2" class="formset">
<td colspan="2">Resultaat van 1, 2 of 3</td>
</tr>
<tr id="parent3" class="formset">
<td colspan="2">Resultaat van 4</td>
</tr>
<tr id="parent4" class="formset">
<td colspan="2">Resultaat van 5</td>
</tr>
</table>
</body>
Weet iemand hoe ik dit voor elkaar zou kunnen krijgen? Ik ben zo ongeveer een jaartje bezig met PHP en MySQL (mede door opleiding) en ben hier aardig goed in, maar Javascript (wat er veel op lijkt, maar toch hier en daar verschilt) is mij niet altijd even duidelijk.
Ik doe hier geen oproep om kant en klare tekst te ontvangen, ik wil uitleg wat ik eventueel zou moeten verbeteren, als het kan uitleg waarom maar ondersteunende "voorbeeld code's" kunnen geen kwaad :) (omdat ik het op deze manier sneller leer door het resultaat te kunnen ervaren).
Vriendelijke groet,
Chris
---
EDIT:
Ik krijg dat [ /code] maar niet onder de knie... waarom staat er nu (php) achter terwijl ik met opzet geen <? ?> in de code bijvoeg...
