Home Page

8. Gevorderde formulieren

8.1 Omschrijving en notatie
8.2 Een werkwijze om vlot formulieren op te bouwen
8.3 Voorbeelden
8.4 Oefeningen

8.1 Omschrijving en notatie

Je leerde reeds werken met een tekstvak (<input type = "Text" ...>) en een opdrachtenknop (<input type = "Button" name = ...>)

Naast deze eenvoudige invoerobjecten bestaan er ook nog enkele gevorderde objecten nl.:

Textarea : een tekstvak met meerdere regels bv.

<textarea rows = "aantal rijen" cols = "aantal karakters breed" name = "variabele"> standaard waarde </textarea>

Radio : een keuzerondje bv.

<input type = "radio" name = "variabele" value = "waarde" selected>

Checkbox : een selectievakje bv.

<input type = "checkbox" name = "variabele" value = "waarde" selected>

Select + Option : een keuzelijst met mogelijke keuzen bv.

<select name="variabele" size="aantal zichtbare opties" >
<option value="waarde1" SELECTED>keuze1</option>
<option value="waarde2">keuze2</option>
....
</option>
</select>

Het kenmerk SELECTED geeft een standaardselectie weer. De sluittag </option>is facultatief.

Met de eigenschap selectedIndex(index) van een keuzelijst kan men controleren welke optie gekozen werd. De eerste optie heeft index 0, de tweede index 1 ...

8.2 Een werkwijze om vlot formulieren op te bouwen

Als je ingewikkelde formulieren wil opbouwen, gebruik je best de volgende methode:

Maak een schets van je formulier op een blad papier.

Zet bij alle visuele objecten een naam die je dan gebruikt bij de opbouw van je programma.

Vul eventuele beginwaarden in.

Zet bij objecten die een bijkomende taak moeten uitvoeren (controles, aanvullingen, ...) de naam van een functie die je daarvoor zal gebruiken.

Bepaal de herhalingen in het formulier. Deze kan je opbouwen met een begrensde herhaling.(Gebruik een tabel om de onderdelen uit te lijnen.)

Bepaal de nieuwe (onzichtbare) objecten (met kenmerken en methoden) die je zelf moet maken.

Bouw dan eerst je formulier op met functies die nog niets uitvoeren (vb.: function Controle(f) {} ) Verlies voorlopig niet te veel tijd aan opmaak, toeters en bellen.

Schrijf de eerste functie en voer een controle uit op de correctheid. Schrijf dan de tweede functie ....

Test regelmatig of alles nog goed werkt en of de resultaten van berekeningen wel juist zijn. Gebruik dus steeds eenvoudige waarden voor de tests.

Vul laatst de toeters en de bellen aan.

Tip: de dos-editor geeft je de mogelijkheid om de regelnummers en kolomnummers te volgen die door het foutenvenster van javascript opgegeven worden. Bij lange programma's is dit zeer nuttig.

8.3 Voorbeelden

Na invoer van een tekst in een tekstvak met meerdere regels wordt het aantal karakters afgedrukt.We maken daarbij gebruik van de length-eigenschap. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function controleer(f)
{
f.aantal.value=f.tekst.value.length
}
</script>

<form>
Voer de tekst in: <textarea name="tekst" cols="40" rows="3"></textarea><br><br>
<input type="button" value="Uit hoeveel karakters bestaat de tekst?" onClick="controleer(this.form)">
<input type="text" name="aantal">
</form>

</body>
</html>

Met een keuzerondje kiest men het BTW-percentage. Bemerk de manier waarop het percentage naar de functie wordt doorgegeven. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function bereken(t)
{
basisbedrag=eval(document.formulier1.bedrag_zonder_btw.value)
btwtarief=eval(t)
document.formulier1.bedrag_met_btw.value=basisbedrag+basisbedrag*btwtarief/100
}
</script>

