Toon/verberg content
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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>
<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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
<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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>
<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
Code (php)
1
<? ?>
Gewijzigd op 10/08/2011 13:52:40 door Christopher A
--
Ik heb al 1 klein probleempje gevonden, ik was vergeten de AJAX lib bij te voegen in de header. Maar nu werkt het nog steeds niet naar wens: Hoe kan ik in het kleine stukje javascript aangeven dat de parameters uit <tr>-1 moeten zorgen voor de veranderingen in <tr>-2?
Ik zou namelijk graag de structuur in m'n formulier blijven behouden...
Is er nog steeds geen verborgen javascript-guru die dit raadsel voor mij weet op te lossen?
Beperkt verder ook de code, denk niet dat veel mensen zin hebben lappen code te lezen ;-).
Write Down op 11/08/2011 01:03:11:
Eerst en vooral vind ik het een vuile manier van opmaak. Een tabel is naar mijn mening voor gegevens, niet voor formulieren. Er zijn genoeg opties om een formulier netjes op te maken zonder tabellen. Kijk eens naar label, fieldset & legend.
Beperkt verder ook de code, denk niet dat veel mensen zin hebben lappen code te lezen ;-).
Beperkt verder ook de code, denk niet dat veel mensen zin hebben lappen code te lezen ;-).
Er is geen mijlen lange code te zien, en de formulieren zijn ook op de wijze die jij bedoeld opgemaakt. Maar het zijn als het ware allemaal kleine formuliertjes, gesorteerd in 1 geheel (tabel). 'T is voor een CMS systeem. Nu ziet het totale formulier er een stuk langer uit en ziet men bij bepaalde opties onnodige velden. Dat probeer ik te voorkomen d.m.v. deze functie...
Dus, ombouwen naar correcte opmaak.
Gewijzigd op 11/08/2011 09:44:14 door Write Down
En ja, als het scheerapparaat er als een grasmaaier zou uitzien, dan maaide ik daar met plezier het gras mee!
Gewijzigd op 11/08/2011 15:11:04 door Christopher A
Je wilt toch dat je bezoeker een mooie front-end ziet die snel kan worden gerenderd door de browser?