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.