• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Währen einer JS Prüfung PHP ausführen!?

D

Distanz

Neues Mitglied
Hallo,

ich sitze vor einem für mich riesen Problem! Und zwar möchte ich das Feld "Username" nachdem ich was eingegeben habe per javerscript überprüfen lassen! Auf die länge der Eingabe und darauf ob der gerade eingegebene Name schon in der MySQL Datenbank vorhanden ist! Wenn der Name zu kurz ist soll "Name zu kurz" ausgegeben werden wenn der Name bereits in der MySQL DB. schon vorhanden ist soll kommen "Name bereits vergeben" wenn beides ok ist also die länge stimmt und der name frei ist soll "OK" kommen. Beides einzeld klappt schon aber wie verbinde ich das nun? Hier die Codes:

usernamen vergleich mit der MySQL Datenbank:
PHP: 
<?PHP

//Variablen

$username = $_POST['username'];


//Server Verbindung
$con = mysql_connect("distanz.*******.de","distanz","*********") or die ("Keine Verbindung moeglich");
       mysql_select_db("distanz") or die ("Die Datenbank gibt es nich");
       
//Vergleich
$result = mysql_query("SELECT id FROM user WHERE username LIKE '$username'");
$menge = mysql_num_rows($result);

echo $username;
echo $menge;

if ($menge == 0)
    {
     echo "Ok User ist frei!"; 
    }
    else
    {
     echo "User schon vergeben!";
    }
?>

<html>
<head></head>
<body>
<form method="POST" name="user" id="user" action="">
 <input type="text" name="username" id="username">
 <input type="submit" name="submit" value="Vergleich!">
</form>
</body>
</html>

und dann das aktuelle anmeldescript wo die Kontrolle durchgeführt werden soll:
HTML: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />   
 
<!-- Textfelder leeren Bsp.: -->
        
<script language="JavaScript">

function clearField(vorname) {

if (vorname.value == "") vorname.value = "";

}  

</script>

<!-- ________Ende_________ -->

<script language="JavaScript">

<!--(Formprüfung) -->

function checkForm1(Form1) 
{
    var Username = document.getElementById('Username').value;
    var Vorname = document.getElementById('Vorname').value;
    var Name = document.getElementById('Name').value;
    var Email = document.getElementById('Email').value;
    var Pass = document.getElementById('Pass').value;
    var PassWie = document.getElementById('PassWie').value;
    var Form = document.getElementById('Form1').action;
    var BedinungenOk = document.getElementById('BedinungenOk').checked;
    
    
    if(Vorname.length < 5 || Name.length < 5 || Email.length < 5 || Pass.length < 5 || PassWie.length < 5 ||
       Pass != PassWie || document.getElementById('Email').value.indexOf("@") == -1 || BedinungenOk < 1 || Username < 5)
     {
        alert('Bitte alle Felder richtig Ausfüllen!');    
        return false;
    }
    else
    {
        return true;
    }
}  

<!-- ___Ende___ -->


<!-- Felder Prüfen -->

<!-- checkUsername -->
    
