✔ Verschachteltes Formular welches sich dynamisch erweitert

[Tragger]

Hallo Forumsgemeinde,

Ich habe vor ein paar Tagen euer Forum gefunden und schon ein paar sehr Interessante und aufschlussreiche Threads gelesen. Nun muss ich selber mal ein schreiben

Mein Ziel ist es folgende Eingabemaske zu programmieren:

Um euch den Aufbau der Eingabemaske zu verdeutlichen, gibt’s hier ein kurzes Beispiel:
Ein Kunde hat kein, ein oder mehrere Werke.
Jedes Werk hat keine, ein oder mehrere Hallen.

Beispiel Automobilhersteller Volkswagen:
Der Kunde VW hat mehrere Werke:
Werk Wolfsburg, Werk Hannover, Werk….
Jedes Werk hat mehrere Hallen:
Werk Wolfsburg hat Halle H1,H2, H3, H4…
Werk Hannover hat Halle H1, H2, H3…

Ich will nun eine Seite programmieren, die die Eingabe des Kunden mitsamt Werke und Hallen erlaubt. Nach jeder Eingabe soll der Benutzer die Eingabe per Knopfdruck bestätigen und die Möglichkeit bekommen neue Daten einzugeben. Wenn er fertig ist drückt er auf ein „speichern“ Button, durch den dann alle Textfelder ausgelesen werden müssen um den Inhalt in eine Datenbank zu speichern. Die Beziehungen müssen dabei Berücksichtigt werden z.B. welches Werk nun welche Hallen hat usw.

Der Benutzer lädt die Seite und sieht 1 Textfeld „Kunde“ und einen Button „ok“. Er muss nun einen Kunden eingeben und anschließend die Eingabe über den „ok“ Button bestätigen.

Kunde: [ ] „ok“

Nach der Bestätigung verschwindet der „ok“ Button und es taucht ein neues Textfeld auf namens „Werke“ wo auch wieder ein „ok“ Button hinter ist.

Kunde: [VW]

Werk: [ ] „ok“​

Nach Eingabe eines Werks und nach bestätigen über ok verschwindet der „ok“ Button und es tauchen 2 neue Textfelder auf. Unter dem Textfeld Werk soll nun ein Textfeld „Halle“ auftauchen auch wieder mit einem „ok“ Button. und unter dem Textfeld „Halle“ soll wieder ein Textfeld „Werk“ auftauchen, auch hier mit wieder mit einem „ok“ Button“ sodass der Benutzer hier ein 2. Werk eingeben kann.

Kunde: [VW]

Werk: [Wolfsburg]​

Halle: [ ] „ok“​

Werk: [ ] „ok“​

Wenn man nun eine Halle eingibt und diese mit „ok“ bestätigt dann verschwindet der „ok“ Button und es taucht unter dem Hallentextfeld ein weiteres Hallentextfeld auf mit „ok“-Button wo eine weiter Halle eingegeben werden kann.

Das ganze soll dann immer so weiter gehen…

Kunde: [VW]

Werk [Wolfsburg]​

Halle [H1]​

Halle [ ] „ok“​

Werk [Hannover]​

Halle [ ] „ok“​

Werk [ ] „ok“​

Soviel zur Theorie, jetzt zur Praxis.
Ich habe mich gestern heute etwas in Nodes eingelesen, in der Hoffnung dass mir dadurch vll. etwas einfällt, aber ich habe einfach keine Idee wie ich das ganze realisieren könnte.
Mein erster Versuch (ohne nodes etc.) war mal einfach so drauf los. Er endete in einer sehr verworrenen und komplexen JavaScript Datei, die ich selber nur noch kaum nachvollziehen kann aber immerhin konnte ich schon einen Kunden mehrere Werke zuordnen.
Besonders Kopfschmerzen bereitet mir auch das auslesen der Textfelder. Schließlich müssen da die Beziehungen erhalten bleiben…

