Mehrere Formular laden - Alternative?

[Alice]

Hallo.

Ich möchte gerne mit einer HTML-Seite mehrere PHP-Skripte ansteuern können.
Da viele Input- und Options-Felder unterschiedlich sind, möchte ich hier gerne mit JavaScript arbeiten.

Mein aktueller JS-Code prüft in einer IF-Abfrage, um was für eine Kategorie (PKW, LKW usw.) es geht und blendet die Felder dann Ein oder Aus.

   ...
   ...
   ...
   if(value == "PKW")
   {
      document.getElementById('bauform').style.display = "block";
      document.getElementById('teile').style.display = "none";
      document.getElementById('hubraum').style.display = "none";
      document.getElementById('leistung').style.display = "block";
      document.getElementById('baujahr').style.display = "none";
   }
   else if(value == "LKW")
   {
      document.getElementById('bauform').style.display = "none";
      document.getElementById('teile').style.display = "block";
      document.getElementById('hubraum').style.display = "none";
      document.getElementById('leistung').style.display = "block";
      document.getElementById('baujahr').style.display = "none"
   }
   ...
   ...
   ...

Meine Frage ist nun:

Wäre es möglich mehrere HTML-Formulare zu erstellen die speziell auf die Kategorie angepasst sind, die sich dann mit Hilfe von JS ändern? Wenn ja, wie kann ich das machen? Vielleicht ein Link zu einem Tutorial oder einem Code den ich verwenden kann?

Von der "Logik" her meine ich das in etwa so:

   ...
   ...
   ...
   if(value == "PKW")
   {
      Lade "pkw-formular.html"
   }
   else if(value == "LKW")
   {
      Lade "lkw-formular.html"
   }
   ...
   ...
   ...

 

[abuzze]

Dein aktueller Ansatz ist doch garnicht so schlecht.

Den anderen Ansatz kannst du bspw. mit jQuery's load-Methode leicht umsetzen: http://api.jquery.com/load/


Um auf deinen Ansatz einzugehen: er bietet den Vorteil, daß nicht extra etwas neu geladen werden muss. Was dich abschreckt dürften primär die langen Codeblöcke sein, die je nach Bedingung die Formularfelder anzeigen/verstecken.

Mal angenommen, du hättest ein solches Markup:

  <input name="bauform"   value="bauform"  class="cond pkw"/>
  <input name="teile"     value="teile"    class="cond lkw"/>
  <input name="hubraum"   value="hubraum"  class="cond"/>
  <input name="leistung"  value="leistung" class="cond pkw lkw"/>
  <input name="baujahr"   value="baujahr"  class="cond"/>

Du siehst, die Formularelemente haben spezielle Klassennamen, diese würden es dir ermöglichen, das display umzuschalten, indem du nur den Klassennamen von bspw. dem übergeeordneten Formular änderst.

Das CSS dazu würde so aussehen:

form .cond{display:none}
form.pkw .cond.pkw,form.lkw .cond.lkw{display:inline}

Das wäre ein simpler Einzeiler, wenn du noch ein anderes Formularziel benötigst, wäre das auch nur eine Zeile.

Ich habe mal eine Demo dazu erstellt: http://jsfiddle.net/GA6ad/