Zum Inhalt springen.
Zum Seitenanfang springen.
Sie befinden sich genau hier: Home > Computer > Coding > JavaScript - Formular.

Formular mit JavaScript:


Das folgende Formular wird zunächst mit JavaScript geprüft. Bei Fehlern werden die entsprechenden Formularfelder markiert. Wenn alle Eingaben wie gewünscht sind, wird das Formular an die serverseitige Prüfung mit PHP übergeben. Auch hier sind dann noch weitere Prüfungen möglich. Wenn hier dann auch alles richtig ist, wird das Formular als HTML-Email verschickt.

Die Auswahl eines Apfels als Obstsorte löscht das DOM-Object das den Grund dafür abfragt. Wenn der Apfel wieder abgewählt wird, wird der Quelltext für die Textarea dem DOM-Baum durch innerHTML wieder hinzugefügt.

Die Datei enthält direkt den JavaScript-Code, was für XHTML nicht ganz korrekt ist. Besser ist es den Quelltext in eine JS-Datei auszulagern. Damit aber alles in einer Datei zusammen ist, hab ich es hier anders gemacht.




weiblich männlich





Formular im Vollbild öffnen.

Es folgt der Quelltext für dieses Formular. Der Quelltext ist hier auch als TXT-Datei hinterlegt.

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Formular</title>

<!-- CSS legt das Design des Formulares fest. -->
<style type="text/css">
label, select { display: block; float: left; width: 120px; }

input#submit {float: none; width: auto;}

label {text-align:left; padding-right: 1em; }

form {background-color: #dddddd; border: thin solid #e4e4e4;
        margin:0; padding:.5em;}

input[type=text]:focus, input[type=number]:focus, text area:focus {
  background-color: #ffff00;
  border-color:#b7274c;
  color: #000;
  }
   