Ich hoffe ihr habt ein paar gute Lösungen/Ansätze/Anregungen für mich.

Gruß tragger

 

[THEJS]

Hey!

Ich hatte bereits mal so eine Situation in der Schule mit Zutaten für ein Rezept und ich habe das Ganze so gelöst:
(Da ich seit kurzem ein Fan von JQuery bin, auf JQuery umgeschrieben)

Seite mit der Form:

// vorher noch die Library von JQuery einbinden
<script type="text/javascript">

  $(document).ready(function(){
    $("input").click(function(){
      var $this = $(this);
      var currentId = parseInt($this.prev().attr("id"), 0);
      var nextId = currentId+1;
      
      if($this.hasClass("werkOK"))
      {
        $value = $this.prev().val();
        $this.prev().val("");
        $next = $this.parent().clone();
        $hall = $next.clone();
        $this.prev().val($value);
        
        // Erste Halle zum Werk erstellen
        $hall.attr("class", "hall");
        $hall.find("input:first").attr("id", "1");
        $hall.find("input:first").attr("name", "werk_" + currentId + "_hall_1");
        $hall.find("input:last").attr("class", "hallOK");
        $hall.find("label").text("Halle 1:");
        $this.parent().append($hall);
        
        $hall.find("input:first").focus();
        
        // Nächstes Werk erstellen
        $next.find("input:first").attr("id", nextId);
        $next.find("input:first").attr("name", "werk_" + nextId);
        $next.find("label").text("Werk " + nextId + ":");
        $this.parent().parent().append($next);
        
        $this.remove();
      } else if($this.hasClass("hallOK"))
      {
        // Nächste Halle erstellen
        $value = $this.prev().val();
        $this.prev().val("");
        $next = $this.parent().clone();
        $this.prev().val($value);
        $next.find("input:first").attr("id", nextId);
        $next.find("input:first").attr("name", "werk_" + $this.parent().parent().find("input:first").attr("id") + "_hall_" + nextId);
        $next.find("label").text("Halle " + nextId + ":");
        $this.parent().parent().append($next);
        
        $next.find("input:first").focus();
        
        $this.remove();
      }
    });
  });

</script>

<form action="" method="post">
  <div class="werkeundhallen">
    <div class="werk">
      <label>Werk 1:</label>
      <input type="text" name="werk_1" id="1" />
      <input type="button" class="werkOK" />
    </div>
  </div>
  
  <input type="submit" value="senden" name="absenden">
</form>

Das PHP-File, wo deine Daten hingeschickt werden

<?php

if($_POST['absenden']) // or whatever (der name des Submit-Buttons)
{
  foreach($_POST as $key=>$value)
  {
    if(!empty($value))
    {
      $keyparts = explode("_", $key);
      if(count($keyparts) == 2)
      {
        // dann ist es ein Werk
        // do something with
      } elseif(count($keyparts) == 4)
      {
        // dann ist es eine Halle
        // do something with
      }
    }
  }
}

?>

Also dafür hab ich mir ja ein fettes Danke verdient ^^
Habs getestet und funktioniert.
Ich hoffe es hilft dir weiter

Eins noch: Ich bin kein Fan von Kommentaren, also versuche zu verstehen was das Script macht. Solltest du's garnicht verstehen, kannst du ja noch Fragen.

greez
THEJS

 

[Tragger]

Wow erst mal großes Lob von mir. Eine echt knackige, funktionierende und kurze Lösung. Ich selbst habe mich in der Zwischenzeit noch mal darangesetzt und eine fast funktionierende Eingabemaske entwickelt. Bei mir sind noch ein paar Bugs drin und sie ist ca. 5 mal so lang wie deine Lösung.
Ich bin aber von deiner Lösung recht begeistert. Ich danke dir sehr.
Ich werde mich jetzt mal ran setzten und noch ein paar Gültigkeitsprüfungen entwickeln. Das Thema sollte aber erst mal hiermit erledigt sein.

Mfg Tragger