Formularelemente dynamisch erweitern und mit dem TYPO3 Formhandler versenden

Formularelemente sollen vom User dynamisch erweitert, ausgefüllt und verschickt werden können. Als Basis dient das TYPO3 Plugin „Formhandler“ und wie immer jQuery.

Demo

Zunächst erstellen wir ein einfaches Formular mit den entsprechenden Formhandler Makern, z.B. so:

<fieldset>
  <div class="form-group">
    <label for="name">Vorname, Name</label>
    <input type="text" maxlength="100" name="formhandler[name]" placeholder="Vorname, Name" id="name" class="form-control" value="###value_name###">
  </div>
    <label for="strasse">Straße, Hausnummer</label>
    <input type="text" maxlength="100" name="formhandler[strasse]" placeholder="Straße, Hausnummer" id="strasse" class="angaben form-control" value="###value_strasse###">
  </div>
  <div class="form-group">
    <label for="ort">PLZ, Ort</label>
    <input type="text" maxlength="100" name="formhandler[ort]" placeholder="PLZ, Ort" id="ort" class="angaben form-control" value="###value_ort###">
  </div>
  <div class="form-group">
    <label for="telefon">Telefonnummer</label>
    <input type="text" maxlength="100" name="formhandler[telefon]" placeholder="Telefonnummer " id="telefon" class="angaben form-control" value="###value_telefon###">
  </div>
</fieldset>

Als nächstes wird abgefragt, ob der User weitere Daten angeben will, in unserem Beispiel wären das weitere Grundstücke, jeweils mit Straße / Hausnummer und PLZ / Ort.

<h4>Weitere Daten (bitte angeben, sofern vorhanden)</h4>
<div class="form-group">
  <div class="checkbox">
    <label for="weiteregs">
      <input type="checkbox" id="weiteregs" name="formhandler[weiteregs]" value="ja" ###checked_weiteregs_ja###>
      <strong>Weitere Daten vorhanden?</strong>
    </label>
  </div>
</div>

Wird die Checkbox angehackt, erscheinen die entsprechenden Input Felder sowie die Buttons, um diese beliebig oft zu klonen. Das Einblenden geschieht per jQuery:

$(document).ready(function(){
  $("#weiteregs_daten").hide();
  $("#weiteregs").click(function(){
    if ($("#weiteregs").is(":checked"))
    {
      $("#weiteregs_daten").show("fast");
    }
    else
    {     
      $("#weiteregs_daten").hide("fast");
    }
  });
});

Da möglicherweise eine serverseitige Überprüfung der Eingaben erfolgt, möchte man, dass die dynamisch eingeblendeten Felder im Fall eines Fehlers im Formular und dem damit verbundenen Neuladen der Seite sichtbar sind. Folgende Ergänzung im jQuery Code machts möglich:

$(window).load(function() {
  if ($("#weiteregs").is(":checked"))
  {
    $("#weiteregs_daten").show();
  }
});

Der HTML Code der dynamisch hinzugefügten Felder einschließlich der Buttons zum Erzeugen weiterer Felder sieht so aus:

<div id="weiteregs_daten">
  <button type="button" id="addmore">Weitere Felder einblenden</button>
  <button type="button" id="rmvbtn" disabled>Felder entfernen</button><br><br>
  <div id="clonehere"></div>
  <div class="weiteregs">
    <div class="form-group">
      <label for="cgsstrasse" class="cgsstrasse">Straße, Hausnummer</label>
      <input type="text" maxlength="100" name="formhandler[cgsstrasse][]" placeholder="Grundstück (Straße, Hausnummer)" id="cgsstrasse" class="form-control cgsstrasse" value="###value_cgsstrasse###">
    </div>
    <div class="form-group">
      <label for="cgsort" class="cgsort">PLZ, Ort</label>
      <input type="text" maxlength="100" name="formhandler[cgsort][]" placeholder="Grundstück (PLZ, Ort)" id="cgsort" class="form-control cgsort" value="###value_cgsort###">
    </div>
    <hr>
  </div>
</div>

Klickt man auf den Button „Weitere Felder einblenden“ $('#addmore') wird das Element mit den beiden Input Feldern geklont und hinter dem entsprechenden <div id="clonehere"></div> eingefügt. So sieht das jQuery aus:

$('#addmore').click(function() {
  var $clone = $('.weiteregs').clone(true);
  $clone.attr('id', "added"+count);
  $clone.removeClass('weiteregs').addClass('cloneelement');
  $clone.find('label.cgsstrasse').attr('for', "cgsstrasse"+count);
  $clone.find('input.cgsstrasse').attr('id', "cgsstrasse"+count).val('');
 
  $clone.find('label.cgsort').attr('for', "cgsort"+count);
  $clone.find('input.cgsort').attr('id', "cgsort"+count).val('');
 
  $clone.find('label.cabgabenr').attr('for', "cabgabenr"+count);
  $clone.find('input.cabgabenr').attr('id', "cabgabenr"+count).val('');
 
  $('#clonehere').after($clone);
  $('#rmvbtn').removeAttr('disabled');
  count++;
});
 
$('#rmvbtn').on('click', function() {
  $('.cloneelement').last().remove();
  count--;
  if (count>0)  $('#rmvbtn').removeAttr('disabled');
  else $('#rmvbtn').attr('disabled', 'disabled');
})

Der Button $('#rmvbtn') entfernt das jeweils letzte Element. Soweit das Gerüst. Hier das beschriebene funktionierende Beispiel des Zusammenspiels von HTML und jQuery:

Demo

Als nächstes muss man wissen, wie man die Inhalte der dynamisch hinzugefügten Felder per Formhandler verschickt. Zunächst macht man eine Abfrage darauf, ob die Checkbox gesetzt ist <!-- ###ISSET_weiteregs### -->.
Schließlich nutzt man die Arraystruktur und verschickt die Daten kommagetrennt. Wichtig ist, dass der name der geklonten Elemente als mehrdimensionales Array ausgezeichnet wird: formhandler[cgsstrasse][] (s.o.).
Für die Formhandler Mail hinterlegt man also lediglich folgenden Code:

<!-- ###ISSET_weiteregs### -->
Weitere Daten (kommagetrennt):<br />
###value_cgsstrasse###<br />
###value_cgsort###<br /><br />
<!-- ###ISSET_weiteregs### -->

Link:
http://www.stephan-meier.com/dynamische-eingabefeldern-mit-typo3-formhandler/