Bestätigung (Alert) nach Submit von Formular

[Mr. Black]

Hallo,
Ich sitze hier gerade an einem Web-Projekt und habe ein paar Fragen. Zwar funktioniert alles, die Lösung ist aber nicht sehr elegant.
Ich möchte, dass wenn man im Kontaktformular auf "Submit" (bzw. Senden) klickt, dass die PHP-Datei das alles schön bearbeitet und den Besucher dann auf die Kontakt-Seite zurückleitet, allerdings mit einer grünen Meldung, dass die Nachricht geschickt wurde (In der Art Bootstrap).
Im Moment wird man auf eine andere HTML-Datei geleitet, mit gleichem Design, nur eben statt Formular steht dort die Bestätigung.

Außerdem finde ich die Fehler-Ausgabe der PHP-Datei (...Ja... ich habe die von einem Kontaktformular-Generator, da PHP bei mir nicht ist ) nicht besonders schön (einfach leere weiße Seite mit der Aufforderung, eine korrekte E-Mail Adresse einzugeben oder so). Könnte man das auch noch irgendwie schöner regeln?

Lg

 

[blackst0rm]

Mit PHP wirst du dabei nicht weit kommen. So was realisiert man in JavaScript. Da brauchst du nur ne Funktion an das onsubmit event des Formulars binden und da die Aktionen durchführen.

 

[Mr. Black]

Ok... Entschuldigung, dass ich jetzt so blöd frage, aber könntest du mir vielleicht mal ein Beispiel so einer Funktion posten oder den Link? Ich durchforste schon lange das Netz, aber habe bis jetzt noch keine wirkliche Lösung gefunden...
Aber schonmal Danke

 

[Rossie]

Mit PHP wirst du dabei nicht weit kommen. So was realisiert man in JavaScript. Da brauchst du nur ne Funktion an das onsubmit event des Formulars binden und da die Aktionen durchführen.

Das lässt sich sehr wohl mit PHP umsetzen. Ich persönlich würde ich es sowohl mit JavaScript, als mit PHP implementieren, um JavaScript nicht zu erzwingen. Man leitet einfach nicht auf eine neue Seite um, sondern zeigt das Formular wieder an und lässt dieses eben die jeweilige Meldung anzeigen. Ohne Programmierkenntnisse vorauszusetzen, es das natürlich etwas schwierig zu erklären.

 

[Umbel]

Such mal nach dem Stichwort "Affenformular" ... und als weiterer Hinweis man kann nicht nur im Fehlerfall über dieses "Verfahren" eine Meldung generieren

 

[Mr. Black]

Also ich verstehe zwar das Prinzip und die Logik hinter dem Affenformular... Genau das meinte ich! Ich habe mal "meine" PHP-Datei einfach in die Kontakt-Datei integriert, die Fehlermeldungen sind jetzt auch so schon aktzeptabel... In der PHP-Datei ist das die Error-Funktion:

    function __construct()
    {
        $this->error_messages = array(
            'required' => 'Bitte füllen Sie das Feld aus.',
            'email' => 'Bitte geben Sie eine korrekte E-Mail-Adresse an.',
            'number' => 'Bitte geben Sie einen numerischen Wert an.',
            'url' => 'Bitte geben Sie eine korrekte URL an.',
            'pattern' => 'Bitte korrigieren Sie diesen Wert.',
            'min' => 'Bitte geben Sie einen Wert ein, der höher als das Minimum ist.',
            'max' => 'Bitte geben Sie einen Wert ein, der niedriger als das Maximum ist.'
        );

        $this->field_rules = array();
        $this->error_list = '';
        $this->fields = $_POST;
        $this->is_xhr = $this->xhr();
    }

Ich habe alle diese Sätze schonmal auf deutsch übersetzt (auch wenn ich nur 2 von denen bracuhe ) aber ich hätte eben gerne ein kleines Fensterchen oder so.... In HTML kann man ja einen Bootstrap-alert so erstellen:

<div class="alert alert-error">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Error!</strong> A problem has been occurred while submitting your data.
</div>

