[javascript] onchange tabel zichtbaar maken

Pagina: 1
Acties:

  • niXnut
  • Registratie: Februari 2001
  • Laatst online: 17-07-2020

niXnut

Hora ruit; hora est!

Topicstarter
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:

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:&quot;none&quot;">
<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:&quot;none&quot;">
<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


  • Xlnt
  • Registratie: Oktober 2000
  • Laatst online: 03-05 18:18
niXnut schreef op 07 juli 2004 @ 01:33:
Mijn vraag is of jullie me na mijn gepruts kunnen helpen om de code efficienter, netter, compacter en beter te herschrijven.
Een verzoek tot herschrijven is bijna een verzoek tot schrijven. En dus bijna een scriptrequest. Hoe dan ook, daar begin ik niet gratis aan :Y), en je schiet er niets mee op. Je vragen wil ik echter wel beantwoorden.
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.
Wat is er mis met twee functies voor twee verschillende functionaliteiten? Als je dit tot één functie gaat samenvoegen moet je eerst controleren welke van de twee <SELECT/>'s is gewijzigd. En dat is inefficiënt. Waarom zou je dit willen? De code wordt er in ieder geval niet duidelijker op.
- 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.
Je mag geen <DIV/> of <SPAN/> om een <TR/> plaatsen, omdat deze niet voor mogen komen direct binnen <TABLE/>. Maar dat is ook allemaal niet nodig. De attributen id en style zijn namelijk even geldig voor <TR/> als voor <DIV/>. Ofwel, maak één tabel en verplaats de attributen id en style naar de betreffende <TR/>'s. En dan heb je de <DIV/>'s niet meer nodig. De JS-code is zó goed geschreven dat je deze niet eens hoeft aan te passen ;).
- 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.
Dat het extra tekstveld niet verdwijnt als je iets anders dan 'anders' selecteert is logisch. Je test namelijk alleen maar of de waarde overeenkomt met 'anders'. Je kunt de andere gevallen vangen met een else na de if. In het codeblok voor else zet je dan een uitspraak waardoor de stijl weer wordt ingesteld op display: none.

Dat het extra tekstveld weer verdwijnt als je een tweede keer 'anders' selecteert, komt door een overbodige test naar de waarde van display. Een onchange treedt namelijk alleen maar op als de waarde van de <SELECT/> werkelijk gewijzigd is. Als de huidige waarde dus 'anders' is, dan weet je ook dat de vorige waarde dat niet was. En dus weet je dat je display moet instellen op block.
Misschien kunnen jullie me helpen om efficientere code te leren schrijven....
Vast wel. Maar je kunt beter eerst leren hoe om te gaan met (D)HTML en JavaScript. Dan kun je daarna wel leren hoe het efficiënter kan. Als je eenmaal goed snapt hoe het allemaal werkt, dan zal je ook een redelijk inzicht hebben in hoe het efficiënter kan.

"It's not that I'm lazy. It's that I just don't care."


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:46

crisp

Devver

Pixelated

Xlnt schreef op 07 juli 2004 @ 03:36:
[...]


Wat is er mis met twee functies voor twee verschillende functionaliteiten? Als je dit tot één functie gaat samenvoegen moet je eerst controleren welke van de twee <SELECT/>'s is gewijzigd. En dat is inefficiënt. Waarom zou je dit willen? De code wordt er in ieder geval niet duidelijker op.

1 woord: schaalbaarheid. Meerdere functies gebruiken die exact hetzelfde doen is juist inefficiënt programmeren, en als je je functie duidelijk opstelt en eventueel voorziet van wat commentaar moet het duidelijk genoeg zijn.

Een tr kan je ook een id geven en op display:none zetten; daar is pas nog een topic over geweest.

In het kort kan een dergelijke functie er zo uitzien:

JavaScript:
1
2
3
4
5
function anders(welke, sel) {
  var obj = document.getElementById(welke);
  var keuze = sel.options[sel.selectedIndex].value;
  obj.style.display = (keuze=='anders')? '':'none';
}

HTML:
1
2
3
<select name="product" onchange="anders('ander_product', this)">
...
<tr id="ander_product" style="display:none"><td>...</td></tr>

[ Voor 6% gewijzigd door crisp op 07-07-2004 07:30 ]

Intentionally left blank


Verwijderd

hmmm beetje tegenstrijdige reacties. Mij lijkt eigenlijk ook dat je code eigenlijk zo kort mogelijk moet schrijven, toch?

  • niXnut
  • Registratie: Februari 2001
  • Laatst online: 17-07-2020

niXnut

Hora ruit; hora est!

Topicstarter
crisp schreef op 07 juli 2004 @ 07:28:

[...]

1 woord: schaalbaarheid. Meerdere functies gebruiken die exact hetzelfde doen is juist inefficiënt programmeren, en als je je functie duidelijk opstelt en eventueel voorziet van wat commentaar moet het duidelijk genoeg zijn.

Een tr kan je ook een id geven en op display:none zetten; daar is pas nog een topic over geweest.

In het kort kan een dergelijke functie er zo uitzien:

JavaScript:
1
2
3
4
5
function anders(welke, sel) {
  var obj = document.getElementById(welke);
  var keuze = sel.options[sel.selectedIndex].value;
  obj.style.display = (keuze=='anders')? '':'none';
}

HTML:
1
2
3
<select name="product" onchange="anders('ander_product', this)">
...
<tr id="ander_product" style="display:none"><td>...</td></tr>
crisp, ik ga je nu aanmelden voor een lintje (werk bij de gemeente) Thanx werkt perfect. precies wat ik moest hebben.

| 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


  • party42
  • Registratie: Oktober 2000
  • Laatst online: 22-05 17:39
bizar... als ik elke dag voor dat soort oplossingen lintjes zou krijgen zou mijn huis te klein zijn... :)

m.a.w, dit had je zelf ook kunnen vinden. Maargoed, leuk dat crisp je helpt... :)

Everyday's an endless stream, of cigarettes and magazines...


Verwijderd

party42 schreef op 07 juli 2004 @ 16:04:
bizar... als ik elke dag voor dat soort oplossingen lintjes zou krijgen zou mijn huis te klein zijn... :)

m.a.w, dit had je zelf ook kunnen vinden. Maargoed, leuk dat crisp je helpt... :)
Dan ben jij de volgende.... ;)
Had ik inderdaad misschien uiteindelijk zelf ook wel voor elkaar gekregen maar ik ben er nu al bijna twee dagen mee aan het klooien en dan is het toch handig als iemand je helpt
Pagina: 1