function checkUsername()
{
    
    var Username = document.getElementById('Username').value;
    var userrahmen = document.getElementById('Username');
    var userelement = document.getElementById('UsernameFalsch');
    
    
    
    if(Username.length < 5)
    {
        
        userelement.innerHTML = "&nbsp;Zu kurz oder schon vorhanden!";
        userelement.style.color = "red";
        userrahmen.style.border = "2px outset red";
        userrahmen.style.borderBottomLeftRadius = '7px';
        userrahmen.style.borderTopRightRadius = '7px';
    }
    else
    {
        userelement.innerHTML = ("&nbsp;<img src='test.jpg' alt='Bild OK'>");
        userelement.style.color = "green";
        userrahmen.style.border = "2px outset green";
        userrahmen.style.borderBottomLeftRadius = '7px';
        userrahmen.style.borderTopRightRadius = '7px';
    }
}
 
 (((((((((KONTROLLE DER RESTLICHEN EINGABEFELDE)))))


</script>

<!-- _______________________________ -->

<!-- JavaScript aktiv/deaktiv Prüfung -->

<noscript>
   <meta http-equiv="refresh" content="0; URL= HIER MUSS EINE JAVASCRIPT INAKTIV SEITE ENTSTEHEN!!">
</noscript>

<!-- ______Ende_____--> 
       
   <title>Anmeldung</title>
   
   <!-- CSS Style -->
   
   <style type="text/css">
     body { background-color:#FFFFFF; color:#000000 }
     table { table-layout:fixed }
   </style>

 </head>
<body>

<?PHP echo $ok ?>
<table border="7" bgcolor="#D9D9D9" width="570" style="border-radius:24px" align="center">
 <tr>
 <td>

<table border="0">  
 <tr> 
  <td colspan="3"><h1>&nbsp;&nbsp;&nbsp;&nbsp;Anmelde Formular</h1></td>
 </tr> 
 <tr>
 </tr>
     <form  method='POST' name='Form1' id='Form1' onSubmit='return checkForm1(this);'/>
 <tr>
     <td><p align="right">Username:&nbsp;</p></td>
     <td><input type='text' size='22' maxlength='22' name='Username' id='Username' value='' onClick='return clearField(this)' onBlur='return checkUsername(this)'  align="left" style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/></td>
     <td><lable id='UsernameFalsch'></lable></td>
</tr>
 <tr>
     <td><p align="right">Vorname:&nbsp;</p></td>
     <td><input type='text' size='22' maxlength='22' name='Vorname' id='Vorname' value='' onClick='return clearField(this)' onBlur='return checkVorname(this)'  align="left" style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/></td>
     <td><lable id='VornameFalsch'></lable></td>
</tr>
<tr> 
     <td><p align="right">Name:&nbsp;</p></td>
     <td><input type='text' size='22' maxlength='22' name='Name' id='Name' value='' onClick='return clearField(this)' onBlur='return checkName(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/> </td>
     <td><lable id='NameFalsch'></lable></td>
</tr>
<tr>
     <td><p align="right">e-Mail:&nbsp;</p></td>
     <td><input type='text' size='25' maxlength='25' name='Email' id='Email' value='' onClick='return clearField(this)' onBlur='return checkEmail(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/> </td>
    <td><lable id='EmailFalsch'></lable></td>
</tr>
<tr>
     <td><p align="right">Passwort:&nbsp;</p></td>
     <td><input type='password' size='15' maxlength='15' name='Pass' id='Pass' value='' onClick='return clearField(this)' onBlur='return checkPass(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/> </td>
    <td><lable id='PassFalsch'></lable></td>
</tr>
<tr>
     <td><p align="right">Passwort/&nbsp;<br>Wiederholung:&nbsp;</p></td>
     <td><input type='password' size='15' maxlength='15' name='PassWie' id='PassWie' value='' onClick='return clearField(this)' onBlur='return checkPassWie(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/> </td>
     <td><lable id='PassWieFalsch'></lable></td>
</tr>
<tr>
     <td><p align="right">PLZ/&nbsp;Ort:&nbsp;</p></td>
     <td><input type='text' size='7' maxlength='7' name='PLZ' id='PLZ' value='' onClick='return clearField(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/>&nbsp;

         <input type='text' size='20' maxlength='20' name='Ort' id='Ort' value='' onClick='return clearField(this)' onBlur='return checkPLZOrt(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/> </td>
     <td><lable id='PLZOrtFalsch'></lable></td>
<tr>
     <td><p align="right">Strasse/&nbsp;Nr.:&nbsp;</p></td>
     <td><input type='text' size='20' maxlength='20' name='Strasse' id='Strasse' value='' onClick='return clearField(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/>&nbsp;

<input type='text' size='4' maxlength='4' name='Nummer' id='Nummer' value='' onClick='return clearField(this)' onBlur='return checkStrNum(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/></td> 
     <td><lable id='StrNumFalsch'></lable></td>
</tr>

<tr>
     <td><p align="right">Tele.:&nbsp;</p></td>
     <td><input type='text' size='20' maxlength='20' name='Tele' id='Tele' value='' onClick='return clearField(this)' onBlur='return checkTele(this)' style= 'border: 2px; border-style: outset; border-color:#000; border-bottom-left-radius:7px; border-top-right-radius:7px;'/> </td>
    <td><lable id='TeleFalsch'></lable></td>
</tr>
<tr>
   <td></td>
   <td><input type="checkbox" name="BedinungenOk" id="BedinungenOk" onChange='return checkBeOk(this)'><a href="Bedinungen.html">Bedinungen</a><font>&nbsp;gelesen?</font></td>
</tr>
<tr>
      <th colspan="2">
                      <input value='Absenden' type='submit' onClick="Form1.action='reg.php'";/> 
                      <input type='Reset' value='Zuruecksetzen'/> <br><br></th>

</tr>
<tr>
</tr>
</table>


</td>
</tr>
</table>
</form>
</body>
</html>


natürlich soll der obere code dann auf das Feld mit dem Namen "username" zugreifen aus dem unteren Code!

Ich habe keine ahnung wie das geht und geht das überhaupt?
mfG DistanZ
 
Google mal nach xmlHTTPRequest oder AJAX. Mit diesen Methoden kannst im Hintergrund einer Seite mittels JavaScript eine Anfrage beim Server machen, also ein PHP Script aufrufen und dessen Antwort dann im JavaScript auswerten.
 
Sobald es in den Bereich Ajax geht empfehle ich doch immer ein Framework zu benutzen (Sei es jQuery, Mootools etc.). Du musst wie NetAktiv schon richtig gesagt hat ein Ajax-Request an deinen Server mit den nötigen Parametern abschicken. Das XMLHttpRequest - Objekt - Javascript - Ajax - Tutorials, Tipps und Tricks für Webmaster auf Webmasterpro.de
So ein XmlHttpRequest wird dann schonmal doch recht schnell komplex und du wirst dir wahrscheinlich eine Funktion dafür schreiben. In sofern rate ich dir zu vorgefertigten Funktionen bzw zu einem Framework :)
 
Gilles schrieb:
Sobald es in den Bereich Ajax geht empfehle ich doch immer ein Framework zu benutzen
Zum Vergrößern anklicken....
Ich würde da widersprechen, es hängt völlig vom Umfang der Nutzung ab. Wenn ich 1x so eine Mini-Aufgabe habe Daten über einen Parameter anzufordern und dann die Response zu verarbeiten, dann ist das Drumherum viel größer, als das bissl GET. Die Einarbeitung in ein Framework dauert wesentlich länger, als die gesamte Anwendung basierend auf nur dem xmlHTTRequest zu erstellen. Ein Beispiel für eine so einfache Anwendung ist auf meiner Mühle-Homepage. Mühlespiel - Übungen Beispiele Varianten, da kann man auch den javascript Code vom Prinzip herunter laden.

Kurzbeschreibung:
  1. Jedes Mühlespiel liegt als serialisiertes Objekt mit eindeutigem Namen auf dem Server als XML-Datei.
  2. Der Benutzer wählt ein Spiel, Spielname ergibt den Dateinamen.
  3. xmlHTTPRequest macht eine GET auf die XML-Datei.
  4. Nach Empfang parsen und das Spiel in ein JavaScript abspielbar machen.
In diesem Fall musste ich nicht mal auf dem Server was machen, weil die Spiele (sind nur ein paar) als Dateien vorhanden sind und ich nicht mal einen Datenbankzugriff brauche. Der gesamte GET-Code macht keine 30 Zeilen aus. Zum Parsen des XML habe ich dann doch ein Framework (vorhandene Libraries) verwendet, das wäre sonst zu aufwendig geworden, auch wenn es nur eine feste und bekannte XML-Struktur ist.

Grüße, Rainer
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben