Dynamische Eingabefeldern mit TYPO3 Formhandler

In meinem heutigen Beitrag geht es darum die Anzahl der Eingabefelder dynamisch ohne einen Seiten Reload verändern zu können. Das kann z.B. gewünscht sein, wenn man einen beliebige Anzahl an Ansprechpersonen in einem Kontaktformular verwenden möchte.

Beliebig ist dabei relativ. Es muss ein Maximum festgelegt werden, da im Mail Template jedes Feld einzeln angesprochen werden muss. Ebenso muss für den Fall, dass Validierungsfehler auftreten für jedes mögliche Feld die Prüfung erfolgen ob das Feld vorher gefüllt war oder nicht. Die Code Beispiele sind nicht vollständig, sondern dienen nur als exemplarisches Beispiel.

Template

Das folgende Vorgehen ist ein mögliches. Ein Formularfeld wird mittels Javascript dupliziert. Das Feld muss dafür bereits ein Array sein.

Folgendes HTML und Javascript könnte zum Einsatz kommen:

<div class="contact-person">
    <input type="text" name="contact[name][]" id="name"/>
    <a class="add-name" href="#">Weiterer Name</a>
</div>
<script>
$(function($){
    $(document).ready(function() {
        var nameField = $('#name');
    });
    function add_name () {
 
        var ref = $(nameField).clone();
        ref.appendTo('.contact-person');
        return false;
    }
    $('.add-name').click(add_name);
})(jQuery);
</script>

Wir haben ein Eingabefeld und eine Javascript Funktion welche das Feld bei Bedarf dupliziert. Ich habe nur das absolute Minimum an Funktion vorgesehen. Es muss auf jeden Fall noch die Prüfung für ein Maximum eingebaut werden.

Sofern die eingegebenen Personen Daten nicht separat ausgewertet werden sollen reicht es aus im Mail Template einfach den Marker ###value_name### zu verwenden. Die eingegebenen bzw. erstellten Felder werden einfach Komma separiert aneinander gereiht ausgegeben.

Etwas komplizierter wird es wenn wir die Felder einzeln ausgeben wollen. Ich würde empfehlen für jedes Feld vor der Ausgabe im Mail Template eine Prüfung zu machen ob dieses Feld überhaupt gesetzt ist. Das folgende Template würde sich dann ergeben:

<!-- ###ISSET_name|0### -->
###value_name|0###
<!-- ###ISSET_name|0### -->
 
<!-- ###ISSET_name|1### -->
###value_name|1###
<!-- ###ISSET_name|1### -->

mit der Zeichenfolge |0 bzw. |1 greifen wir auf den entsprechenden Index des Arrays zu. Aus dem erweiterten Template ergibt sich auch die Notwendigkeit, dass wir eine maximale Anzahl an Feldern erlauben. Wir müssen im Template für jedes erlaubte Feld die Prüfung einbauen.

Das Template für das Formular muss entsprechend auch geändert werden, da ansonsten die ausgefüllten Felder nicht erneut gesetzt werden können.
Wir wollen nur die Felder anzeigen, die vorher auch vorhanden waren. außerdem soll der vorher eingegebene Wert wieder gesetzt werden. Dies funktioniert wieder mit der Prüfung die auch im Mail Template genutzt wurde. Das folgende Template ergibt sich:

<div class="contact-person">
    <input type="text" name="contact[name][]" id="name"/>
    <a class="add-name" href="#">Weiterer Name</a>
    <!-- ###ISSET_name|1### -->
    <input type="text" name="contact[name][]" value="###value_name|1###"/>
    <!-- ###ISSET_name|1### -->
</div>

In der Art muss für die mögliche Anzahl an Feldern das Template erstellt werden.

5 Antworten auf „Dynamische Eingabefeldern mit TYPO3 Formhandler“

  1. Hallo Stephan,
    vielen Dank für den prima Artikel über das dynamische Hinzufügen von Formularfeldern. Leider gelingt mir der Nachbau nur zum Teil. Das Hinzufügen weiterer Felder über einen Button funktioniert einwandfrei, allerdings werden anschließend die Formulardaten nicht komplet verwertet bzw. die Daten werden durch das jeweils letzte Feld überschrieben, sodass letztlich nur der Inhalt des letzten Feldes verarbeitet wird.
    Wie beschrieben verwende ich im Template die Überprüfung mit <!– ###ISSET_bezeichner|1### –>
    Auch die Klammer [ ] für das Array ist richtig gesetzt.
    Wo könnte der Fehler liegen?
    LG, Angelika

  2. Hallo Angelika,

    werden die HTML Felder denn korrekt hinzugefügt? Was wird an Daten übertragen? Eine Ferndiagnose ohne genauere Fehlerbeschreibung ist leider etwas schwierig.

    Viele Grüße
    Stephan

  3. Hallo Stephan,
    die HMTL Felder werden hinzugefügt, das Javascript funktioniert problemlos. Beim Abschicken werden jedoch nicht alle neu gesetzten Felder ausgelesen bzw. der Inhalt des letzten Formularfeldes überschreibt alle weiteren Inhalte.
    Der Formular-Code sieht in etwas so aus:
    HTML-Datei:




    admin-Mail:

    ###master_email-line-plain_weiteresfeld|0###


    ###master_email-line-plain_weiteresfeld|1###


    user-Mail: wie admin-Mail

    Ausgegeben wird im Debug-Modus des Formhandlers:
    The current GET/POST params are:

    weiteresfeld 0|Beispieltext

    Es wird nur das Feld mit der Zeichenfolge |0 ausgelesen und übertragen. Die Arrays |1, |2 etc. werden nicht ausgelesen.
    Ich hoffe, ich habe mich verständlicher ausgedrückt.
    Grüße, Angelika

  4. Hallo Angelika,

    schick mir doch das HTML, das raus generiert wird einmal per E-Mail. Dann schaue ich mir das noch mal an.

    Viele Grüße
    Stephan

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.