Seite 1 von 1
kontaktformular mit ajax
Verfasst: Mi 29.Nov, 2006 15:23
von bce
habe auf der homepage ein "normales" PHP kontaktformular im einsatz.
und mit der neuen ajax-technik kann man ja schöne dinge machen, wie der ajax mod im forum zeigt.
mir schwebt vor, wenn ein user in das kontaktformular seine email einträgt, dass dann per ajax die richtigkeit der emailsyntax überprüft wird. ist sie richtig erscheint ein ok oder ein kleines bild.
wo kann ich anfangen um dieses feature einzubauen?
Verfasst: Mi 29.Nov, 2006 15:43
von oxpus
Gegen was soll denn das Script die Email-Adresse prüfen?
Verfasst: Mi 29.Nov, 2006 17:09
von bce
na das die form beim eingeben korrekt ist..
name@xyz.de
so dass ein evtl. fehler z.b. namexyz.de bei der eingabe gleich angezeigt wird..
Verfasst: Mi 29.Nov, 2006 18:09
von oxpus
Ah ja...
Nun, es gibt tonnenweise Bücher über AJAX, die kann man befragen.
So auf die Schnelle das Script anpassen, ist nicht. Dafür steckt zuviel hinter der Technik.
Oder die Ajax Features darauf erweitern, sofern installiert...
Verfasst: Mi 29.Nov, 2006 21:50
von Gichtus
Was spricht gegen so etwas?
Code: Alles auswählen
<html>
<head>
<script language="JavaScript">
function validate(){
var email=document.getElementById("email").value;
//quelle: http://aktuell.de.selfhtml.org/artikel/programmiertechnik/email/#beispiel
var proto = "(mailto:)?";
var usr = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\"]|\\\\[^\x80-\xff])+\")";
var domain = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
var regex = "^" + proto + "?" + usr + "\@" + domain + "$";
var rgx = new RegExp(regex);
if (rgx.exec(email)) alert("Gültig");
}
</script>
</head>
<body>
<input type="text" onkeyup="JavaScript:validate();" id="email"/>
</body>
</html>
Das Alert() durch eine Funktion ersetzen, die das Bildchen/den Gültigkeitstext anzeigt.
Für eine simple Syntaxüberprüfung ist Ajax nicht notwendig.
Verfasst: Mi 29.Nov, 2006 23:14
von oxpus
Für eine simple Syntaxüberprüfung ist Ajax nicht notwendig.
Das ist wohl wahr, könnte aber bei Bedarf hinzugezogen werden, um die eigene oder andere Datenbanken abzufragen...
Verfasst: Fr 01.Jun, 2007 15:08
von bce
habs nun hinbekommen!
nachdem man eine email eingegeben hat und das feld verlassen hat, wird die eingegebene adresse überprüft.
für interessierte:
der
aufruf in der html-datei:
Code: Alles auswählen
...
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
...
<input type="text" name="email" id="email" size="40" maxlength="40" value="" onBlur="checkEmail();" /><span id="antwort_odgb_email"></span>
...
die
javascript-datei (ajax.js):
Code: Alles auswählen
var http_request = false;
function checkEmail() {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
return false;
}
if(document.odgb_add.email.value != "")
{
//alert(document.odgb_add.email.value);
var url = 'ajax.php?email=' + document.odgb_add.email.value;
http_request.open('get', url , true);
http_request.onreadystatechange = handleResponse;
http_request.send(null);
}
else
{
document.getElementById("antwort_odgb_email").style.visibility = "hidden";
}
}
function handleResponse()
{
document.getElementById("antwort_odgb_email").style.visibility = "visible";
if(http_request.readyState == 4)
{
document.getElementById("antwort_odgb_email").innerHTML = http_request.responseText;
}
}
die
php-datei (ajax.php):
Code: Alles auswählen
<?php
//E-Mail auf Korrektheit prüfen
if (eregi("^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,4}$", trim($_GET['email']))){
echo ' <img src="images/ok.gif" border="0" alt="E-Mail korrekt" title="E-Mail korrekt">';
}
else {
echo ' <img src="images/stop.gif" border="0" alt="eingegebene Adresse nochmal überprüfen" title="eingegebene Adresse nochmal überprüfen">';
}
?>
wenn die email als korrekt eingestuft wird, so wird ein "ok-bild" ausgegeben, wenn nicht ein "falsch-bild"
