Formulare per Ajax versenden

Mittels Ajax und separatem pageType können relativ simple Fluid-Formulare per Ajax versenden werden. Dabei machen wir uns zu nutze, das der form viewHelper den pageType unterstützt. Wie der pageType für Ajax grundsätzlich eingerichtet wird, habe ich hier beschrieben: Ajax mit pageType

Beispiel eines Formulares:

<f:form action="ajaxform" 
    controller="myController" 
    extensionName="myExtension" 
    pluginName="myplugin"
    name="message"
    method="POST"  
    pageType="99"
    class="jqControll">

    <label for="Name">Name</label>
    <f:form.textfield property="name"  placeholder="Name" />

    <label for="Name">email</label>
    <f:form.textfield property="email"  placeholder="Email" />

    <button type="submit" >absenden</button>

</f:form>
		

Die form-action sieht dann durch den viewHelper im Code so aus:

<form class="jqControll" action="path/to/page/?type=99
&tx_myextension_myplugin[action]=ajaxform
&
tx_myextension_myplugin[controller]=mycontroller
&
name="comment" method="post">

Die Formular Action enthält also alles was wir brauchen um den Controller per Ajax anzusprechen.


Das Formular per jQuery absenden

Die Ajax Funktion in jQuery:

$("form.jqControll").submit(function (event) {
    event.preventDefault();
    var form = $(this);
    var action = form.attr("action"),
          method = form.attr("method"),
          data = form.serialize();

    $.ajax({
        url: action,
        type: method,
        data: data
        }).done(function (data) {
            $('form').remove();
            $('.formresult').html('<p>Vielen Dank für Deinen Kommentar. Dieser wird geprüft und in Kürze freigeschaltet.</p>')
        }).fail(function () {
            $('form').remove();
            $('.formresult').html('<p>Upps, es ist ein Fehler aufgetreten. Dein Kommentar konnte nicht gespeichert werden</p>')
        }).always(function () {
        
        });
});

Die Ajax Parameter url, type und data übernehmen wir direkt aus dem Formular und brauchen diese Werte nicht manuel aufzubauen. Damit kann die Ajax Funktion universell für mehrere Formulare eingesetzt werden.

Innerhalb des Controllers erreichen wir die Werte mit

if($this->request->hasArgument('message')){
    $message = $this->request->getArgument('message');
}

Formularvalidierung

Für die Formularvalidierung gibt es mehrere Möglichkeiten.

Ihr könnt die Eingaben direkt per jQuery validieren. Diese Methode ist zwar nicht 100%ig vor Manipulation sicher, sollte aber in den meisten Fällen genügen.

Die andere Alternative ist es, mit der normalen Extbase Model Validierung zu arbeiten. Ihr müsst dann aber eine eigene error Action schreiben und das Ergebnis im fail Abschnitt der Ajax Funktion auswerten.

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

jQuery: Das Praxisbuch

Ein Arbeitsbuch mit vielen Praxisbeispielen und Hintergrundwissen zu jQuery, jQuery mobile und UI. In einer kurzen Einleitung werden die Basics für Einsteiger erklärt, danach ist das Buch aber für Newbies und Profils gleichermaßen interessant - eine echte Empfehlung für den Alltag.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.