Webdesign-Blog » javascript / php http://www.steinwebdesign.de/webdesign-blog Ein weiteres tolles WordPress-Blog Fri, 16 Dec 2011 09:55:56 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Input Felder mit CSS formatieren / gestalten http://www.steinwebdesign.de/webdesign-blog/2009/12/input-felder-mit-css-formatieren-gestalten/ http://www.steinwebdesign.de/webdesign-blog/2009/12/input-felder-mit-css-formatieren-gestalten/#comments Tue, 08 Dec 2009 18:02:50 +0000 admin http://www.steinwebdesign.de/webdesign-blog/?p=57
  • Mehrseitiges Formular mit Javascript-Abfragen
    • ]]>     Normale Input Felder sehen standardmäßig doch eher bescheiden aus und ein Rahmen (border) oder eine Hintergrundfarbe (background) ändern oftmals nichts an der Tatsache.

    Was jedoch wirkt, sind mit CSS formatierte Hintergrundbilder (background-image).

    Wir nehmen also unsere CSS Datei und formatieren unsere Input-Felder folgendermaßen:

    input {
    background: #fff url(img/input.jpg) no-repeat bottom right;
    width:149px;
    height:19px;
    padding-left:10px;
    padding-top:3px;
    border:none;
    }

    Wichtig dabei ist, dass unserer background-image die Position “bottom right” hat.
    Im IE würde es sonst das Hintergrundbild bei einer längeren Eingabe erst verschieben und dann ganz verschwinden lassen.
    Ein wenig padding sorgt dafür, dass der eingegebene Text nicht ganz vorne beginnt.

    Wenn nicht alle Input Felder formatiert werden sollen dann müsste statt dem “input” in der CSS eine Klasse formatiert und im Formular dann jeweils zugeordnet werden.

    Also z.B.:

    .input-feld {
    background: #fff url(img/input.jpg) no-repeat bottom right;
    width:149px;
    height:19px;
    padding-left:10px;
    padding-top:3px;
    border:none;
    }

    und im Formular dann:

    <input name=”name” type=”text” />

    Als nächstes möchten wir den Benutzer bei einer Falscheingabe im Formular mit einem wechselnden background-image darauf hinweisen, wo er einen Fehler gemacht hat und ggf. auch jene Input Felder markieren, wo die Eingabe bis dato korrekt ist.
    Hierfür benötigen wir nun folgenden Javascript Codesnipsel, der im <head> Bereich eingefügt wird:

    <script type=”text/javascript”>

    function checkForm()
    {
    var error = new Array();
    if(document.data.name.value == “”)
    {
    document.data.name.focus();
    document.data.name.style.background = “url(img/input-error.jpg) no-repeat bottom right”;
    error[0] = 1;
    }
    else
    {
    document.data.name.style.background = “url(img/input-ok.jpg) no-repeat bottom right”;
    }

    if(document.data.ort.value == “”)
    {
    document.data.ort.focus();
    document.data.ort.style.background = “url(img/input-error.jpg) no-repeat bottom right”;
    error[0] = 1;
    }
    else
    {
    document.data.ort.style.background = “url(img/input-ok.jpg) no-repeat bottom right”;
    }

    for (i=0; i <= 8; i++)
    {
    if (error[i] == 1)
    {
    alert(“Bitte korrigieren/vervollstaenidgen Sie die Daten in den ROT markierten Feldern!”);
    return false;
    }
    }
    }

    </script>

    Wenn das Input Feld “name” nicht eingetragen wurde, dann wird jetzt anstatt das in der CSS angegebene background-image “input.jpg” unser neues mit dem Namen “input-error.jpg” geladen und zusätzlich ein Popup mit dem Hinweis, dass die Rot markierten Felder fehlerhaft sind. Das selbe Prinzip passiert mit dem Input Feld “ort”, nur das dort statt dem “input-error.jpg” das “input-ok.jpg” geladen wird, da wir hier eine Eingabe gemacht haben.

    Eine Demo gibt es dazu hier.

    Related posts:

    1. Mehrseitiges Formular mit Javascript-Abfragen

    ]]>     http://www.steinwebdesign.de/webdesign-blog/2009/12/input-felder-mit-css-formatieren-gestalten/feed/ 1     Mehrseitiges Formular mit Javascript-Abfragen http://www.steinwebdesign.de/webdesign-blog/2009/10/mehrseitiges-formular-mit-javascript-abfragen/ http://www.steinwebdesign.de/webdesign-blog/2009/10/mehrseitiges-formular-mit-javascript-abfragen/#comments Sat, 03 Oct 2009 15:52:58 +0000 admin http://www.steinwebdesign.de/webdesign-blog/?p=21
  • Input Felder mit CSS formatieren / gestalten
    • ]]>     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:

    1. Input Felder mit CSS formatieren / gestalten

    ]]>     http://www.steinwebdesign.de/webdesign-blog/2009/10/mehrseitiges-formular-mit-javascript-abfragen/feed/ 2