Mehrseitige Formulare werden oft bei Bestellvorgängen oder Anfragen benötigt. Doch oftmals hängt man dann bei den Abfragen fest und muss sich erstmal wieder durch-googeln.
Da wir in letzter Zeit häufig mehrseitige Formulare mit sämtlichen Abfragen hatten, möchten wir heute mal eine kleine „How-To“ Zusammenfassung für Anfänger schreiben. Wir gehen dabei nicht näher auf die Funktionen ein, sondern beschränken uns auf das Wesentliche.
Fangen wir mit der einfachen Abfrage, ob ein Wert eingegeben wurde, an.
Das abzufragende Inputfeld (in dem Fall die Frage nach dem Job) besteht aus:
<form method="post" action="">
<input name=”Job” type=”text” />
</form>
Nun prüfen wir ob ein Job eingegeben wurde und gehen dazu in unserem Quelltext ganz nach oben in den <head> Bereich.
Folgender Codeschnipsel leitet die Abfrage ein:
<script type="text/javascript"><!--
function pruefen(){
var f = document.forms[0];
var fehler = “”;
Nun die Abfrage nach dem Job:
if (f.Job.value == “”) {
fehler += “Job\n”;
}
Das rot markierte „Job“ muss mit dem Namen aus dem abzufragenden Inputfeld identisch sein.
Das blau markierte „Job“ hingegen kann beliebig ersetzt werden. Es dient nur dazu dem Benutzer zu zeigen, was er falsch gemacht hat. So wird der Fehler als Popup ausgegeben – mit der Meldung, dass das Inputfeld „Job“ nicht ausgefüllt wurde.
Wichtig dabei ist nur, dass das \n direkt hinter dem blauen „Job“ stehen bleibt. Dieser erzwingt einen Zeilenumbruch der nötig ist, sobald es mehr als eine Abfrage gibt.
Um die Abfrage nun zu beenden, müssen wir das angefangene Javascript im <head> noch beenden indem wir folgendes eingeben:
if (fehler != "") {
var fehlertext = “Die folgenden Pflichtfelder wurden nicht vollständig ausgefüllt:\n”;
fehlertext += fehler;
alert(fehlertext);
return false;
}
return true;
}
//–></script>
Nun muss die Javascript-Abfrage nur noch an das Formular übergeben werden.
Dazu gehen wir noch mal an den Anfang unseres Formulars wo steht:
<form method="post" action="">
hier hängen wir jetzt noch folgendes an:
<form method="post" action="" onsubmit="return pruefen()">
Wir haben in unserem Javascript der Abfrage den Namen “pruefen” gegeben. Somit wird nun bei senden des Formulars das Javascript ausgeführt.
Komplett würde das dann also so aussehen:
<html>
<head>
<script type=”text/javascript”><!–
function pruefen(){
var f = document.forms[0];
var fehler = “”;
if (f.Job.value == “”) {
fehler += “Job\n”;
}
if (fehler != “”) {
var fehlertext = “Die folgenden Pflichtfelder wurden nicht vollständig ausgefüllt:\n”;
fehlertext += fehler;
alert(fehlertext);
return false;
}
return true;
}
//–></script>
</head>
<body>
<form method=”post” action=”" onsubmit=”return pruefen()”>
<input name=”Job” type=”text” />
<input type=”submit” name=”senden” value=”weiter” />
</form>
</body>
</html>
Wenn nun mehrere Felder abgefragt werden sollen, müssen wir uns im Prinzip nur noch diesen “Baustein” merken:
if (f.Job.value == "") {
fehler += “Job\n”;
}
Das „Job“ ersetzen wir, wie bereits erwähnt, einfach durch den Namen des Inputfeldes.
So können beliebig viele Felder hintereinander abgefragt werden.
Nun wissen wir zwar, wie man normale Inputfelder abfragt, doch was ist mit der Checkbox, dem Radio-Button und der Auswahlliste?
Radio-Button und Checkboxen abfragen:
<input type="Checkbox" name="Auto" value="pkw" />
<input type=”Checkbox” name=”Auto” value=”mofa” />
So sieht der normale Aufbau des Formulars bei Checkboxen aus. Hier Fragen wir ab, welche Fahrzeuge zur Verfügung stehen.
<input type="Radio" name="Auto" value="Ja" />
<input type=”Radio” name=”Auto” value=”Nein” />
So sieht der normale Aufbau des Formulars bei Radio-Button aus.
Die Abfrage ob eine Checkbox oder ein Radio-Button angeklickt wurde ist identisch.
Daher gilt der Javascript Codeschnipsel in dem Fall für beides:
if (!(f.Auto[0].checked || f.Auto[1].checked))
{
fehler += “Auto\n”;
}
Haben wir jetzt mehr als 2 Checkboxen bzw. Radio-Button, so fügen wir hinter das letzte checked, ein weiteres f.Auto[2].checked ein. Wichtig ist, dass es durch || getrennt wird.
Eine Abfrage von 4 Checkboxen / Radiobutton würde dann also so aussehen:
if (!(f.Auto[0].checked || f.Auto[1].checked || f.Auto[2].checked || f.Auto[3].checked))
{
fehler += “Auto\n”;
}
Die Nummern in der eckigen Klammer spielen dabei eine wichtige Rolle.
Mit der 0 wird die erste Box abgefragt, mit der 1 die 2. usw. Möchten wir nun, dass die Checkbox 3 nicht abgefragt wird, so lassen wir f.Auto[2].checked weg und machen stattdessen mit f.Auto[3].checked , also der 4. Checkbox, weiter.
Select-Listen abfragen:
Bei Select-Listen gilt der selbe Befehle wie bei den Checkboxen und Radio-Button mit dem Unterschied, dass hier nicht nach checked, sondern nach selected gefragt wird.
Eine gültige Abfrage würde dann also so aussehen:
if (!(f.Auto[1].selected || f.Auto[2].selected))
{
fehler += “Auto\n”;
}
Hierbei fällt auf, dass wir nicht wie bei den Checkboxen mit der [0] beginnen, sondern in den meissten Fällen mit der [1].
Wenn wir uns den Aufbau einer Select-Liste anschauen, wissen wir auch wieso.
<select name="Automarke">
<option>——Bitte wählen——</option>
<option value=”bmw”>bmw</option>
<option value=”vw”>vw</option>
</select>
Normalerweise nennt man die erste Option bei Select-Listen z.B. „Bitte wählen“.
Würden wir jetzt mit der [0] beginnen, würde unsere Javascript-Abfrage die erste Option, also das „Bitte wählen“ als gültig anerkennen und der Benutzer bekäme keinen Hinweis, dass unser Formular nicht ordnungsgemäß ausgefüllt wurde. Gibt es keine Option wie „Bitte wählen“, fangen wir ganz normal wie bei Checkboxen und Radio-Button mit der [0] an.
Hier noch mal alle Abfragen (formatiert) zusammengefasst:
<html>
<head>
<script type=”text/javascript”><!–
function pruefen(){
var f = document.forms[0];
var fehler = “”;
if (f.Job.value == “”) {
fehler += “Job\n”;
}
if (!(f.Auto[0].checked || f.Auto[1].checked || f.Auto[2].checked || f.Auto[3].checked))
{
fehler += “Auto\n”;
}
if (!(f.Automarke[1].selected || f.Automarke [2].selected))
{
fehler += “Automarke\n”;
}
if (fehler != “”) {
var fehlertext = “Die folgenden Pflichtfelder wurden nicht vollständig ausgefüllt:\n”;
fehlertext += fehler;
alert(fehlertext);
return false;
}
return true;
}
//–></script>
</head>
<body>
<form method=”post” action=”" onsubmit=”return pruefen()”>
Was machen Sie beruflich?<br />
<input name=”Job” type=”text” />
<br /><br />
Welche Fahrzeuge besitzen Sie?<br />
<input type=”Checkbox” name=”Auto” value=”pkw” /> Pkw <br />
<input type=”Checkbox” name=”Auto” value=”mofa” /> Mofa <br />
<input type=”Checkbox” name=”Auto” value=”bus” /> Bus <br />
<input type=”Checkbox” name=”Auto” value=”traktor” /> Traktor
<br /><br />
Welche Automarke fahren Sie?<br />
<select name=”Automarke”>
<option>——Bitte wählen——</option>
<option value=”bmw”>bmw</option>
<option value=”vw”>vw</option>
</select>
<br /><br />
<input type=”submit” name=”senden” value=”Senden” />
</form>
</body>
</html>
Jetzt kennen wir die Grundlagen für einfache Abfragen einer Select-List, Checkbox, Radio-Button sowie Input-Feld.
Erweiterte Abfragen:
Nun gehen wir noch etwas ins Detail.
Angenommen wir haben ein Inputfeld wo z.B. bei einem Kredit nach dem Auszahlungsbetrag gefragt wird. Jetzt möchten wir aber, dass der Benutzer nicht jeden x-beliebigen Betrag eingeben kann sondern eine Summe von mindestens 1.000,- EUR und maximal 100.000,- EUR eingeben muss.
Unser Codeschnipsel für die Javascript-Abfrage würde dann so aussehen:
if(f.Auszahlungsbetrag.value<=999 || f. Auszahlungsbetrag.value>=100001)
{
fehler += “Auszahlungsbetrag: min. 1.000,- EUR – max. 100.000,-EUR \n”;
}
Es wird also geprüft, ob der eingegebene Wert größer als 999 und kleiner als 100001 ist.
Bei einem Wert unter 1.000 und über 100.000 würde somit eine Fehlermeldung erscheinen.
Als nächstes Kombinieren wir ein Radio-Button mit einem Input-Feld.
Beispiel:
Haben Sie eine Homepage?<br />
<input type=”Radio” name=” Homepage ” value=”Ja” /> Ja
<input type=”Radio” name=” Homepage ” value=”Nein” /> Nein
<br /><br />
Url<br />
<input name=”Url” type=”text” />
Wenn der Radio-Button Homepage mit „Ja“ aktiviert wurde, soll die Abfrage nach der Url kommen. Hat der Benutzer allerdings „Nein“ ausgewählt, so soll keine weitere Abfrage stattfinden.
Der dazugehörige Javascript-Codeschnipsel:
if (!(f.Homepage[0].checked || f.Homepage[1].checked))
{
fehler += “Homepage\n”;
}
if(f.Homepage[0].checked&&(f.Url.value) == false)
{
fehler += “Url Ihrer Homepage\n”;
}
In der ersten Abfrage prüfen wir, ob ein Radio-Button ausgewählt ist.
In der 2. prüfen wir nun, ob der 1. Radio-Button „Homepage: Ja“ ausgewählt wurde und wenn Ja, wird zusätzlich geprüft, ob eine Url im nachfolgenden Input-Feld eingetragen ist.
Wenn der 2. Radio-Button ausgewählt wurde, fällt die Abfrage nach der Url weg.
Um das Url Input-Feld auszublenden bzw. nur einzublenden wenn der Radio-Button „Ja“ ausgewählt ist, können wir dem ganzen mit ein wenig CSS noch ein display block und display none zuweisen.
<input type="Radio" name=" Homepage " value="Ja" onclick="document.getElementById(' Url ').style.display = 'block'"> Ja
<input type=”Radio” name=” Homepage ” value=”Nein” onclick=”document.getElementById(‘ Url ‘).style.display = ‘none’”> Nein
<div id=”Url” style=”display: none”>Url:<br />
<input name=”Url” type=”text”>
</div>
Die Methode funktioniert nicht nur mit Radio-Button, sondern auch mit Select-Listen und Checkboxen. Ein weiteres Beispiel hierfür erspare ich mir.
Als letztes möchten wir bei der Auswahl des Radio-Buttons „Ja“ eine andere Seite beim Absenden des Formulars anzeigen, als bei der Auswahl „Nein.
Auch hier ist die Ausführung wieder ganz simple, diesmal allerdings mit php statt Javascript.
<?php
if($_REQUEST['Homepage']==’Ja’){
echo ‘Du hast eine Homepage’;
exit();
}
else
echo ‘Du hast keine Homepage’;
?>
Haben wir „Ja“ ausgewählt, bekommen wir nachdem Absenden die Meldung: „Du hast eine Homepage“, bei „Nein“ tritt Fall 2 ein und es erscheint die Meldung: „Du hast keine Homepage“
In das echo kann ebenfalls html geschrieben werden oder man könnte auch include verwenden und direkt auf eine andere Seite verweisen.
<?php
if($_REQUEST[' Homepage ']==’Ja’){
include ‘http://website-MIT-homepage-weiterleitung’;
exit();
}
else
include ‘ http://website-OHNE-homepage-weiterleitung ‘;
?>
Mehrseitiges Formular
Wie übertragen wir jetzt die Daten von Formular 1 zu Formular 2 usw.?
Dieser Codeschnipsel hilft uns dabei und gehört bei jedem Formular nach ganz oben:
<?php
function dyn_form()
{
global $HTTP_POST_VARS, $HTTP_GET_VARS;
if (isset($HTTP_POST_VARS)) {
//bei POST
foreach ($HTTP_POST_VARS as $key => $elem) {
echo “<input type=\”hidden\” name=\”$key\” value=\”$elem\”>”;
}
}
else {
//bei GET
foreach ($HTTP_GET_VARS as $key => $elem) {
echo “<input type=\”hidden\” name=\”$key\” value=\”$elem\”>”;
}
}
} //end function
?>
Nun müssen wir in unserem Quelltext noch zur Stelle springen wo der Absende-Button ist und fügen vor diesem folgendes ein, um das Script auszuführen:
<?php dyn_form(); ?>
danach normal weiter mit <input type="submit" name="senden" value="Absenden" />
Dem Formular muss dann die Endung .php statt .html gegeben werden.
Sind wir nun durch mit unseren Formularen, sodass wir es mit allen Daten an unsere Email senden können, benötigen wir noch ein letztes Script, welches ihr euch hier ansehen könnt.
Ich hoffe dem einen oder anderen konnten wir das stundenlange Googlen erspraren.
Related posts:
Tags: Abfragen, Checkbox, CSS, formmailer, Formular, HTML, Javascript, mehrseitiges Formular, PHP, prüfen, Radio-Button, Selectlisten
Hallo,
ich bin gerade beim Ausprobieren und möchte für die Anfangsphase meinen Blog als Bestellmöglichkeit für mein Buch nutzen.
Ich habe es schon mit den verschiedensten scripten probiert, aber ich weiss nicht, ob sich ein php (welches man anscheinend braucht, damit die Eingabedaten in einer Tabelle gesammelt werden) im Blog unterbringen lässt.
Hast du eine Idee?
lg
Jürgen
Hallo Juergen,
schau dir mal das Script auf http://um-fritz.de/bestellformular_demo an. Das sollte für deine Zwecke genau das richtige sein.