<form name="formulier1">
bedrag zonder BTW: <input type="text" name="bedrag_zonder_btw"><br>
6% <input type="radio" name="tarief" onClick="bereken(6)" ><br>
21% <input type="radio" name="tarief" onClick="bereken(21)" ><br>
25% <input type="radio" name="tarief" onClick="bereken(25)" ><br>
bedrag met BTW is: <input type="text" name="bedrag_met_btw">
</form>

</body>
</html>

Volgende meerkeuzevraag kan je beantwoorden met een keuzelijst. (Klik hier voor het resultaat)

<html>

<head>
<title></title>
</head>

<body>
<script language="javascript">
function controleer(f)
{

if (f.antwoord.selectedIndex=="1")
{f.beoordeling.value="3 x 5 is inderdaad 15, Proficiat"}
else
{f.beoordeling.value="neen, 3 x 5 = 15"}
}
</script>

<form>
Hoeveel is 3 x 5? <select name="antwoord" size="3">
<option selected>10</option>
<option>15</option>
<option>20</option>
</select> <br>
<input type="button" value="controleer"
onClick="controleer(this.form)"><br>
<input type="text" name="beoordeling" size="50">
</form>
</body>
</html>

Volgend voorbeeld is voor de bollebozen. Het is een ontwerp van een bestelformulier voor een bedrijf dat een aantal producten verkoopt. De producten kunnen gekozen worden uit een keuzelijst en het aantal moet opgegeven worden. Per geselecteerd product wordt de btw, de eenheidsprijs (incl. btw) en de totale prijs gegeven. Onderaan verschijnt de totale prijs excl. btw, de btw en de totale prijs incl. btw. Er wordt eveneens een controle uitgevoerd op het wel of niet invullen van de persoonlijke gegevens en het selecteren van tenminste één product. (Merk de return false instructies op in de functie Controleer(f) en de return Controleer(this.form) instructie bij de onClick event handler van de knop Submit. De methode Focus() zet de focus op een bepaald object. De methode Blur() zet de focus van een object uit.(Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function Controleer(f){
if (f.TOTAAL.value==0) {
alert("Tenminste 1 product invullen")
return false}
else
if (f.naam.value.length == 0)
{alert("Niet alle persoonlijke gegevens zijn ingevuld !!")
f.naam.focus()
return false}
else
if (f.straat.value.length == 0)
{alert("Niet alle persoonlijke gegevens zijn ingevuld !!")
f.straat.focus()
return false}
else
if (f.postcode.value.length == 0)
{alert("Niet alle persoonlijke gegevens zijn ingevuld !!")
f.postcode.focus()
return false}
else
if (f.plaats.value.length == 0)
{alert("Niet alle persoonlijke gegevens zijn ingevuld !!")
f.plaats.focus()
return false}
else
{return true}
}
function ContrBtw(f) {}

//creatie van het object Product

function Product(prodNaam,prodPrijs,btwProc) {
this.prodNaam = prodNaam
this.prodPrijs = prodPrijs
this.btwProc = btwProc
}

//creatie van het object HulpTabel

function HulpTabel(n) {
this.length = n
for (i = 0; i <= n; i++) {
this[i] = 0
}
return this
}

// creatie van het object Bestelling

function Bestelling(prodNaamB,eenhPrijs,aantal,som,btw) {
this.prodNaamB = prodNaamB
this.eenhPrijs = eenhPrijs
this.aantal = aantal
this.som = som
this.btw = btw
}

//creatie van productLijst

productLijst = new HulpTabel(11)

productLijst[0] = new Product("*****Geef uw keuze*****",0,0)
productLijst[1] = new Product("Product 1",1100,21)
productLijst[2] = new Product("Product 2",1200,12)
productLijst[3] = new Product("Product 3",1300,21)
productLijst[4] = new Product("Product 4",1400,12)
productLijst[5] = new Product("Product 5",1500,21)
productLijst[6] = new Product("Product 6",1600,21)
productLijst[7] = new Product("Product 7",1700,21)
productLijst[8] = new Product("Product 8",1800,12)
productLijst[9] = new Product("Product 9",1900,21)
productLijst[10] = new Product("Product 10",2000,12)

//creatie van een bestellinglijn

bestellingLijn = new HulpTabel(11)
for (i=1; i <= 10; i++) {
bestellingLijn[i] = new Bestelling(0,0,0,0,0)
}

//functie die een lijn evalueert en de nodige gegevens aanvult

function evalLijn(lijn){
index = " "
totaal = 0
btw = 0
totaalExBtw = 0
eval('index=document.BestelForm.PRODUCT'+lijn+'.selectedIndex')
eval('bestellingLijn[lijn].prodNaamB=document.BestelForm.PRODUCT'+lijn+'.value')
eval('bestellingLijn[lijn].aantal=document.BestelForm.AANTAL'+lijn+'.value')
bestellingLijn[lijn].eenhPrijs=productLijst[index].prodPrijs
bestellingLijn[lijn].som=bestellingLijn[lijn].aantal*productLijst[index].prodPrijs
Math.round(bestellingLijn[lijn].som/((100+eval(productLijst[index].btwProc))/100))
bestellingLijn[lijn].btw=bestellingLijn[lijn].som- Math.round(bestellingLijn[lijn].som/((100+eval(productLijst[index].btwProc))/100))

eval('document.BestelForm.BTW'+lijn+'.value=productLijst[index].btwProc')
eval('document.BestelForm.EENHPRIJS'+lijn+'.value=productLijst[index].prodPrijs')
eval('document.BestelForm.PRIJS'+lijn+'.value=bestellingLijn[lijn].som')

for (j = 1; j <= 10 ; j++) {
totaal += bestellingLijn[j].som
btw += bestellingLijn[j].btw
}
document.BestelForm.BTW_TOTAAL.value=btw
document.BestelForm.TOTAAL.value=totaal
document.BestelForm.TOTAAL_EX_BTW.value = totaal - btw
}

</script>

<form name="BestelForm">

<h1>Bestelformulier</h1><p>
<h3>Vul hieronder je persoonlijke gegevens in, kies uit de producten die
je wenst te bestellen en geef het aantal op. </h3>
<table>
<tr>
<td width=192>Naam + voornaam :</td>
<td width=120><input name="naam" size="40"></td>
</tr><tr>
<td>Straat + nr. :</td>
<td><input name="straat" size="40"</td>
</tr><tr>
<td>Postcode :</td>
<td><input name="postcode" size="4" maxlength="4"></td>
</tr><tr>
<td>Plaats :</td>
<td><input name="plaats" size="40"></td>
</tr><tr>
<td>BTW-nummer :</td>
<td><input name="btwnr" size="15" onChange="ContrBtw(this.form)">&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<input type="Radio" name="geslacht" value="man">Man
<input type="Radio" name="geslacht" value="vrouw">Vrouw <td>
</tr>
</table>

<hr>

<table>
<tr>
<th width=192><center><b>Product</b></center>
</th>
<th width=72><center><b>Aantal</b></center>
</th>
<th width=72><center><b>BTWproc</b></center>
</th>
<th width=120><center><b>Eenheidsprijs</b></center>
</th>
<th width=120><center><b>Prijs</b></center>
</th>
</tr>

<br>
<script language="javascript">
for (lijn = 1;lijn <= 10; lijn++) {
document.write('<tr><td>')
document.write('<select name="PRODUCT'+lijn+'" onChange="evalLijn('+lijn+')">')
for (i = 0; i <= 10; i++) {
document.write("<option>"+productLijst[i].prodNaam)
}

document.write('</select>')

document.write('</td><td><center><input name="AANTAL'+lijn+'" value="1" size="3" maxlength="3" onChange="evalLijn('+lijn+')" ></center>')
document.write('</td><td><center><input name="BTW'+lijn+'" value=" " size="4" maxlength="4" onfocus="this.blur()" ></center>')
document.write('</td><td><center><input name="EENHPRIJS'+lijn+'" maxlength="10" size="10" onfocus="this.blur()"></center>')
document.write('</td><td><center><input name="PRIJS'+lijn+'" value="" size="10" maxlength="10" onfocus="this.blur()"></center>')
document.write('</td></tr>')
}
</script>
<hr> <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr>
<tr><td><b>Bedrag</b> &nbsp <input name="TOTAAL_EX_BTW" size="10"></td>
<td><b><center>BTW</center></b></td>
<td><center><input name="BTW_TOTAAL" value="0" size="10"></center></td>
<td><b><center>Totaal</center></b></td>
<td><center><input name="TOTAAL" value=0 size="10"></center></td>
</tr>
</table>
<p>
<input type="reset" value="Formulier wissen">&nbsp &nbsp &nbsp &nbsp
<input type="submit" value="Bestelling doorsturen" onClick="return Controleer(this.form)"><p>
<h3>We danken u voor uw bestelling. Veel plezier met de producten !</h3>
</form>
</html>

8.4 Oefeningen

1. Na invoer van een aantal personen wordt de toegangsprijs berekend. Voor groepen van 10 of meer personen betaalt men 350 BEF per persoon, anders 500 BEF per persoon.

2. Schrijf een algoritme dat de controle op een BTW-nummer (xxx-xxx-xxx) uitvoert.
- Vorm het getal dat bestaat uit de eerste zeven cijfers
- Deel dit getal door 97
- Indien het verschil van 97 en de rest van de deling gelijk is aan de laatste twee cijfers, dan is het BTW-nummer correct.

3. Stel het algoritme op voor de werking van een frisdrankautomaat. Men moet 25 BEF in de automaat stoppen (5 x 5 BEF of 20 BEF + 5 BEF of 20 BEF + 20 BEF waarbij men 3 x 5 BEF terugkrijgt). De automaat laat enkel toe muntstukken van 5 BEF en 20 BEF te gebruiken. De automaat biedt volgende dranken aan: cola, fanta, spuitwater en chocolademelk.
Dit algoritme kan stapsgewijze aangebracht worden:
stap1: 1 opdrachtknop (5). Bepaal welk bedrag de gebruiker aanklikt. oplossing

stap2: 2 opdrachtknoppen (5 en 20). Bepaal welk bedrag de gebruiker aanklikt. oplossing

stap3: uitbreidingen
- wordt een te groot bedrag ingevoerd, dan krijg je een passend bedrag terug
- via een keuzelijst kan je de frisdrank kiezen
- druk je op een OK-knop dan krijg je het ingevoerde bedrag, het terug-bedrag en de gekozen frisdrank
- een gebruiksaanwijzing leidt de gebruiker door de werkwijze.oplossing

stap4: van zodra een frisdrank wordt gekozen, worden de resultaatgegevens gewist. oplossing

4. Een firma berekent het volgend commissieloon voor haar vertegenwoordigers:
1% voor een omzet tot 200 000 BEF
2% voor een omzet van 200 001 BEF tot 1 000 000 BEF
3% voor een omzet van meer dan 1 000 000 BEF.

Bereken het commissieloon op basis van de ingevoerde omzet. zorg er bovendien voor dat, van zodra een volgende omzet wordt ingevoerd, het vorig commissieloon wordt gewist.oplossing

5. Bereken, op basis van een aantal producten, hun prijs en hun BTW-tarief, het totaal bedrag te betalen door de klant. oplossing

6. Schrijf een programma dat BEF omzet naar Euro en omgekeerd.
oplossing1 of beter oplossing2

7. Stel een proef op met enkele meerkeuzevragen en geef het resultaat van de juiste antwoorden.