Mijn vorige topic is (terecht) dichtgegooid maar na twee uurtjes prutsen en proberen heb ik mijn formuliertje werkend.
Het idee is als volgt:
Ik heb een formuliertje gemaakt met twee pulldown menu's. Als je in een van die menu's de optie "anders" kiest dan maak ik onder die pulldown een tabel zichtbaar met een textfield waar je een andere optie in kunt vullen. Niet echt spectaculair maar ik weet bar weinig van javascript en voor mijn doen is dit al een doorbraak
Ik heb de code zo geschreven dat elk van die twee pulldown menu's een andere actie aanroept om bovenstaande voor elkaar te krijgen. Nu heb ik het gevoel dat het allemaal veel netter en compacter kan.
Dit is de code:
Mijn vraag is of jullie me na mijn gepruts kunnen helpen om de code efficienter, netter, compacter en beter te herschrijven. Ik denk daarbij aan de volgende punten:
- Volgens mij moeten mijn twee functies samengevoegd kunnen worden tot een functie, ik heb alleen geen idee hoe ik dat aanpak. Wel wat geprobeerd met parameters maar niet op de goeie manier blijkbaar.
- is het mogelijk om een id (met span) aan een <tr> te hangen in plaats van een <table>, dan hoef ik niet 4 tabellen aan te maken om de textvelden en de pulldownmenu's in te zetten. Wel geprobeerd maar nog niet gelukt.
- als je de optie "anders" kiest wordt het textfield daaronder zichtbaar, als je dan in hetzelfde pulldownmenu een andere optie kiest en daarna weer "anders" dan verdwijnt het textveld weer. Het werkt zeg maar als een schakelaar. Kan ik dat voorkomen? Sterker nog, als mensen zich bedenken en alsnog een ander optie in het pulldown menu kiezen, moet het textfield eigenlijk weer verdwijnen.
Misschien kunnen jullie me helpen om efficientere code te leren schrijven....
Het idee is als volgt:
Ik heb een formuliertje gemaakt met twee pulldown menu's. Als je in een van die menu's de optie "anders" kiest dan maak ik onder die pulldown een tabel zichtbaar met een textfield waar je een andere optie in kunt vullen. Niet echt spectaculair maar ik weet bar weinig van javascript en voor mijn doen is dit al een doorbraak
Ik heb de code zo geschreven dat elk van die twee pulldown menu's een andere actie aanroept om bovenstaande voor elkaar te krijgen. Nu heb ik het gevoel dat het allemaal veel netter en compacter kan.
Dit is de code:
code:
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function anderproduct(){
obj=document.getElementById('content');
keuze=document.offerteformulier.product.options[document.offerteformulier.product.selectedIndex].value;
if (keuze == "anders1"){
obj.style.display=(obj.style.display=='none')?'block':'none'
}
}
function anderformaat(){
obj=document.getElementById('content2');
keuze=document.offerteformulier.formaat.options[document.offerteformulier.formaat.selectedIndex].value;
if (keuze == "anders2"){
obj.style.display=(obj.style.display=='none')?'block':'none'
}
}
//-->
</script>
</head>
<body>
<form method="get" name="offerteformulier" action="verwerk.php">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="118"> product: </td>
<td width="282">
<select name="product" onChange="anderproduct()">
<option selected>--- Kies product ---
<option value="folder">folder
<option value="tijdschrift">tijdschrift
<option value="anders1">anders
</select>
</td>
</tr>
</table>
<div id="content" style="display:"none"">
<table id="content">
<tr>
<td>anders nl.</td>
<td><input name="" type="text"></td>
</tr>
</table>
</div>
<table>
<tr>
<td width="118">formaat:</td>
<td width="282">
<select name="formaat" onChange="anderformaat()">
<option selected>--- Kies formaat ---
<option value="a4">A4
<option value="a3">A3
<option value="anders2">anders
</select>
</td>
</tr>
</table>
<div id="content2" style="display:"none"">
<table>
<tr>
<td>anders nl.</td>
<td><input name="" type="text"></td>
</tr>
</table>
</div
</form>
</body>
</html> |
Mijn vraag is of jullie me na mijn gepruts kunnen helpen om de code efficienter, netter, compacter en beter te herschrijven. Ik denk daarbij aan de volgende punten:
- Volgens mij moeten mijn twee functies samengevoegd kunnen worden tot een functie, ik heb alleen geen idee hoe ik dat aanpak. Wel wat geprobeerd met parameters maar niet op de goeie manier blijkbaar.
- is het mogelijk om een id (met span) aan een <tr> te hangen in plaats van een <table>, dan hoef ik niet 4 tabellen aan te maken om de textvelden en de pulldownmenu's in te zetten. Wel geprobeerd maar nog niet gelukt.
- als je de optie "anders" kiest wordt het textfield daaronder zichtbaar, als je dan in hetzelfde pulldownmenu een andere optie kiest en daarna weer "anders" dan verdwijnt het textveld weer. Het werkt zeg maar als een schakelaar. Kan ik dat voorkomen? Sterker nog, als mensen zich bedenken en alsnog een ander optie in het pulldown menu kiezen, moet het textfield eigenlijk weer verdwijnen.
Misschien kunnen jullie me helpen om efficientere code te leren schrijven....
| antec sx840 | P4 1.7 | intel 850 mv | 512Mb kingston ecc | matroxG550 | adaptec29160 | atlas 10K III 18Gb | seagate barracuda IV 40Gb | plextor 40x | Iiyama17" | w2k pro | lappie: Dell inspiron 8100 | 1,2G/512/15"/48Gb/dvdcdrw/GF2go32Mb/lan/5