Leden selectie pagina met Javascript
Dus als je een lidnaam invult moet er een AJAX request worden gestuurd om te kijken of de naam bestaat in de database, als de naam niet bestaat, kan hij dus ook niet in de lijst. (En staat er bijvoorbeeld een foutmelding)
Deze controle moet natuurlijk zonder de pagina te herladen omdat anders de hele lijst verloren gaat. En de foutmelding moet ook zonder herladen (Kan in een div worden gezet met Javascript)
Nu is dit mijn code
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
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
<?PHP
if(isset($_GET['lid'])) {
$sql = "SELECT naam FROM leden WHERE naam='".mysql_real_escape_string(_GET['lid'])."'";
$query = mysql_query($sql);
$resultInt = mysql_num_rows($query);
if($resultInt !== 1) {
header('Location: http://websitetest.goodluckwith.us/web/ledenbewerk.php?fout');
}
}
?>
<html>
<head>
<style>
#checkFrame {
display: none;
}
#waarschuwing {
font-color: red;
font-family: verdana;
font-size: 10pt;
}
#lidnaam {
border: 1px solid lightgrey;
}
#toevoegen {
border: 1px solid lightgrey;
background-color: #fafafa;
}
</style>
<script type="text/javascript">
function zoekNaam() {
naam = document.getElementById("lidnaam").value;
venster = document.getElementById("checkFrame");
venster.src = 'http://websitetest.goodluckwith.us/web/ledenbewerk.php?lid='+naam;
alert(venster.src);
setTimeout("checkResult()",100);
}
function checkResult() {
if(document.getElementById("checkFrame").src == "http://websitetest.goodluckwith.us/web/ledenbewerk.php?fout") {
alert("Foute lidnaam");
} else {
alert("Goede lidnaam");
}
}
</script>
</head>
<body>
<label for="lidnaam">Lidnaam:</label><br><input type="text" id="lidnaam">
<input type="button" id="toevoegen" value="Toevoegen" onclick="zoekNaam()">
<div id="waarschuwing"></div>
<iframe src="http://websitetest.goodluckwith.us/web/ledenbewerk.php" id="checkFrame"></iframe>
<br>
</body>
</html>
if(isset($_GET['lid'])) {
$sql = "SELECT naam FROM leden WHERE naam='".mysql_real_escape_string(_GET['lid'])."'";
$query = mysql_query($sql);
$resultInt = mysql_num_rows($query);
if($resultInt !== 1) {
header('Location: http://websitetest.goodluckwith.us/web/ledenbewerk.php?fout');
}
}
?>
<html>
<head>
<style>
#checkFrame {
display: none;
}
#waarschuwing {
font-color: red;
font-family: verdana;
font-size: 10pt;
}
#lidnaam {
border: 1px solid lightgrey;
}
#toevoegen {
border: 1px solid lightgrey;
background-color: #fafafa;
}
</style>
<script type="text/javascript">
function zoekNaam() {
naam = document.getElementById("lidnaam").value;
venster = document.getElementById("checkFrame");
venster.src = 'http://websitetest.goodluckwith.us/web/ledenbewerk.php?lid='+naam;
alert(venster.src);
setTimeout("checkResult()",100);
}
function checkResult() {
if(document.getElementById("checkFrame").src == "http://websitetest.goodluckwith.us/web/ledenbewerk.php?fout") {
alert("Foute lidnaam");
} else {
alert("Goede lidnaam");
}
}
</script>
</head>
<body>
<label for="lidnaam">Lidnaam:</label><br><input type="text" id="lidnaam">
<input type="button" id="toevoegen" value="Toevoegen" onclick="zoekNaam()">
<div id="waarschuwing"></div>
<iframe src="http://websitetest.goodluckwith.us/web/ledenbewerk.php" id="checkFrame"></iframe>
<br>
</body>
</html>
Ik weet dat dit helemaal de foute manier is.
Ik moet mezelf bijna uitlachen dat ik met een iframe zoiets doe...
Hoe doe ik met de AJAX techniek kijken of een lidnaam in de database bestaat?
Dus de naam wordt (met get of post) gestuurd naar een php pagina... en dan?
Ik kan wel met PHP een naam selecteren en op het beeld zetten "Goed" of "Fout"
Maar hoe vang ik dit op met AJAX? (Zonder de pagina te herladen waar de lijst op staat)
Gewijzigd op 03/09/2012 19:07:50 door Jan terhuijzen
http://web.enavu.com/tutorials/checking-username-availability-with-ajax-using-jquery/
Maar ik zal dit wel gebruiken.
Jan terhuijzen op 03/09/2012 19:55:09:
Ik ben eigenlijk niet fan van jQuery omdat ik alle code voor mezelf wil hebben. en omdat je er minder van leert. :S
Er zijn wel betere redenen om liever geen jQuery te gebruiken, maar ja ...
Hier is dus een voorbeeld zonder jQuery. Met wat uitleg.
Je moet nog je gegevens uit de DB integreren in de code.
Lees de stukjes commentaar.
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
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
<?php
// connectie met de DB maken
if($_SERVER['REQUEST_METHOD'] === 'POST') {
$sql = "SELECT naam FROM leden WHERE naam='" . mysql_real_escape_string($_POST['lidnaam']) . "'";
// de rest afhandelen. query uitvoeren,
// de echo die je hier doet, is wat op het scherm zal verschijnen. Dit han een stuk HTML zijn; het kan tekst zijn; een getal, een true of false; ...
echo 'de naam <b>' . htmlentities($_POST['lidnaam'], ENT_QUOTES, "UTF-8") . '</b> is al bezet';
exit; // Bij een Ajax verzoek wil je enkel de data die nodig is voor het verzoek. Je wil absoluut niet dat de hele pagina wordt opgestuurd. Dus de ultieme oplossing: exit;
}
?>
<!doctype>
<html>
<head>
<script>
var ajax = ajaxObject(); // ajax object dat je overal kan gebruiken
function zoekNaam() {
/**
* we beginnen een ajax-verzoek
*/
ajax.open('post', 'index.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // dit hoort bij een POST verzoek
ajax.onreadystatechange = function() { // deze functie wordt uitgevoerd telkens er een verandering is in de readyState. readyState gaat van 0 (begin verzoek) tot 4 (verzoek klaar; respons is aangekomen)
if (ajax.readyState==4 && ajax.status==200) {
// hier voeren we uit wat nodig is wanneer het verzoek volledig geslaagd is.
// de respons van het verzoek steekt in ajax.responseText
document.getElementById('waarschuwing').innerHTML = ajax.responseText;
}
}
var username = document.getElementById('lidnaam').value;
var data = 'lidnaam=' + escape(username);
ajax.send(data);
}
/**
* geeft een ajax-object terug
*/
function ajaxObject() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
else {// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
</head>
<body>
<label for="lidnaam">Lidnaam: </label><br>
<input type="text" id="lidnaam">
<input type="button" value="Toevoegen" onclick="zoekNaam();">
<div id="waarschuwing"></div>
</body>
</html>
// connectie met de DB maken
if($_SERVER['REQUEST_METHOD'] === 'POST') {
$sql = "SELECT naam FROM leden WHERE naam='" . mysql_real_escape_string($_POST['lidnaam']) . "'";
// de rest afhandelen. query uitvoeren,
// de echo die je hier doet, is wat op het scherm zal verschijnen. Dit han een stuk HTML zijn; het kan tekst zijn; een getal, een true of false; ...
echo 'de naam <b>' . htmlentities($_POST['lidnaam'], ENT_QUOTES, "UTF-8") . '</b> is al bezet';
exit; // Bij een Ajax verzoek wil je enkel de data die nodig is voor het verzoek. Je wil absoluut niet dat de hele pagina wordt opgestuurd. Dus de ultieme oplossing: exit;
}
?>
<!doctype>
<html>
<head>
<script>
var ajax = ajaxObject(); // ajax object dat je overal kan gebruiken
function zoekNaam() {
/**
* we beginnen een ajax-verzoek
*/
ajax.open('post', 'index.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // dit hoort bij een POST verzoek
ajax.onreadystatechange = function() { // deze functie wordt uitgevoerd telkens er een verandering is in de readyState. readyState gaat van 0 (begin verzoek) tot 4 (verzoek klaar; respons is aangekomen)
if (ajax.readyState==4 && ajax.status==200) {
// hier voeren we uit wat nodig is wanneer het verzoek volledig geslaagd is.
// de respons van het verzoek steekt in ajax.responseText
document.getElementById('waarschuwing').innerHTML = ajax.responseText;
}
}
var username = document.getElementById('lidnaam').value;
var data = 'lidnaam=' + escape(username);
ajax.send(data);
}
/**
* geeft een ajax-object terug
*/
function ajaxObject() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
else {// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
</head>
<body>
<label for="lidnaam">Lidnaam: </label><br>
<input type="text" id="lidnaam">
<input type="button" value="Toevoegen" onclick="zoekNaam();">
<div id="waarschuwing"></div>
</body>
</html>
Ik denk dat Post hier beter is dan Get. Voor speciale tekens helpt dit.
Gewijzigd op 04/09/2012 13:59:09 door Kris Peeters