kostenloser Webspace werbefrei: lima-city


Haken bei Inputfeld (Ajax?)

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kogsz

    kogsz hat kostenlosen Webspace.

    Hallo,
    ich habe ein Login-System in PHP geschrieben. Leider halten sich meine JavaScript/Ajax usw Kenntnisse stark in Grenzen, deswegen folgende Frage:
    ich will programmieren, dass wenn man beispielsweise die E-Mail eingetippt hat, ein Haken rechts vom (oder im) Inputfeld erscheint, wenn die E-Mail noch nicht existiert und wenn sie schon existiert, ein rotes x erscheint.
    Das Gleiche bei Passwort und Passwort wiederholen (wenn sie übereinstimmen: haken/kreuz)
    Könnt ihr mir da bitte helfen?

    Formular:
    <form action="index.php" method="post">
    <table id="register">
    <tr><td>Vorname</td>
    <td><input type="text" name="vname" size="30" style="
        -moz-border-radius:15px; /* Firefox */
        -webkit-border-radius:15px; /* Safari, Chrome */
        -khtml-border-radius:15px; /* Konqueror */
        border-radius:15px; /* CSS3 */" maxlength="50"/></td>
    </tr>
    <tr><td>Nachname</td>
    <td><input type="text" name="nname" size="30" style="
        -moz-border-radius:15px; /* Firefox */
        -webkit-border-radius:15px; /* Safari, Chrome */
        -khtml-border-radius:15px; /* Konqueror */
        border-radius:15px; /* CSS3 */" maxlength="50"/></td>
    </tr>
    <tr><td>Passwort</td>
    <td><input type="password" name="passwort" size="30" style="
        -moz-border-radius:15px; /* Firefox */
        -webkit-border-radius:15px; /* Safari, Chrome */
        -khtml-border-radius:15px; /* Konqueror */
        border-radius:15px; /* CSS3 */" maxlength="50"/></td>
    </tr>
    <tr><td>Passwort wiederholen</td>
    <td><input type="password" name="passwort2" size="30" style="
        -moz-border-radius:15px; /* Firefox */
        -webkit-border-radius:15px; /* Safari, Chrome */
        -khtml-border-radius:15px; /* Konqueror */
        border-radius:15px; /* CSS3 */" maxlength="50"/></td>
    </tr>
    <tr><td>E-Mail</td>
    <td><input type="text" name="email" size="30" style="
        -moz-border-radius:15px; /* Firefox */
        -webkit-border-radius:15px; /* Safari, Chrome */
        -khtml-border-radius:15px; /* Konqueror */
        border-radius:15px; /* CSS3 */" maxlength="50"/></td>
    </tr>
    <tr><td><input type="submit" value="Registrieren" style="
        -moz-border-radius:15px; /* Firefox */
        -webkit-border-radius:15px; /* Safari, Chrome */
        -khtml-border-radius:15px; /* Konqueror */
        border-radius:15px; /* CSS3 */
        text-align: center;
        "
        name="register"/></td>
    </tr>
    </table>
    </form>
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

    Hey,

    hier solltest du dir noch über diverse andere Sachen Gedanken machen.

    Wann möchtest du die Felder validieren?
    Nach der Eingabe? Beim eintippen oder beim absenden des Formulars? Wobei du beim absenden sowieso validieren solltest.

    Um die Sache etwas einfacher zu machen könntest du jQuery nutzen. Die Passwörter zu überprüfen ist ja einfach. Wenn du dich entschieden hast wann du das machen möchtest vergleichst du einfach den Inhalt der Felder. Falls sie nicht identisch sind markierst du die Felder (z.B. mit CSS).
    Du müsstest den Passwortfeldern noch id's zuweisen, dann geht das mit jQuery ungefähr so:
    if(jQuery('#passwort').val() != jQuery('#passwort2') {
     jQuery('#passwort').addClass('errorEingabe');
     jQuery('#passwort2').addClass('errorEingabe');
     return false;
    }


    Das mit der E-Mail Adresse ist dann schon wieder ein wenig kniffliger. Hier müsste du mit Ajax gegen eine Schnittstelle prüfen ob diese bereits vergeben ist. Die Rückgabewerte deiner Schnittstelle müssen dementsprechend angepasst sein. In jQuery ungefähr so:
    jQuery.ajax({
      			type: "POST",
      			url: "emailcheck.php",
      			data: {
      				email: jQuery('#email').val(),
      			},
      			dataType: 'json',
     			success: function(data) {
     				if(!data) {
     					jQuery('#email').addClass('emailError');
     				}
     				else if(data.success == true) {
     					jQuery('#email').addClass('emailOk');
     				}
     				else {
     					jQuery('#email').addClass('emailError');
     				}
     			},
     			error: function() {
     				alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut.");
     			}
    		});


    WICHTIG!!
    Das sind allerdings nur Ansätze es kommt jetzt darauf an wie du es lösen möchtest. Wann und ob du überhaupt mit jQuery arbeiten willst.
  4. Autor dieses Themas

    kogsz

    kogsz hat kostenlosen Webspace.

    Könntest du mir bitte näher erklären, was das Programm macht (jetzt nur bei E-Mail).
    Ich will es bereits beim Eintippen überprüfen.
    Und was wird dann an emailcheck.php übertragen?
    Edit:
    habs ausprobiert. Es kommt die ganze Zeit die Fehlermeldung "Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut.", auch wenn ich etwas in das Inputfeld eingebe

    Beitrag zuletzt geändert: 28.12.2013 22:41:17 von kogsz
  5. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

    Hey,

    sorry hätte das wohl was genauer erklären sollen. Also wie gesagt das ist nur ein Ansatz.
    Ich versuch dir den Ajax-Call mal Step by Step zu erklären.

    Die ersten beiden Zeilen sind eigentlich trivial. Wir nutzen die Bibilothek jQuery die Funktion ajax.
    Als type setzen wir die http-Methode post.
    Dann kommt die url, ich vermute hier liegt wohl bei dir der Fehler. Als url kannst du entweder eine url angeben z.B. "www.meinedomain.de/irgendein/skript" oder eben ein relativen Pfad wie "emailcheck.php". Diese Datei muss existieren, sie ist die Schnittstelle von der ich gesprochen hatte. Das php Skript, oder welche Sprache auch immer du benutz, muss dann die E-Mail Adresse mit der Datenbank, oder ähnlichen, abgleichen. Dann muss diese Schnittstelle die Daten im richtigen Format, welches du mittels dataType definierst, zurückgeben. Also in diesem Beispiel im json-Format. In php gibt es z.B. die Funktion http://www.php.net/manual/de/function.json-encode.php.
    jQuery.ajax({
       type: "POST",
       url: "emailcheck.php",
       dataType: 'json',



    Unter data kannst du die Daten definieren, die du an die Schnittstelle mittels post oder get übermittelst.
    Falls du post wählst kannst du dann z.B. wieder mit php die E-Mail Adresse mit $_POST['email'] abfragen.
    data: {
      		email: jQuery('#email').val(),
      	},


    Der success und der error Block. In den zweiten läufst du scheinbar, ich denke da du die Schnittstelle das Skript noch nicht angelegt hast, oder ein falsche url definiert hast. Der error Block wird aufgerufen falls der http-Request fehlschlägt. Also z.B. im falle eines http Fehlers 404. Der success Block ist dann der in dem du zumindest schon mal einen Response erhältst. Diesen musst du jetzt bewerten. In data wird der json Response gespeichert. Existiert data nicht stimmt irgendwas noch nicht mit deinem Rückgabewert (erste if Abfrage). Ich bau data immer als Array auf, in json sieht das dann ungefähr so aus {"success": true, "statusMeldung": "irgend eine Rückgabe"}. Über den success Status kannst du ermitteln ob der Request erfolgreich war. Du könntest das mittels der statusMeldung noch genauer validieren. Dann müsse im ersten else Teil noch ein wenig mehr passieren. Im zweiten else Teil kannst du z.B. auch die statusMeldung verarbeiten, der Request war nicht erfolgreich aber warum? Ist die E-Mail Adresse bereits in Verwendung oder willst du sie vll nicht zulassen weil es eine wegwerf E-mail ist, oder vll ist sie nicht valide. Hier hast du ziemlich viele Möglichkeiten, welche alle von deiner Schnittstelle abhängen.
    success: function(data) {
     		if(!data) {
     			alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut.");
     		}
     		else if(data.success == true) {
     			jQuery('#email').addClass('emailOk');
     		}
     		else {
     			jQuery('#email').addClass('emailError');
     		}
     	},
     	error: function() {
     		alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut.");
     	}
    		});


    Ich hoffe ich konnte dir etwas weiterhelfen.

    Gruß
  6. Autor dieses Themas

    kogsz

    kogsz hat kostenlosen Webspace.

    Danke für die schnelle Hilfe :)
    Leider geht es aber immernoch nicht :(
    Inhalt von test.php:
    <form action="test.php" method="post">
    <input type="text" name="email"/>
    <input type="submit"/>
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
    jQuery.ajax({
      			type: "POST",
      			url: "test2.php",
      			data: {
      				email: jQuery('#email').val(),
      			},
      			dataType: 'json',
     			success: function(data) {
     				if(!data) {
     					jQuery('#email').addClass('emailError');
     					alert("nodata");
     				}
     				else if(data.success == true) {
     					jQuery('#email').addClass('emailOk');
     					alert("ok");
     				}
     				else {
     					jQuery('#email').addClass('emailError');
     					alert("error");
     				}
     			},
     			error: function() {
     				alert("Es ist leider ein technischer Fehler aufgetreten. Versuchen sie es später erneut.");
     			}
    		});
    
    </script>

    Habe noch alerts hinzugefügt, sodass ich gleich ne Meldung bekomme und nich mit CSS rumhantieren muss :D

    Inhalt von test2.php (bei dir emailcheck.php):
    <?php echo $_POST['email']; ?>

    Es kommt immernoch die Fehlermeldung mit dem technischen Fehler.

  7. In deiner test2.php musste ja nun prüfen, ob Email vorhanden oder nicht und dann im JSON Format ein TRUE oder FALSE zurückgeben. Mit einem echo kann es nicht funktionieren.
  8. Autor dieses Themas

    kogsz

    kogsz hat kostenlosen Webspace.

    habe test2.php erweitert:
    <?php
    include "db_connect.php";
    echo $_POST['email'];
    $email = $_POST['email'];
    $user_vorhanden = mysql_num_rows(mysql_query("SELECT * FROM login WHERE `E-Mail` = '$email')); // 1 bei User schon vorhanden, bei 0 nicht
    if($user_vorhanden == 1)
    {
       echo "<img src=haken.jpg />";
    }
    else
    {
        echo "<img src=kreuz.jpg />";
    }
    ?>


    Gleiche Fehlermeldung :/
  9. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

    :) deine test2.php muss die Daten im json Format zurückliefern z.B.

    <?php
    include "db_connect.php";
    $email = $_POST['email'];
    $user_vorhanden = mysql_num_rows(mysql_query("SELECT * FROM login WHERE `E-Mail` = '$email')); // 1 bei User schon vorhanden, bei 0 nicht
    if($user_vorhanden == 1)
    {
      $result = array(
          "success" => false,
          "status" => "E-Mail wird bereits verwendet"
      );
    }
    else
    {
      $result = array(
          "success" => true,
          "status" => "E-Mail noch frei"
      );
    }
    
    echo json_encode($result);
    ?>


    hoffe hab kein tipper drin.

    Das Bild setz du dann über javascript.
  10. Autor dieses Themas

    kogsz

    kogsz hat kostenlosen Webspace.

    Sorry Leute aber es geht immernoch nicht :D
    Wenn ich auf test.php gehe erscheint jetzt nicht mehr die Fehlermeldung, sondern "ok", wegen
    else if(data.success == true) {
     					jQuery('#email').addClass('emailOk');
     					alert("ok");

    Das ist ja schon einmal ein Fortschritt :D
    Wenn ich aber etwas in das Textfeld eingebe passiert rein gar nichts.
    Sorry, dass ich euch so auf die Nerven gehe :D
    BTW würde mir glaube ich ein jQuery/Ajax ? Tutorial nicht schaden. Ich habe leider keins auf (vorzugsweise) deutsch gefunden, das mich angesprochen hat und gut war. Kennt ihr da welche?
  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!