Formuliertje met bevestiging en opslaan in database
Ik ben ontzettend n00b met javascript en AJAX. Nu wil ik een simpel formuliertje maken waarbij enkele dingen moeten gebeuren die mij niet lukken. Kan iemand mij helpen?
Dit is het formulier tot nu toe:
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
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
81
82
83
84
85
86
87
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
81
82
83
84
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bestel kaartjes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="niceforms.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" />
</head>
<body><div id="container">
<form action="process.php" method="post" class="niceform" id="form">
<fieldset>
<legend>Naam</legend>
<dl>
<dt><label for="voorletters">Voorletters:</label></dt>
<dd><input type="text" name="voorletters" id="voorletters" size="6" maxlength="8" tabindex="1" /></dd>
</dl>
<dl>
<dt><label for="achternaam">Achternaam:</label></dt>
<dd><input type="text" name="achternaam" id="achternaam" size="20" maxlength="30" tabindex="2" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>Adres</legend>
<dl>
<dt><label for="straatnaam">Straatnaam:</label></dt>
<dd><input type="text" name="straatnaam" id="straatnaam" size="20" maxlength="25" tabindex="3" /></dd>
</dl>
<dl>
<dt><label for="huisnummer">Huisnummer:</label></dt>
<dd><input type="text" name="huisnummer" id="huisnummer" size="3" maxlength="4" tabindex="4" style="text-transform: uppercase;" /></dd>
</dl>
<dl>
<dt><label for="postcode">Postcode:</label></dt>
<dd><input type="text" name="postcode" id="postcode" size="6" maxlength="7" tabindex="5" style="text-transform: uppercase;" /></dd>
</dl>
<dl>
<dt><label for="woonplaats">Woonplaats:</label></dt>
<dd><input type="text" name="woonplaats" id="woonplaats" size="20" maxlength="25" tabindex="6" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>Contactgegevens</legend>
<dl>
<dt><label for="email">E-mailadres:</label></dt>
<dd><input type="text" name="email" id="email" size="25" maxlength="35" tabindex="7" /></dd>
</dl>
<dl>
<dt><label for="telefoon">Telefoonnr.:</label></dt>
<dd><input type="text" name="telefoon" id="telefoon" size="10" maxlength="11" tabindex="8" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>Kaartjes</legend>
<p>Geef het gewenste aantal kaartjes op</p>
<dl>
<dt><label for="do">Donderdag 10 juni:</label></dt>
<dd><input type="text" name="do" id="do" size="2" maxlength="2" tabindex="9" value="0" /></dd>
</dl>
<dl>
<dt><label for="vr">Vrijdag 11 juni:</label></dt>
<dd><input type="text" name="vr" id="vr" size="2" maxlength="2" tabindex="10" value="0" /></dd>
</dl>
<dl>
<dt><label for="za">Zaterdag 12 juni:</label></dt>
<dd><input type="text" name="za" id="za" size="2" maxlength="2" tabindex="11" value="0" /></dd>
</dl>
<dl>
<dt><label for="betaling">Betaling:</label></dt>
<dd>
<input type="radio" name="betaling" id="overschrijving" value="overschrijving" /><label for="overschrijving" class="opt">Ik maak het verschuldigde bedrag over (instructies volgen)</label>
<br /><input type="radio" name="betaling" id="kassa" value="kassa" /><label for="kassa" class="opt">Ik betaal aan de kassa bij de ingang</label>
</dd>
</dl>
</fieldset>
<fieldset class="action">
<input type="submit" name="submit" id="submit" value="Bestellen" />
</fieldset>
</form>
</div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bestel kaartjes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="niceforms.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" />
</head>
<body><div id="container">
<form action="process.php" method="post" class="niceform" id="form">
<fieldset>
<legend>Naam</legend>
<dl>
<dt><label for="voorletters">Voorletters:</label></dt>
<dd><input type="text" name="voorletters" id="voorletters" size="6" maxlength="8" tabindex="1" /></dd>
</dl>
<dl>
<dt><label for="achternaam">Achternaam:</label></dt>
<dd><input type="text" name="achternaam" id="achternaam" size="20" maxlength="30" tabindex="2" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>Adres</legend>
<dl>
<dt><label for="straatnaam">Straatnaam:</label></dt>
<dd><input type="text" name="straatnaam" id="straatnaam" size="20" maxlength="25" tabindex="3" /></dd>
</dl>
<dl>
<dt><label for="huisnummer">Huisnummer:</label></dt>
<dd><input type="text" name="huisnummer" id="huisnummer" size="3" maxlength="4" tabindex="4" style="text-transform: uppercase;" /></dd>
</dl>
<dl>
<dt><label for="postcode">Postcode:</label></dt>
<dd><input type="text" name="postcode" id="postcode" size="6" maxlength="7" tabindex="5" style="text-transform: uppercase;" /></dd>
</dl>
<dl>
<dt><label for="woonplaats">Woonplaats:</label></dt>
<dd><input type="text" name="woonplaats" id="woonplaats" size="20" maxlength="25" tabindex="6" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>Contactgegevens</legend>
<dl>
<dt><label for="email">E-mailadres:</label></dt>
<dd><input type="text" name="email" id="email" size="25" maxlength="35" tabindex="7" /></dd>
</dl>
<dl>
<dt><label for="telefoon">Telefoonnr.:</label></dt>
<dd><input type="text" name="telefoon" id="telefoon" size="10" maxlength="11" tabindex="8" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>Kaartjes</legend>
<p>Geef het gewenste aantal kaartjes op</p>
<dl>
<dt><label for="do">Donderdag 10 juni:</label></dt>
<dd><input type="text" name="do" id="do" size="2" maxlength="2" tabindex="9" value="0" /></dd>
</dl>
<dl>
<dt><label for="vr">Vrijdag 11 juni:</label></dt>
<dd><input type="text" name="vr" id="vr" size="2" maxlength="2" tabindex="10" value="0" /></dd>
</dl>
<dl>
<dt><label for="za">Zaterdag 12 juni:</label></dt>
<dd><input type="text" name="za" id="za" size="2" maxlength="2" tabindex="11" value="0" /></dd>
</dl>
<dl>
<dt><label for="betaling">Betaling:</label></dt>
<dd>
<input type="radio" name="betaling" id="overschrijving" value="overschrijving" /><label for="overschrijving" class="opt">Ik maak het verschuldigde bedrag over (instructies volgen)</label>
<br /><input type="radio" name="betaling" id="kassa" value="kassa" /><label for="kassa" class="opt">Ik betaal aan de kassa bij de ingang</label>
</dd>
</dl>
</fieldset>
<fieldset class="action">
<input type="submit" name="submit" id="submit" value="Bestellen" />
</fieldset>
</form>
</div></body>
</html>
Er zijn een paar dingen die ik wil maken:
- Ten eerste moet er onder bij de kaartjes-sectie een real-time berekening worden gemaakt van het bedrag. Deze berekening is heel simpel: aantal kaartjes (do+vr+za) * €5,-. Dit moet dan weergeven worden.
- Vervolgens drukt de gebruiker op verzenden en moet het formulier worden omgezet in een weergave van alle ingevulde gegevens (dus een bevestigingspagina).
- Als de gebruiker bevestigd moeten alle gegevens worden opgeslagen in een MySQL-database.
Ik weet heel goed hoe ik dit met PHP zou moeten doen, maar met AJAX zou ik het niet weten. Ik wil een beetje met AJAX experimenteren, dat is ook de reden waarom ik het nu niet in PHP doe ;) Kan iemand mij helpen? Ik kan geen goede tutorials vinden die echt DIT doen.
Alvast ontzettend bedankt,
Bas
http://api.jquery.com/category/ajax/
http://api.jquery.com/load/
handleiding:
http://www.w3schools.com/ajax/default.asp
Dat functietje ziet er ongeveer uit zoals dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
function bereken()
{
int som;
int aantalDo, aantalVr, aantalZa;
aantalDo = document.getElementById('do').value;
aantalVr = document.getElementById('vr').value;
aantalZa = document.getElementById('za').value;
som = aantalDo * 5 + aantalVr * 5 + aantalZa * 5;
document.getElementById('totaleSom').innerHTML = "Het totale bedrag bedraagt " + som + ".";
}
{
int som;
int aantalDo, aantalVr, aantalZa;
aantalDo = document.getElementById('do').value;
aantalVr = document.getElementById('vr').value;
aantalZa = document.getElementById('za').value;
som = aantalDo * 5 + aantalVr * 5 + aantalZa * 5;
document.getElementById('totaleSom').innerHTML = "Het totale bedrag bedraagt " + som + ".";
}
Hier ga ik er wel vanuit dat je nog ergens een div of dl bij zet die het id totaleSom heeft.
Voor de 'bevestigingspagina' moet je gaan werken met php. Je stelt opnieuw je pagina op en op de plaats waar je de waardes van je veld wilt, moet je gaan werken met de $_POST variabele van php. Om te controleren of je op deze pagina wel effectief moet zijn (m.a.w als je een formulier is verzonden) gebruik je $_SERVER['REQUEST_METHOD'] == 'POST'.
Jens
Gewijzigd op 26/05/2010 18:30:29 door Jens V
Jens, je scriptje werkt niet helemaal... ik heb het in de head gezet, bij de input-velden de functie aangeroepen onchange, en een dl met het id totaleSom ingevoegd. Zie de live-versie:
Wat doe ik fout? Ik ben echt een JavaScript-noob dus zie zelf ook geen fouten :P
Dat met die bevestigingspagina ga ik zometeen proberen via een tut die ik heb gevonden. Wat jij (jens) precies bedoelt snap ik niet echt. Ik snap dat je gewoon die variabelen moet uitlezen, controleren en verzenden met php, maar hoe ik dat ga aanroepen bij die button in AJAX dat snap ik niet ;) Maar ik heb al een tutorial dus ik denk dat dat wel gaat lukken, anders vraag ik het wel weer.
Gewijzigd op 26/05/2010 19:23:51 door Bas C
Maar FireBug heb ik al, niet aan gedacht die te gebruiken. De console geeft aan dat hij een ; mist op regel 12. Dat is dus bij
int som;
Maar daar staat gewoon een ; achter en ik zou niet weten waar er anders nog een kan ontbreken...? ;)
Jelmer:
Javascript kent alleen maar 'var'. Dus het is 'var som;' :)
Ah voila:) Ben gewend C++ te programmeren dus vandaar de vaste types :) Alle int's moeten dus var's zijn :)
Ik wil dus nog dat als men op 'bestellen' klikt dat ze een lijstje krijgen met alle ingevulde gegevens. Als men dan op annuleren klikt komt het formulier (ingevuld!) terug, op bevestigen stuurt hij het naar process.php. Hoe dit te doen? Kan niet echt duidelijke tuts over dit vinden...
Weer alvast bedankt voor de hulp!