In de webtip van deze week gaan we kijken hoe we, zonder het vernieuwen van de pagina, een simpel formulier kunnen versturen. We maken hierbij gebruik van het javascript framework jQuery. Deze webtip is geschikt voor zowel beginners als gevorderden.
De uitleg
Omdat we gebruik maken van jQuery als basis, moeten we eerst zorgen dat onze webpagina de inhoud van jQuey laadt. Download daarvoor de laatste versie van jQuery hier en voeg de volgende code toe aan je head-tags van je webpagina:
<script type="text/javascript" src="/javascript/jquery-1.4.2.js"></script>
Hierbij moet uiteraard verwijzen naar de plek waar je je eigen jQuery hebt geupload.
Nu gaan we het formulier opstellen. Als voorbeeld gebruiken we het onderstaande formulier:
<form id="formid" action="postform.php" method="post">
<label for="firstname">Voornaam: </label>
<input id="firstname" name="voornaam" type="text" /><br />
<label for="email">E-mailadres: </label>
<input id="email" name="email" type="text" /><br />
<label for="message">Bericht: </label>
<textarea id="message" cols="20" rows="5" name="bericht"></textarea>
<input type="submit" value="VERSTUUR" />
<form>
Je ziet dat we het formulier een uniek id hebben meegegeven: 'formid'. Op deze manier weet jQuery welk formulier er verwerkt moet worden. Dit is handig als er zich bijvoorbeeld meerdere formulieren op één webpagina bevinden.
Normaal zou het formulier dus verwerkt worden via postform.php. Nu willen we dit ook, maar dit moet allemaal op één en dezelfde pagina gebeuren. Hier komt jQuery om de hoek kijken. Om te zorgen dat het formulier door middel van AJAX gepost wordt voegen we de volgende code wederom toe aan de head tags:
$(document).ready(function(){
$('#formid').submit(function(){
var str = $(this).serialize();
$.ajax({
type: 'POST',
url: 'postform.php',
data: str,
success: function(data){
$("#result").html(data);
}
});
return false;
})
})
Dit stukje code kijkt dus wanneer het formulier (met id 'formid') 'gesubmit' wordt. Gebeurt dit, dan wordt alle informatie van het formulier 'geserialized' en verzonden naar postform.php. Als dit is dit zonder problemen gebeurt, wordt het resultaat uit postform.php weergegeven in het element met id 'result', dit kan bijvoorbeeld een div zijn:
<div id="result"><div>
In postform.php kun je vervolgens alles met de informatie doen wat je wilt doen. Dit kan bijvoorbeeld het versturen naar een e-mailadres zijn (voor bijvoorbeeld een contactformulier) of de informatie in een database opslaan. In dit geval laten we de informatie alleen aan de gebruiker zien.
// postform.php echo ' Voornaam: '.$_POST['voornaam'].'<br /> E-mailadres: '.$_POST['email'].'<br /> Bericht: '.$_POST['bericht'].'<hr />';
Het eindresultaat
Het geheel ziet er nu als volgt uit:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl-nl" xml:lang="nl-nl">
<head>
<title>AJAX Form post demo</title>
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#formid').submit(function(){
var str = $(this).serialize();
$.ajax({
type: 'POST',
url: 'postform.php',
data: str,
success: function(data){
$("#result").html(data);
}
});
return false;
})
})
</script>
</head>
<body>
<div id="result">
<form id="formid" action="postform.php" method="post">
<label for="firstname">Voornaam: </label>
<input type="text" id="firstname" name="voornaam"><br />
<label for="email">E-mailadres: </label>
<input type="text" id="email" name="email"><br />
<label for="message">Bericht: </label>
<textarea id="message" cols="20" rows="5" name="bericht"></textarea>
<input type="submit" value="VERSTUUR" />
</form>
</body>
</html>
postform.php
echo ' Voornaam: '.$_POST['voornaam'].'<br /> E-mailadres: '.$_POST['email'].'<br /> Bericht: '.$_POST['bericht'].'<hr />';
Demo
Meer..
Reacties (1)
TOP 5
NIEUW
-
Edsilia Rombley - Ik Laat Je Niet..Edsilia Rombley - Ik Laat Je Niet Alleen10 Februari - 0 REACTIES -
-
-
Lloyd ft Andre 3000 - Dedication..Lloyd ft Andre 3000 - Dedication to my Ex09 Februari - 0 REACTIES -
Claudia ft. Fatman Scoop - Just A..Claudia ft. Fatman Scoop - Just A Little..09 Februari - 0 REACTIES
