Formular: Unbegrenzte Formularfelder per Klick hinzufügen (via Ajax oder jQuery)

[minstyle]

Hallo zusammen,

ist es mit Contao möglich, unbegrenzt viele Formularfelder im Frontend der Website per Klick hinzuzufügen?

Beispiel:

Unbenannt-1.gif

Bei Klick auf den Button "weitere Teilnehmer hinzufügen" sollen wieder die Eingabefelder "Abteilung, Anrede, Vorname etc." erstellt werden.

[WebRoxx]

Nicht mit dem Standart und auch für das FE ist mir keine Erweiterung bekannt. Suche selber noch sowas
.
Wäre wirklich eine sinnvolle Erweiterung.

[Exzentrik]

Also ich kenne jetzt nicht eure genauen Anforderungen, aber das ist doch an sich nicht so kompliziert...
Das ganze wäre ja sowieso nur per JavaScript machbar, also kann man doch auch die Formfelder per JS abändern.
Ich hab das gerade mal mit jQuery-Code ausprobiert und es funktioinert recht gut.

Einfaches Beispiel:
Form mit einem Button, Textfeld und Absendebutton im Formulargenerator erstellt.
Dann dieses Script ins Layout eingebunden:

<script>
$(document).ready(function() {
    var table         = $("#formID .formbody table"); //Formular Tabelle
    var add_button      = $(".add_field_button"); //Button zum hinzufügen im Formular
   
    var x = 0;
    $('input[name="text"]').attr('name','text[]'); //macht aus dem Textfeld ein Textfeld-Array
    $(add_button).click(function(e){
        e.preventDefault();
        x++;
        $(table).append('<tr><td><label>Nachricht '+x+':</label></td><td><input type="text" name="text[]"></td></tr>'); //fügt weiteres Textfeld hinzu
    });
});
</script>

Ich hab das jetzt mit Mailversand getestet, und die enthielt auch die Daten aus allen hinzugefügten Formularfeldern, mit Kommatrennung.

Das hat jetzt natürlich noch Schönheitsfehler. Die neuen Felder werden z.B. unter dem Submitbutton hinzugefügt.
Aber da muss man halt den Platz im JS ein wenig spezifizieren. Also prinzipiell geht das...

Und wenn jemand kein JavaScript an hat, Kann das Formular immernoch mit dem einen Voreingestellten Textfeld versendet werden.

[WebRoxx]

Aber contao verarbeitet doch nur Felder die auch im System registriert sind ?

Was ist mit Validierung etc?

[cliffparnitzky]

Ja, ist halt alles etwas zu kurz gedacht.

Dann braucht man meist ja auch mehr als ein Textfeld pro "Zeile" ... ggf. sogar noch ein Select (welches die Werte aus der DB ließt) ... und dann will man in der Verarbeitung (E-Mail, Speichern, etc.) alle Werte aus Spalte 2 zusammenfassen ... aber eigentlich darf in Spalte 2 jeder Wert nur 1 Mal gewählt sein .... dann wir ein Button benötigt, der eine "Zeile" löscht, natürlich willkürlich mittendrin .... und so weiter und sofort ...

Ist nämlich doch alles etwas komplizierter ... das kann man nicht einfach so mal mit JavaScript hinwurschteln!

[Exzentrik]

Aber contao verarbeitet doch nur Felder die auch im System registriert sind ?

Was ist mit Validierung etc?

Also bei dem konkreten Beispiel, das ich gezeigt habe, ist das kein Problem.
Contao prüft dabei, ob das Feld in der DB vorhanden ist. Und das ist es.
Ich ändere per Script ja nur, ob das Value ein String oder Array ist. Damit hat Contao kein Problem. Wird ein Array übergeben, macht Contao beim Verarbeiten ein implode und die E-Mail (wenn das per Mail verschickt werden soll) enthält alle Werte, per Komma getrennt.
Wie in meinem Post geschrieben: Ich habe das tatsächlich in meiner Contao-Installation ausprobiert. Das funktioiert.

Für die etwas komplexere Variante im ursprungspost geht das dann natürlich genauso, solange man beim Auswerten keine allzu hohen Ansprüche hat.

Alternativ kann man die Felder im Formulargenerator z.B. auch direkt als Arrays anlegen. Dann heißt das Feld für die Anrede des Teilnehmers (wie im Bild von Post 1) halt nicht "anrede" sondern "teilnehmer[0][anrede]".
Per Buttonclick wird dann der gesamte Block kopiert und darin heißt das Feld dann "teilnehmer[1][anrede]".
Dadurch wird dann allerdings ein mehrdimensionales Array für die Post-Daten erzeugt, was Contaos Formularverarbeitung nicht berücksichtigt. Ist aber erstmal auch kein Problem.

Entweder auf der Weiterleitungsseite ein eigenes Script, das die Daten in die DB schreibt.
Oder, wenn die per Mail verschickt werden sollen, einen eigenen prepareFormData Hook, der das Mehrdimensionale Array implodiert.
Beides jetzt nicht soooooo kompliziert.

*EDIT*

Dann braucht man meist ja auch mehr als ein Textfeld pro "Zeile" ... ggf. sogar noch ein Select (welches die Werte aus der DB ließt) ... und dann will man in der Verarbeitung (E-Mail, Speichern, etc.) alle Werte aus Spalte 2 zusammenfassen ... aber eigentlich darf in Spalte 2 jeder Wert nur 1 Mal gewählt sein .... dann wir ein Button benötigt, der eine "Zeile" löscht, natürlich willkürlich mittendrin .... und so weiter und sofort ...

Natürlich gibt es auch Formulare, die dann super kompliziert und mit Abhängigkeiten und Konditionen versehen sind.
Klar... was ich geschrieben habe funktioniert natürlich nur dann, wenn man keinerlei Berührungsängste mit JavaScript und/oder PHP hat. Aber ich kann mir ehrlich gesagt nicht vorstellen, dass es eine Erweiterung geben wird, die derart komplizierte Formulare ermöglicht.
War auch eher als Denkanstoß gedacht.

[WebRoxx]

Was passiert aber bei deinen Script wenn der Wert nicht valide ist ? Sind dann alle Hinzugefügeten Felder weg? Werden diese Einzeln geprüft? Ich meine klar geht das aber das wäre für mich keine usability lösung

Ist aber nur meine Meinung und sowas würde ich daher nie live einsetzen.