Verstecken von HTML Formularen für das einfache bedinen administrativer Funktionen

[Rolf B]

Hallo MB,

ich fasse nochmal zusammen.

Die Lösung, die Jörg (Ursus) vorgeschlagen hat, stellt progressive enhancement dar. D.h. sie funktioniert auch ohne JavaScript, aber mit JavaScript funktioniert sie besser.

Deine "one form per row" Lösung ist ebenfalls machbar, und es ist auch kein Problem, in einer Tabellenzelle ein Form unterzubringen. Allerdings nicht als "one form per button", das ist unnötig. Ein Form pro Tabellenzelle reicht (bevor Du fragst: ein Form pro Row, also außerhalb von th oder td, ist falsches HTML und geht nicht). Das hidden input könnte man auch im action-Parameter unterbringen, niemand verbietet Query-Parameter in POST Requests. Beispielsweise so:

<tr id="4711-001-qxtt6">
<th>
   <form method="post" action="/processform.php?id=4711-001-qxtt6">
      <button type="submit" name="edit" value="1">Bearbeiten</button>
      <button type="submit" name="delete" value="1">Löschen</button>
   </form>
</th>
<td>...</td>
</tr>

Das ist nicht falsch, und der Browser wird deswegen auch nicht in die Knie gehen. Du musst nur verhindern, dass processform.php bei einer anderen Request-Methode als POST irgendwas tut ($_SERVER['REQUEST_METHOD'] == "POST"). Und type="submit" kann man beim Button auch weglassen, das ist der Default-Typ.

Oder so, mit hidden input statt Query Parameter:

<tr id="4711-001-qxtt6">
<th>
   <form method="post" action="/processform.php">
      <input type="hidden" name="id" value="4711-001-qxtt6">
      <button name="edit" value="1">Bearbeiten</button>
      <button name="delete" value="1">Löschen</button>
   </form>
</th>
<td>...</td>
</tr>

oder mit einem großen Form - dann geht hidden input nicht und du musst den Value der Buttons nutzen. Deswegen <button> statt <input type="button">, weil sich im button-Element der value vom Text unterscheiden kann.

<form method="POST" action="/processform.php">
<table>
<tr id="4711-001-qxtt6">
<th>
  <button name="edit" value="4711-001-qxtt6">Bearbeiten</button>
  <button name="delete" value="4711-001-qxtt6">Löschen</button>
</th>
<td>...</td>
</tr>
</table>
</form>

Das ist aus reiner HTML Sicht alles gleichwertig. Solange es nur Buttons gibt, schickt das große Form genau ein Key-Value Paar an den Server.

Ohne JavaScript-Support würde jede dieser Aktionen einen Postback zum Server durchführen. Über die ID am tr Element kannst Du bei der Rückkehr aus dem Bearbeiten- oder Löschen-Dialog dafür sorgen, dass die gewünschte Zeile gleich wieder sichtbar ist (indem Du der URL ein #4711-001-qxtt6 hinzufügst)

Wenn JavaScript aktiv ist, machst Du - beispielsweise - alles mit Ajax. Und ja, dann programmierst Du doppelt. Einmal die enhanced version mit JS und einmal die basic version mit HTTP Postback. Je nach HTML sieht die JavaScript-Lösung etwas anders aus, aber bei geschickter Programmierung und Ausnutzung von Event-Bubbling ist der Programmieraufwand und Laufzeitaufwand für alle HTML Varianten gleich.

Rolf