kontaktformular mit ajax

Beitrag von **bce** » Mi 29.Nov, 2006 15:23

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?

Beitrag von **oxpus** » Mi 29.Nov, 2006 15:43

Gegen was soll denn das Script die Email-Adresse prüfen?

Beitrag von **bce** » Mi 29.Nov, 2006 17:09

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..

Beitrag von **oxpus** » Mi 29.Nov, 2006 18:09

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...

Beitrag von **Gichtus** » Mi 29.Nov, 2006 21:50

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.

Beitrag von **oxpus** » Mi 29.Nov, 2006 23:14

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...

Beitrag von **bce** » Fr 01.Jun, 2007 15:08

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"