# per Javascript Meldung ausgeben



## mkoeni1 (26. September 2007)

Hallo Leute,

ich habe ein Problemchen mit JavaScript und benötige Eure Hilfe. Ich habe mir ein Formular gebaut um sich in die Datenbank einzutragen. Dass läuft soweit auch ;-) Ich prüfe im Aufenblick meine Felder mit der Funktion im Formular:

```
onSubmit="return check_form()"
```
 ab, die Fehler (wenn jmd. die input Felder fasch ausfüllt oder gar nicht) kommen dann per alert als Anzeige. Das finde ich aber nicht so prickelnd und habe versucht, das ganze an die Tabelle zu senden (in der ich ein div in einer Spalte hinterlegt habe) und dort auszugeben. Das versuche ich in Zeile 8 der register.php:

```
<td><div id="error1"></div></td>
```

Ich poste hier mal die register.php:

```
<?php
if(  $_POST['benutzer'] == null && $_POST['email1'] == null && $_POST['email2'] == null && $_POST['password1'] == null && $_POST['password2'] == null && $_POST['kombi'] == null)
{
echo '<form name="register" action="index.php?action=Register" method="POST" onSubmit="return check_form()">';
  echo '<table class="register"><tr><td colspan="3">Registrieren Sie sich bitte hier:</td></tr>';
  echo '<tr><td>Benutzername</td>';
  echo '<td><input type="text" name="benutzer" onFocus="this.style.backgroundColor=\"#FFC\";" onBlur="set()"></td>';
  echo '<td><div id="error1"></div></td></tr>';
  echo '<tr><td>E-Mail</td>';
  echo '<td><input type="text" name="email1" onFocus="this.style.backgroundColor=\"#FFC\";" onBlur="set()"></td>';
  echo '<td>name@provider.de</td></tr>';
  echo '<tr><td>E-Mail wiederholen</td>';
  echo '<td><input type="text" name="email2" onFocus="this.style.backgroundColor=\"#FFC\";" onBlur="set()"></td>';
  echo '<td>&nbsp;</td></tr>';
  echo '<tr><td>Passwort</td>';
  echo '<td><input type="password" name="password1" onFocus="this.style.backgroundColor=\"#FFC\";" onBlur="set()"></td><';
  echo '<td>&nbsp;</td></tr>';
  echo '<tr><td>Passwort wiederholen</td>';
  echo '<td><input type="password" name="password2" onFocus="this.style.backgroundColor=\"#FFC\";" onBlur="set()"></td><';
  echo '<td>&nbsp;</td></tr>';
  echo '<tr><td>Kombination</td>';
  echo '<td><input type="text" name="kombi" onFocus="this.style.backgroundColor=\"#FFC\";" onBlur="set()"></td>';
  echo '<td>&nbsp;</td></tr>';
  echo '<tr><td>&nbsp;</td><td><input type="submit" name="send" value="Absenden">
        <input type="reset" value="Reset" onclick="window.location.reload()"></td>';
  echo '<td>&nbsp;</td></tr></table>';
echo '<form>';
}
else {
require('sites/dbconnect.php');
  
/* Variablen uebernehmen und ueberpruefen (auf dem Client)*/
  @ $pbenutzer = trim($_POST["benutzer"]);
  @ $pemail1 = trim($_POST["email1"]);
  @ $pemail2 = trim($_POST["email2"]);
  @ $ppass1 = trim($_POST["password1"]);
  @ $ppass2 = trim($_POST["password2"]);
  @ $kombi = trim($_POST["kombi"]);
  

  $time = date("Y-m-j H:i:s");
  echo 'zeit&nbsp;' .$time.'<br>';
  $sql = "INSERT INTO user (id, username, email, password, time) ";
  $sql .= "values ('{$id}', '{$pbenutzer}','{$pemail1}','{$ppass1}','{$time}');";
  echo $sql;
  $result = mysql_query($sql);
  if($result){
    echo "<br>Der Benutzer wurde in die Datenbank eingef&uuml;gt<br />";
    }
    else {
      echo "Es ist ein Fehler aufgetreten: "
        .mysql_error()."<br />";
    }

}
?>
```


und hier zur Sicherheit nochmal die index.php

