Formuliertje met bevestiging en opslaan in database

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bas C

Bas C

26/05/2010 18:05:16
Quote Anchor link
Hoi allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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
 
PHP hulp

PHP hulp

29/03/2024 10:55:59
 
Noppes Homeland

Noppes Homeland

26/05/2010 18:22:55
 
Jens V

Jens V

26/05/2010 18:27:13
Quote Anchor link
Hier heb je eigenlijk geen echte AJAX voor nodig. Als je in je text-inputs het attribute onchange toevoegt met als waarde een javascript functietje, kan je je gewenste resultaat ook al krijgen.

Dat functietje ziet er ongeveer uit zoals dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 + ".";
}


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
 
Bas C

Bas C

26/05/2010 18:45:45
Quote Anchor link
Alvast bedankt voor de reacties.

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: www.llrbeekvliet.nl/toneel/orderform.html http://llrbeekvliet.nl/toneel/kaartjes/orderform.html. (let niet op het balkje, dat is voor het aantal plaatsen straks).

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
 
B a s
Beheerder

B a s

26/05/2010 18:51:56
Quote Anchor link
Je website link werkt niet. Daarnaast kun je eens FireBug installeren voor Firefox. Dan kun je die fouten in een console opsporen en oplossen ;)
 
Bas C

Bas C

26/05/2010 19:28:58
Quote Anchor link
Oeps subdirtje vergeten! :$ Het moet zijn: http://llrbeekvliet.nl/toneel/kaartjes/orderform.html

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 -

Jelmer -

26/05/2010 19:33:10
Quote Anchor link
Javascript kent alleen maar 'var'. Dus het is 'var som;' :)
 
Jens V

Jens V

26/05/2010 19:37:37
Quote Anchor link
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 :)
 
Bas C

Bas C

26/05/2010 19:56:55
Quote Anchor link
Ah, bedankt, nu werkt het!
 
Bas C

Bas C

27/05/2010 07:41:30
Quote Anchor link
Hmmm die tutorial was toch niet wat ik zocht... Ik krijg die bevestiging dus niet gemaakt. Wel het gedeelte dat hij het hele formulier via AJAX naar een process.php stuurt en deze vervolgens alles verwerkt.

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!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.