.FehlerMarkierenFarbe {background-color: #FA5858; }    
</style>

<script type="text/javascript">
function Obstelement(Feld) {
if (Feld == "Apfel" && Feld !="") {
    EntferneElement(document.getElementById("Begruendung"));
    var mytext="<br /><br />Dazu braucht es keinen Grund!<br /><br />";
    document.getElementById("BegruendungHinzu").innerHTML = mytext;  
 }else{
    var mytext="<div id='Begruendung'><label>Grund: </label>"
    + "<textarea cols='30' rows='5/' name='Grund'>Wieso dieses Obst?</textarea><br /><br /></div>";
    document.getElementById("BegruendungHinzu").innerHTML = mytext;
    }
}
    
function EntferneElement(element) {
    if (element) {
      var Eltern = element.parentNode;
      // alert (Eltern);

      if (Eltern) Eltern.removeChild(element);
    }
}

// Diese Funktion überprüft das Formular und gibt eine Messagebox aus.

// Zusätzlich wird die Funktion der Färbung aufgerufen.

function pruefeFormular(f) {
    var fehlermeldung = "";
    if (f.elements["Absender"].value == "") {
      Fehlermeldung += "Geben Sie bitte einen Absender ein.\n";
      FehlerMakieren("Absender");
    }
    if (f.elements["Name"].value == "") {
      fehlermeldung += "Geben Sie bitte Ihren Namen ein.\n";
      FehlerMakieren("Name");
    }
    if (f.elements["Vorname"].value == "") {
      fehlermeldung += "Geben Sie bitte Ihren Vornamen ein.\n";
      FehlerMakieren("Vorname");
    }
    if (!f.elements["Geschlecht"][0].checked && !f.elements["Geschlecht"][1].checked) {
      Fehlermeldung += "Geben Sie bitte eine Geschlechtsauswahl ein.\n";
      FehlerMakieren("Geschlecht");
    }
    if (!f.elements["Abschlusskontrolle"].checked) {
      fehlermeldung += "Bestätigen Sie bitte das Sie die Eingaben geprüft haben!\n";
      FehlerMakieren("Abschlusskontrolle");
    }   
    if (fehlermeldung == "") {
      return true;
    } else {
      alert("Es ist ein Fehler aufgetreten!\n\n" + fehlermeldung);
      return false;
    }
}

// Diese Funktion färbt das Feld, indem es das DOM-Objekt ändert.

function FehlerMakieren(Fundort) {
  var Formularfeld = Fundort;
  if (Fundort == Formularfeld) {
      var FomularFeld = document.getElementsByName(Formularfeld)[0];
      FomularFeld.className = "FehlerMarkierenFarbe";
  }       
  if (Fundort == "Geschlecht") {
      var FomularFeld = document.getElementsByName("Geschlecht")[0];
      FomularFeld.className = "FehlerMarkierenFarbe";
      var FomularFeld = document.getElementsByName("Geschlecht")[1];
      FomularFeld.className = "FehlerMarkierenFarbe";
  }    
}
</script>
</head>
<body>
<?php
/* Formular wird hier neben der JavaScriptprüfung auch
noch einem kurzen PHP-Check unterworfen.
Vorteil dabei ist, dass dieser serverseitig passiert
und der Quelltest nicht vom User gelesen werden kann */

$fehler = '';
$Name = $_POST['Name'];

if (isset($_POST['Absender'])){
  if (trim($_POST['Absender']) != ''){
      $Absender = $_POST['Absender'];
  }else{
      $fehler = $fehler . '<b>Es wurde kein Absender angegeben</b><br />';
  }
  if ($fehler != ''){
      echo $fehler;
  } else{
      echo '<br/><br/><b>Ihre Email wurde verschickt.</b>';

  $absendermail = $_POST['Absender'];
  $empfaenger = "info@datenschwamm.de";            
  $betreff = "Testmail von ".$_POST['Absender'];

  $text = "<br/> Absender: <b>".$_POST['Absender']."</b><br/><br/>
  Dies ist eine Testmail. HTML-Mails dürfen Links so darstellen:
  <a href='http://www.datenschwamm.de' style='color:#006699;border-bottom: 1px dotted #369;'>Klick mich an!</a><br />
  Hier die Daten des Formulars:<br />
  Name: <b>"
.$_POST['Name']."</b><br/>
  Vorname: <b>"
.$_POST['Vorname']."</b><br/>
  Geschlecht: <b>"
.$_POST['Geschlecht']."</b><br/>
  Obstauswahl: <b>"
.$_POST['Obstauswahl']."</b><br/>
  Grund: <b>"
.$_POST['Grund']."</b><br/>";

  $header  = "MIME-Version: 1.0\r\n";
  $header .= "Content-type: text/html; charset=iso-8859-1\r\n";
  $header .= "To: info@datenschwamm.de\r\n";
  $header .= "From: ".$_POST['Absender']."\r\n";
  // $header .= "Cc: \r\n";

  // $header .= "Bcc: \r\n";

  mail($empfaenger, $betreff, $text, $header);
  }            
}   
?>
<form onsubmit="return pruefeFormular(this);" method="post" action="<?php echo $_SERVER['SCRIPT_NAME'] ?>">
<label>Absender:</label> <input type="text" name="Absender" /><br />
<label>Name:</label>     <input type="text" name="Name" value="" /><br />
<label>Vorname:</label> <input type="text" name="Vorname" value=""/><br />
<label>Geschlecht: </label>
<input type="radio" name="Geschlecht" value="weiblich" />weiblich <input type="radio" name="Geschlecht" value="m&aumlnnlich" />m&aumlnnlich
<br /><br />
<label>Obstauswahl: </label>
<select name="Obstauswahl" onclick="Obstelement(this.value)">
<option value="">Wählen Sie bitte eine Obstsorte!</option>
<option value="Apfel">Apfel</option>
<option value="Birne">Birne</option>      
<option value="Banane">Banane</option>
<option value="Kiwi">Kiwi</option>
<option value="Orange">Orange</option>
</select>
<br /><br />
<div id="BegruendungHinzu">
<div id="Begruendung">            
<label>Grund: </label><textarea cols="30" rows="5" name="Grund">Wieso dieses Obst?</textarea><br /><br />
</div>
</div>
<label><input type="checkbox" name="Abschlusskontrolle" value="ja" />
Eingaben gepr&uuml;ft? -><br /></label>
<input type="submit" name="Submit" value="Formular absenden" />
</form>
</body>
</html>