Lid |
|
Goedenavond,
Ik heb een leuk contact formuliertje gemaakt, allemaal leuk en aardig maar wat saai. Dus wil ik er met AJAX voor zorgen dat ik onmiddelijk kijk of de ingevulde waardes goed zijn.
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") {
echo check_field($_POST['input'], $_POST['field']);
}
elseif ($_POST['send'] == "true") {
function check_field($input, $field) { $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") { echo check_field ($_POST['input'], $_POST['field']); } elseif ($_POST['send'] == "true") {
Dit is de relevante php code, en dan nu het javascript gedeelte:
function newRequest() {
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert('Problem creating the XMLHttpRequest object');
}
return req;
}
function CheckField(query, name) {
http = newRequest();
http.open('POST', '/Steven/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('valid'+name).innerHTML = http.responseText;
}
}
function newRequest() { var req; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Problem creating the XMLHttpRequest object'); } return req; } function CheckField(query, name) { http = newRequest(); http.open('POST', '/Steven/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('valid'+name).innerHTML = http.responseText; } }
Het is misschien wat veel, sorry hiervoor. Kleine toelichting:
Met check_field valideer ik het veld, met een succes of error message als return.
Daaronder kijk ik of de post['ajax'] geset is, zoja: dan vraagt ajax een check op, en dan krijgt hij die.
Anders zal de gebruiker waarschijnlijk koppig op submit hebben gedrukt, en check ik alles.
Bij de input van mijn formulier staat:
onkeyup="CheckField(ajax=true&input=this.value&field=this.name,this.name);"
hiermee stuur ik dus $_POST['ajax'] = true etc naar contact.php
Teminste als alles goed zou gaan, maar dat gaat het dus niet.
Verder kan ik met firebug geen errors vinden (hoewel ik firebug nog niet echt werkend heb gezien met javascript).
Hoop dat iemand me kan helpen met deze lange post, mijn dank is groot.
Een live voorbeeld is trouwens hier te zien.
|