Ajax - Verarbeitung eines dynamisches Formulars

flowryan

Grünschnabel
Einen wunderschönen guten Abend miteinander!

Nach mehreren Stunden experimentierens bin ich nun nervlich am Ende.

Konkret zum Problem:

Ich möchte eine Suchfunktion bauen, bei der beliebig viele Felder hinzugefügt werden können. Dies klappt auch soweit hervorragend. Das Löschen der Felder klappt ebenfalls.
Hintergrund: Ein Benutzer soll / kann somit beliebig viele Filter hinzufügen.

Da, diese Felder beim Abschicken des Formulars jedoch bestehen bleiben sollen (mit ihren Inhalten), soll das Formular per Ajax (POST-Methode) versendet werden.
Dies klappt ebenfalls soweit.

Was jedoch nicht klappt: Die übergabe der neuen Felder bzw. deren Werte an das nachfolgende PHP-Script.

Gebaut wurden die Felder mit:
Code:
function clone_this(objButton)
{
  if(objButton.parentNode)
  {
    tmpNode=objButton.parentNode.cloneNode(true);
    document.getElementById("holderID").appendChild(tmpNode);
    objButton.value="-";
    objButton.title="Filter entfernen";
    objButton.onclick=new Function('f1','document.getElementById("holderID").removeChild(this.parentNode)');
  }
}

Die Formularfelder sehen wie folgt aus [diese wiederholen sich, beim Druck auf "Feld hinzufügen"]:
HTML:
<label for="holderID">T&auml;tigkeit</label>
<div id="holderID">
  <div style="padding-bottom:5px;">
    <select name="taetigkeit[]" id="taetigkeit">
       <option value="1">Beispieloption</value>
    </select>
    <select name="operator[]" id="operator" class="small">
       <option value="2" selected="selected">Mindestens</option>
    </select>
    <select name="kenntnisse[]" id="kenntnisse" class="small">
       <option value="1">1 (keine)</option>
    </select>
    <input type="button" value="+" onclick="clone_this(this)" title="Feld hinzuf&uuml;gen" />
  </div>
</div>


Der "eigentliche" Ajax Request ist so aufgebau:
Code:
    http.open('post', 'test.php',true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http.send('name=test'+test.value);  // Hier müssen doch die Daten angehängt werden?
    http.onreadystatechange = handleSearchForm;

Das Problem bzw. vielmehr mein Problem ist jetzt, dass ich nicht weiß, wie ich an die Daten der erzeugten Felder herankomme und sie dann per Ajax versende.

Ich befürchte / denke es ist etwas mit childNode, firstChild, lastChild, o.Ä.
Ich weiß es jedoch nicht.


Ich bin für jeden Tipp dankbar!

Gruß,
der flow.
 
Moin,

du müsstest in einer Schleife alle Formularelemente durchlaufen und einen entsprechenden String anhand ihrer Name-/Wert-Kombination zusammenstellen.

Eine Liste aller Formularelemente erhältst du per formularname.elements

Du kannst diese Liste wie einen Array durchlaufen.
 

Neue Beiträge

Zurück