Als Beispiel.... Soetwas hätte ich gerne als Ausgabe! (Sorry, mit PHP kenn ich mich garnicht aus, ich kann es nur nachvollziehen, wenn es jemand gemacht hat )

Ergänzung (13. Mai 2014)

Kann man dem Action-Tag in einer Form-Gruppe auch sagen, wo er hin scrollen soll? Also, da die komplette Homepage nur aus einer PHP-Datei besteht, habe ich ja dieses Scroll-System (Mit sections und dann immer domain.de/index.php#kontakt). Leider, wenn man auf senden klickt und die Datei daraufhin neu geladen wird mit neuen Informationen, steht man immer wieder ganz oben... Irgendeine Lösung?

 

[Rossie]

Mittels JavaScript kann man jedes gewünschte Element fokussieren/ dahin scrollen. Wenn JavaScript deaktiviert ist, nutze ich das HTML 5 "autofocus" Attribute, um das erste fehlerhafte Feld ins Blickfeld zu bringen.

 

[[ChAoZ]]

Sobald der User das Formular abgeschickt hast kommt PHP ins Spiel.
PHP validiert (?) und bearbeitet die User-Eingaben (keine Ahnung was!), dann wird Umgeleitet.

1) Leite wieder auf das Kontakt - Formular um statt auf eine Bestätigungsseite
2) Sofern die User-Eingaben korrekt waren und dem User Feedback in Form eines Bootstrap-Alerts ausgeben willst setze ein Flag in der Session o.ä.

$_SESSION['formValid'] = true || false

und werte diesen Flag in der Kontakt Seite aus

<? if (isset($_SESSION['formValid']) && $_SESSION['formValid']): ?>
<div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Supi!</strong> Ihre Daten wurden gespeichert.
</div>
<? endif ?>

Fürs Scrollen gibt es die scrollTo() Funktion in JavaScript.

 

[Mr. Black]

Gut, das Scrollen geht jetzt. Man merkt garnicht, dass die Seite zwischendurch neugeladen wird
@[ChAoZ] Wie genau soll ich das machen, d.h. wo soll der Flag sein?

 

[[ChAoZ]]

Naja du setzt diesen Flag beim erfolgreichen Eintragen in die DB.
Nach der Umleitung auf die Kontakt Seite ließt du diesen aus.
- Ist dieser nicht vorhanden oder FALSE = Fehlermeldung
- Ist dieser vorhanden und TRUE = Erfolgsmeldung

Dieser Flag wird in die Session geschrieben, wie alles andere auch...

$_SESSION['formValid'] = true;

 

[Mr. Black]

Ok... hab ich jetzt so gemacht. Aber: Jetzt erscheint immer der Alert, mit, in dem Fall, dem Beispieltext "Supi! Ihre Daten wurden gespeichert."
Also auch wenn man die Seite gerade frisch lädt oder auch gerade Fehler gemacht hat....

 

[Daaron]

Mit PHP wirst du dabei nicht weit kommen. So was realisiert man in JavaScript. Da brauchst du nur ne Funktion an das onsubmit event des Formulars binden und da die Aktionen durchführen.

Wirkliche Validierung MUSS immer auf Server-Ebene (also hier PHP) erfolgen, niemals auf Basis von HTML5 oder JS...

Übrigens: Da die Anzahl der Nicht-HTML5-Browser immer weiter absackt würd ich gar keine JS-Validierung mehr einbauen, sondern nur HTML5-Validierung. http://www.the-art-of-web.com/html/html5-form-validation/
Wer keinen HTML5-Browser hat, hat dann halt nur die PHP-Validierung.

Ok... hab ich jetzt so gemacht. Aber: Jetzt erscheint immer der Alert, mit, in dem Fall, dem Beispieltext "Supi! Ihre Daten wurden gespeichert."
Also auch wenn man die Seite gerade frisch lädt oder auch gerade Fehler gemacht hat....

Weil du:
a) nicht einmal geprüft hast, ob überhaupt Daten übertragen wurden
b) du die Session-Variable nicht bereinigt hast, nachdem du sie einmalig verwendet hast.


P.S.: Das ist wieder mal alles ein typischer Fall von: Verwende doch einfach ein anständiges CMS...

 