```
<?php
session_start();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ein Web-Interface </title>

<script language="JavaScript">
// Formular Eingaben pruefen
function check_form(){
  // Pruefen, ob der Benutzername nicht leer ist
  // zB. erstes Formular drittes Feld - window.document.forms[0].elements[2].value
  var fFelder = new Array(6);
for (var i = 0; i < fFelder.length; ++i){
  fFelder[i] = document.forms['register'].elements[i].value;
}
  
  // Fuehrende Leerzeichen aus dem Bentzernamen entfernen
  if(fFelder[0] == ""){
    alert("Bitte einen Benutzername eintragen!");
    window.document.forms['register'].elements[0].focus();
    window.document.forms['register'].elements[0].style.backgroundColor = '#FF4500';
    window.document.getElementById('error1').write = "Hier ist der Fehler";
    return false;
  }
  if(fFelder[1] == ""){
    alert("Bitte E-Mail-Adresse eintragen!");
    window.document.forms['register'].elements[1].focus();
    window.document.forms['register'].elements[1].style.backgroundColor = '#FF4500';
    return false;
  }
  else{ 
    if(document.forms['register'].elements[1].value.indexOf('@') == -1 || document.forms['register'].elements[1].value.indexOf('.') == -1){
    // weitere feinere Ueberpruefungen vornehmen
     alert("E-Mail Adresse besitzt kein gueltiges Format - name@provider.de");
     document.forms[0].elements[1].focus();
     window.document.forms['register'].elements[1].style.backgroundColor = '#FF4500';
     return false;
    }
  }
...
```

Kann mir jemand von Euch helfen ? Ich möchte ganz simpel per 

```
window.document.getElementById('error1').write = "Hier ist der Fehler";
```
 ein div auf der Seite ansprechen um dort den Fehler beim Ausfüllen des Formulars auszugeben.
Vielen Dank und Gruß
Matze


----------



## Tyg3r (26. September 2007)

In deiner CSS die DIV Layer ausblenden:


```
// CSS
table.register td div {display:none;}
```

Im Javascript einblenden, wenn Feld falsche Angaben hat:


```
// JS wenn z.B Name falsch
document.getElementById('id_von_name_error_div').style.display = "block";
```

Gruß tyg3r


----------



## mkoeni1 (26. September 2007)

Hi Tyg3r,

danke für die Hilfe.

Ich hab da so umgesetzt:
test.css

```
table.register td div {
  display:none;
}
```


javascript function:

```
<script language="JavaScript">
// Formular Eingaben pruefen
function check_form(){
  // Pruefen, ob der Benutzername nicht leer ist
  // zB. erstes Formular drittes Feld - window.document.forms[0].elements[2].value
  var fFelder = new Array(6);
for (var i = 0; i < fFelder.length; ++i){
  fFelder[i] = document.forms['register'].elements[i].value;
}
  
  // Fuehrende Leerzeichen aus dem Bentzernamen entfernen
  if(fFelder[0] == ""){
    window.document.forms['register'].elements[0].focus();
    window.document.forms['register'].elements[0].style.backgroundColor = '#FF4500';
    document.getElementById('error1').style.display = "border : 1px solid #F3F3F3;";
    return false;
  }
```


formular:

```
<?php
if(  $_POST['benutzer'] == null && $_POST['email1'] == null && $_POST['email2'] == null && $_POST['password1'] == null && $_POST['password2'] == null && $_POST['kombi'] == null)
{
echo '<form name="register" action="index.php?action=Register" method="POST" onSubmit="return check_form()">';
  echo '<table class="register"><tr><td colspan="3">Registrieren Sie sich bitte hier:</td></tr>';
  echo '<tr><td>Benutzername</td>';
  echo '<td><input type="text" name="benutzer" onFocus="this.style.backgroundColor=\"#FFC\";" onBlur="set()"></td>';
  echo '<td><div id="error">Hier ist der Fehler</div></td></tr>';
  echo '<tr><td>E-Mail</td>';
...
```

Leider hatte ich keinen Erfolg. es tutr sich nichts. Ich arbeite mit dem FF 2.0.0.6.


Gruß Matze


----------



## Tyg3r (26. September 2007)

```
// Fuehrende Leerzeichen aus dem Bentzernamen entfernen
  if(fFelder[0] == ""){
    window.document.forms['register'].elements[0].focus();
    window.document.forms['register'].elements[0].style.backgroundColor = '#FF4500';
    document.getElementById('error1').style.display = "block"; // <-- mit "block" wird es sichtbar
    return false;
  }
```


----------



## mkoeni1 (26. September 2007)

Hi Tyg3r,

besten Dank. Ja, du hattest Recht mit "*block*" wurde es  sichtbar. ich weiß gar nicht was  mich mit "b*order : 1px solid #F3F3F3;*" ale alleinige Angabe geritten hat. Vermutlich  einen Rahmen, aber um was?

Vielen Dank
Gruß
Matze


----------



## mkoeni1 (26. September 2007)

Hallo Tyg3r,

Mist zu früh gefreut. Ich bekomme ja jetzt einen Fehler wenn ich auf Absenden klicke und  zB. unter Benutzername nichts eingetragen habe. Dann kommt dort der Hinweis auf einen:

```
Fehler
```
Wenn ich aber jetzt einen Benutzrername angeben und dann mit der Tab Taste zu einem anderen Feld springe ist der Fehler immer noch sichtbar. Wie kann ich dieses verhindern?
Ich müsste irgendwie das:

```
window.document.getElementById('error0').style.display = "block;";
```

wieder auf *none* setzen können.

Weißt du da einen Rat?

Gruß und Danke
Matze


----------

