Ajax form check
Ik ben bezig met wat ajax en wilde het combineren met een formuliertje. Om het simpel te houden probeer ik eerst eens simpel php checkje op te vragen, als ik het ajax gebeuren onder de knie heb kan ik er met een mysql query meer mee doen, zoals bijvoorbeeld automatisch kijken of de username al bestaat.
Ik heb het volgende:
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
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
<?php
function check_field($input, $field) {
if (strlen($input) < 3) {
global $error, $send;
$msg = "Your ".$field." should be atleast 3 characters long.";
$error .= "<br>* ".$msg;
$send = false;
return $msg;
}
else {
$msg = "This field is filled in correctly.";
return $msg;
}
}
if ($_POST['ajax'] == "true") {
check_field($_POST['input'], $_POST['field']);
}
elseif ($_POST['send'] == "true") {
[/code]
Dit is het php gedeelte, gaat voornamelijk om de functie en de post['ajax']. Lekker simpel nog om te beginnen (denk ik zo).
in mijn index.php (die het bovenstaande, contact.php, include) heb ik javascript.js ook geinclude, die ziet er als volgt uit:
[code]
<script language="javascript">
function newRequest() {
if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
return req;
}
function CheckField(query,name) {
http = newRequest();
http.open("POST", "contact.php", true);
http.onreadystatechange = ShowValidation(name);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.send(query);
}
function ShowValidation(name) {
if (http.readyState == 4 && http.status == 200) {
document.getElementbyId('validsubject').innerHTML = http.responseText;
}
}
[/code]
Het probleem is nu dus dat ik iets niet krijg, en dan ook echt niet. Geen foutmeldingen what so ever. En in mijn FireBug kan ik ook niet bepaald iets vinden.
Een online voorbeeld is te bekijken op: http://www.stevenhack.nl/?page=Contact
En ja een framework is inderdaad makkelijker, maar mijn leraar zegt altijd dat je eerst iets zelf moet kunnen voordat je het kan laten doen! En ik ben een hele brave *ahum* student die altijd luistert!
Edit: Ik heb ondertussen even geprobeerd om het GET te proberen ipv POST (ik heb liever POST) en dus heb ik het volgende aangepast:
de http.open heb ik veranderd in: http.open('GET', 'contact.php?'+query);
en in het php gedeelte $_POST in $_GET veranderd.
Als ik nu handmatig naar http://www.stevenhack.nl/?page=contact&ajax=true&input=test&field=voornaam ga bijvoorbeeld echo'd hij gewoon goed terug, dus het php gedeelte werkt prima. (Hij staat nu nog steeds op de GET methode, de echo is op dit moment debug mode)
Edit 2: Ik heb wat alerts toegevoegd in het javascript gedeelde, en het lijkt erop dat hij niet eens bij de CheckField aankomt.
Edit 3: Ik heb de code nu al zo vaak doorgekeken, en vergeleken met zeker 3 andere scripts. En het ziet er gewoon precies hetzelfde uit (op de content en vars na) dus ik vraag me echt af waarom hij het niet doet.
Opgelost: Het lag aan de <script> en </script> tags. Overbodig in een extern .js file.
function check_field($input, $field) {
if (strlen($input) < 3) {
global $error, $send;
$msg = "Your ".$field." should be atleast 3 characters long.";
$error .= "<br>* ".$msg;
$send = false;
return $msg;
}
else {
$msg = "This field is filled in correctly.";
return $msg;
}
}
if ($_POST['ajax'] == "true") {
check_field($_POST['input'], $_POST['field']);
}
elseif ($_POST['send'] == "true") {
[/code]
Dit is het php gedeelte, gaat voornamelijk om de functie en de post['ajax']. Lekker simpel nog om te beginnen (denk ik zo).
in mijn index.php (die het bovenstaande, contact.php, include) heb ik javascript.js ook geinclude, die ziet er als volgt uit:
[code]
<script language="javascript">
function newRequest() {
if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
return req;
}
function CheckField(query,name) {
http = newRequest();
http.open("POST", "contact.php", true);
http.onreadystatechange = ShowValidation(name);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.send(query);
}
function ShowValidation(name) {
if (http.readyState == 4 && http.status == 200) {
document.getElementbyId('validsubject').innerHTML = http.responseText;
}
}
[/code]
Het probleem is nu dus dat ik iets niet krijg, en dan ook echt niet. Geen foutmeldingen what so ever. En in mijn FireBug kan ik ook niet bepaald iets vinden.
Een online voorbeeld is te bekijken op: http://www.stevenhack.nl/?page=Contact
En ja een framework is inderdaad makkelijker, maar mijn leraar zegt altijd dat je eerst iets zelf moet kunnen voordat je het kan laten doen! En ik ben een hele brave *ahum* student die altijd luistert!
Edit: Ik heb ondertussen even geprobeerd om het GET te proberen ipv POST (ik heb liever POST) en dus heb ik het volgende aangepast:
de http.open heb ik veranderd in: http.open('GET', 'contact.php?'+query);
en in het php gedeelte $_POST in $_GET veranderd.
Als ik nu handmatig naar http://www.stevenhack.nl/?page=contact&ajax=true&input=test&field=voornaam ga bijvoorbeeld echo'd hij gewoon goed terug, dus het php gedeelte werkt prima. (Hij staat nu nog steeds op de GET methode, de echo is op dit moment debug mode)
Edit 2: Ik heb wat alerts toegevoegd in het javascript gedeelde, en het lijkt erop dat hij niet eens bij de CheckField aankomt.
Edit 3: Ik heb de code nu al zo vaak doorgekeken, en vergeleken met zeker 3 andere scripts. En het ziet er gewoon precies hetzelfde uit (op de content en vars na) dus ik vraag me echt af waarom hij het niet doet.
Opgelost: Het lag aan de <script> en </script> tags. Overbodig in een extern .js file.
Gewijzigd op 01/01/1970 01:00:00 door Steven Hack
Er zijn nog geen reacties op dit bericht.