[Mr. Black]

Also jetzt ists so:

<?php
                $_SESSION['formValid'] = true || false;
[........]

?>

<?php if (isset($_SESSION['formValid']) && $_SESSION['formValid']): ?>
<div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Supi!</strong> Ihre Daten wurden gespeichert.
</div>
<?php endif  ?>

Ergänzung (13. Mai 2014)

Ähhh.... Ich komm nicht weiter
@Daaron
Zu dem Punkt HTML-Validierung: Ich habe, wie in dem Artikel beschrieben, in den Form-Feldern bereits required eingestellt. Aber mein Programm (Scriptly) will nach required noch einen Wert haben. Zur Auswahl steht mir auch nur "required". Also <input [...] required="required"> Ist das denn so schon korrekt?

Zu deinen anderen Lösungsvorschlägen:
Ich habe keinen Schimmer, wie ich das Umsetzen soll... Kannst du mir etwas auf die Sprünge helfen, bzw. in meinem Code-SChnipsel die richtigen Sachen einfügen?

Ergänzung (13. Mai 2014)

Es läuft jetzt!!!
Warum einfach, wenns auch kompliziert geht?
Falls jemand, der so dumm ist wie ich, dieses Thema verfolgt dann hier meine Lösung:

function __construct()
    {
        $this->error_messages = array(
            'required' => 'Bitte füllen Sie das Feld aus.',
            'email' => 'Bitte geben Sie eine korrekte E-Mail-Adresse an.',
            'number' => 'Bitte geben Sie einen numerischen Wert an.',
            'url' => 'Bitte geben Sie eine korrekte URL an.',
            'pattern' => 'Bitte korrigieren Sie diesen Wert.',
            'min' => 'Bitte geben Sie einen Wert ein, der höher als das Minimum ist.',
            'max' => 'Bitte geben Sie einen Wert ein, der niedriger als das Maximum ist.'
        );
 
        $this->field_rules = array();
        $this->error_list = '';
        $this->fields = $_POST;
        $this->is_xhr = $this->xhr();
    }

Einfach die Strings (?), also die übersetzten Sätze mit dem <div> vom alert ersetzen

->

function __construct()
    {
        $this->error_messages = array(
            'required' => 'Bitte füllen Sie das Feld aus.',
            'email' => '<div class="alert alert-danger">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                            <strong>Fehler!</strong> Die von Ihnen angegebene Email-Adresse ist nicht korrekt!
                            </div>',
            'number' => 'Bitte geben Sie einen numerischen Wert an.',
            'url' => 'Bitte geben Sie eine korrekte URL an.',
            'pattern' => 'Bitte korrigieren Sie diesen Wert.',
            'min' => 'Bitte geben Sie einen Wert ein, der h&ouml;her als das Minimum ist.',
            'max' => 'Bitte geben Sie einen Wert ein, der niedriger als das Maximum ist.'
        );
 
        $this->field_rules = array();
        $this->error_list = '';
        $this->fields = $_POST;
        $this->is_xhr = $this->xhr();
    }

Klappt wunderbar Und wenn man bei der Success-Meldung auf Schließen klickt verschwindet das gesamte Formular. D.h. man hat die Website dann ohne Formular, da man ja schon geschrieben hat.

Diese Lösung mag nicht die eleganteste sein, aber doch die simpelste. Sie ist so simpel, dass ich da zunächst garnicht drauf gekommen bin

 

[Daaron]

<?php
                $_SESSION['formValid'] = true || false;

Das ist ziemlich unsinnig...

Aber mein Programm (Scriptly) will nach required noch einen Wert haben. Zur Auswahl steht mir auch nur "required". Also <input [...] required="required"> Ist das denn so schon korrekt?

Je nachdem, ob man HTML- oder XHTML-konform arbeiten will. HTML5 beschwert sich nicht über ="required", XHTML hingegen über die Abwesenheit des Wertes. Man könnt da genauso gut auch required="true" schreiben. HTML5 ist das Banane.

 

[[ChAoZ]]

Also jetzt ists so:

$_SESSION['formValid'] = true || false;

Sorry aber hier musste ich schon etwas schmunzeln^^