Formular mit OnClick erweitern

[Der Martin]

Hallo,

Wie baut man denn generell ein dynamisches Formular?
ZB wenn ich die Anzahl von Medikamenten abfragen wollte, die jemand nimmt.
Dann gebe ich erst einen Formularteil der eine  Eingabemöglichkeit für das 1. Medikament bietet (mit Feldern für Name, Dosierung etc.) und gebe ihm dazu einen Button mit "nächstes Medikament anfügen"

dann zerlege (in Gedanken) das Formular in Bausteine: Einen Baustein, der von Anfang an dasteht, und der die notwendigen Basis-Eingabefelder enthält (z.B. Kunde, Lieferadresse, Zahlungsart). Dazu einen Baustein, der pro Artikel immer wiederholt wird. Und einen abschließenden Baustein mit den Buttons für Submit und weitere Eingabefelder:

<form method="post" action="/bestell.php">  
 <fieldset>  
  <legend>Allgemeine Angaben</legend>  
  <label>Kundennummer:</label><input type="text" name="kdnr">  
 </fieldset>  
  
 <fieldset>  
  <legend>Ihre Bestellung</legend>  
  <table>  
   <thead>  
   <tr>  
    <th>Artikelnummer</th>  
    <th>Bezeichnung</th>  
    <th>Menge</th>  
    <th>Einzelpreis</th>  
    <th>Gesamtpreis</th>  
   </tr>  
   </thead>  
   <tbody>  
   <tr>  
    <td><input type="text" name="artikelnr[]"></td>  
    <td><!-- Platzhalter für Artikeltext --></td>  
    <td><input type="text" name="menge[]"></td>  
    <td><!-- Platzhalter für Einzelpreis --></td>  
    <td><!-- Platzhalter für Gesamtpreis --></td>  
   </tr>  
   </tbody>  
   <tfoot>  
   <tr>  
    <td></td>  
    <td>Summe</td>  
    <td></td>  
    <td></td>  
    <td><!-- Platzhalter für Summe --></td>  
   </tr>  
   </tfoot>  
  </table>  
 </fieldset>  
  
 <fieldset>  
  <input type="submit" name="mehr" value="Weitere Artikel">  
  <input type="submit" name="bestell" value="Bestellung absenden">  
 </fieldset>  
</form>

Das könnte ich mir mal als Grundgerüst vorstellen. Im JS-Code legt man sich nun als erstes eine Referenz auf das table-Element an, oder noch besser auf das darin enthaltene tbody-Element. Dann könnte eine Funktion, nennen wir sie etwa InitRow(), die Eingabefelder in der bisher einzigen vorhandenen Zeile mit je einem onchange-Handler versehen, damit bei der Eingabe automatisch die Felder Artikeltext, Einzelpreis, Gesamtpreis und Summe (im tfoot) aktualisiert werden können; außerdem kleben wir einen onclick-Handler an den mit "Weitere Artikel" beschrifteten Submit-Button, der nachher die Tabelle (das tbody-Element) um eine Zeile verlängern soll und dann false zurückgibt, damit dieser Button eben keinen Formularversand initiiert.
Für das Handling bieten sich die Eigenschaften rows[] und cells[] des Tabellenobjekts an, sowie seine Methoden insertRow() und insertCell(). Mehr dazu auch in SELFHTML.

Beim endgültigen Absenden des Formulars bekommen wir die Parameter artikelnr[] und menge[] gleich komfortabel als Arrays angeliefert - wobei ich jetzt einfach mal unterstelle, dass die serverseitige Auswertung mit PHP geschieht.

Steht Javascript nicht zur Verfügung, werden die Felder Artikeltext, Einzelpreis und Gesamtpreis nicht simultan bei der Eingabe aktualisiert, und beim Klicken auf "Weitere Artikel" wird das Formular "normal" abgeschickt. Das auswertende Script muss nun erkennen, dass der Parameter "bestell" nicht dabei ist, dafür aber "mehr", und gibt als Response dasselbe Formular wieder aus - nur mit einer zusätzlichen Tabellenzeile mit leeren Feldern, und die Felder Artikeltext, Einzelpreis und Gesamtpreis in den bereits ausgefüllten Zeilen sind ergänzt. Das Formular bleibt also mit nur geringen Abstrichen im Komfort nutzbar.

Und nun bist du wieder dran. ;-)

So long,
 Martin