Wie überwinden Sie die Verschachtelungsbeschränkung für HTML-Formulare?

Ich weiß, dass XHTML keine verschachtelten Formular-Tags unterstützt, und ich habe hier auf Stack Overflow bereits andere Antworten zu diesem Thema gelesen, aber ich habe immer noch keine elegante Lösung für das Problem gefunden.

Einige sagen, dass Sie es nicht brauchen und dass sie sich kein Szenario vorstellen können, in dem dies erforderlich wäre. Ich persönlich kann mir kein Szenario vorstellen, das ich nicht gebraucht habe.

Sehen wir uns ein sehr einfaches Beispiel an:

Sie erstellen eine Blog-App und haben ein Formular mit einigen Feldern zum Erstellen eines neuen Beitrags und eine Symbolleiste mit "Aktionen" wie "Speichern", "Löschen", "Abbrechen".

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

Unser Ziel ist es, das Formular so zu schreiben, dass kein JavaScript erforderlich ist , sondern nur ein altes HTML-Formular und Schaltflächen zum Senden.

Da die Aktions-URL im Formular-Tag und nicht in jeder einzelnen Senden-Schaltfläche definiert ist, besteht unsere einzige Option darin, auf einer generischen URL zu posten und dann "if ... then ... else" zu starten, um den Namen der Schaltfläche zu bestimmen, die diese Schaltfläche enthält wurde übermittelt. Nicht sehr elegant, aber unsere einzige Wahl, da wir uns nicht auf JavaScript verlassen wollen.

Das einzige Problem ist, dass durch Drücken von "Löschen" ALLE Formularfelder auf dem Server gesendet werden, obwohl für diese Aktion nur eine ausgeblendete Eingabe mit der Post-ID erforderlich ist. In diesem kleinen Beispiel keine große Sache, aber ich habe Formulare mit Hunderten (sozusagen) Feldern und Registerkarten in meinen LOB- Anwendungen, die (aufgrund von Anforderungen) alles auf einmal einreichen müssen, und dies scheint auf jeden Fall sehr ineffizient zu sein und eine Verschwendung. Wenn die Formularverschachtelung unterstützt würde, könnte ich zumindest die Schaltfläche "Löschen" in einem eigenen Formular nur mit dem Feld "Post-ID" umschließen.

Sie können sagen "Implementieren Sie einfach" Löschen "als Link anstatt zu senden". Dies wäre in so vielen Ebenen falsch, aber am wichtigsten ist, dass Nebenwirkungen wie "Löschen" hier niemals eine GET-Anforderung sein sollten.

Meine Frage (insbesondere an diejenigen, die sagen, dass sie keine Formverschachtelung benötigen) lautet: Was machen SIE? Gibt es eine elegante Lösung, die mir fehlt, oder lautet das Fazit wirklich "Entweder JavaScript benötigen oder alles einreichen"?

Ich würde dies genau so implementieren, wie Sie es beschrieben haben: Senden Sie alles an den Server und führen Sie ein einfaches if / else durch, um zu überprüfen, auf welche Schaltfläche geklickt wurde.

Und dann würde ich einen Javascript-Aufruf implementieren, der mit dem Onsubmit-Ereignis des Formulars verknüpft ist, das vor dem Senden des Formulars überprüft und nur die relevanten Daten an den Server sendet (möglicherweise über ein zweites Formular auf der Seite mit der ID, die für die Verarbeitung des Objekts erforderlich ist) eine versteckte Eingabe oder aktualisieren Sie den Seitenort mit den Daten, die Sie als GET-Anforderung übergeben müssen, oder senden Sie einen Ajax-Beitrag an den Server oder ...).

Auf diese Weise können Personen ohne Javascript das Formular problemlos verwenden, aber die Serverlast wird ausgeglichen, da die Personen mit Javascript nur die einzelnen benötigten Daten senden. Wenn Sie sich darauf konzentrieren, nur das eine oder andere zu unterstützen, werden Ihre Optionen unnötig eingeschränkt.

Wenn Sie alternativ hinter einer Unternehmensfirewall oder etwas anderem arbeiten und Javascript für alle deaktiviert ist, möchten Sie möglicherweise zwei Formulare erstellen und CSS-Magie anwenden, damit es so aussieht, als ob die Schaltfläche zum Löschen Teil des ersten Formulars ist.

Ich weiß, dass dies eine alte Frage ist, aber HTML5 bietet ein paar neue Optionen.

Die erste besteht darin, das Formular von der Symbolleiste im Markup zu trennen, ein weiteres Formular für die Löschaktion hinzuzufügen und die Schaltflächen in der Symbolleiste mithilfe des formAttributs ihren jeweiligen Formularen zuzuordnen.

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

Diese Option ist recht flexibel, aber im ursprünglichen Beitrag wurde auch erwähnt, dass möglicherweise verschiedene Aktionen mit einem einzigen Formular ausgeführt werden müssen. HTML5 kommt wieder zur Rettung. Sie können das formactionAttribut für Senden-Schaltflächen verwenden, sodass verschiedene Schaltflächen im selben Formular an unterschiedliche URLs gesendet werden können. In diesem Beispiel wird der Symbolleiste außerhalb des Formulars lediglich eine Klonmethode hinzugefügt, die jedoch im Formular verschachtelt funktioniert.

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

http://www.whatwg.org/specs/web-apps/current-work/#attributes-for-form-submission

Der Vorteil dieser neuen Funktionen ist, dass sie dies alles deklarativ ohne JavaScript tun. Der Nachteil ist, dass sie in älteren Browsern nicht unterstützt werden, sodass Sie für ältere Browser einige Polyfills durchführen müssen.

können Sie die Formulare nebeneinander auf der Seite haben, aber nicht verschachtelt. Verwenden Sie dann CSS, um alle Schaltflächen hübsch auszurichten?

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>

HTML5 hat eine Idee von "Formularbesitzer" - dem Attribut "Formular" für Eingabeelemente. Es ermöglicht die Emulation verschachtelter Formulare und löst das Problem.

Ein altes Thema, aber dieses könnte für jemanden nützlich sein:

Wie oben erwähnt, können Sie Dummy-Formulare verwenden. Ich musste dieses Problem vor einiger Zeit überwinden. Zuerst habe ich diese HTML-Einschränkung völlig vergessen und nur die verschachtelten Formulare hinzugefügt. Ergebnis war interessant - ich habe meine erste Form aus dem verschachtelten verloren. Dann stellte sich heraus, dass es eine Art "Trick" war, einfach ein Dummy-Formular (das aus dem Browser entfernt wird) vor den tatsächlich verschachtelten Formularen hinzuzufügen.

In meinem Fall sieht es so aus:

<form id="Main">
  <form></form> <!--this is the dummy one-->
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  ......
</form>

Funktioniert gut mit Chrome, FireFox und Safari. IE bis 9 (nicht sicher über 10) und Opera erkennt keine Parameter im Hauptformular. Das globale $ _REQUEST ist unabhängig von den Eingaben leer. Innere Formen scheinen überall gut zu funktionieren.

Ich habe keinen anderen hier beschriebenen Vorschlag getestet - Feldsatz um verschachtelte Formulare.

EDIT : Frameset hat nicht funktioniert! Ich habe einfach das Hauptformular nach den anderen hinzugefügt (keine verschachtelten Formulare mehr) und den "Klon" von jQuery verwendet, um Eingaben im Formular beim Klicken auf die Schaltfläche zu duplizieren. .Hide () wurde zu jeder der geklonten Eingaben hinzugefügt, um das Layout unverändert zu lassen. Jetzt funktioniert es wie ein Zauber.

Ich denke, Jason hat recht. Wenn es sich bei Ihrer Aktion "Löschen" um eine minimale Aktion handelt, stellen Sie diese in einem eigenen Formular dar und richten Sie sie mit den anderen Schaltflächen aus, damit die Benutzeroberfläche wie ein einheitliches Formular aussieht, auch wenn dies nicht der Fall ist.

Oder gestalten Sie natürlich Ihre Benutzeroberfläche neu und lassen Sie die Benutzer an einer anderen Stelle vollständig löschen, ohne dass sie die enorme Form überhaupt sehen müssen.

Eine Möglichkeit, dies ohne Javascript zu tun, besteht darin, eine Reihe von Optionsfeldern hinzuzufügen, die die auszuführende Aktion definieren:

• Aktualisieren
• Löschen
• Was auch immer

Dann würde das Aktionsskript abhängig vom Wert des Optionsfelds unterschiedliche Aktionen ausführen.

Eine andere Möglichkeit wäre, zwei Formulare wie vorgeschlagen auf die Seite zu setzen, nur nicht verschachtelt. Das Layout kann jedoch schwierig zu steuern sein:

<form name = "editform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "update" />
   <input type = "text" name = "foo" />
   <input type = "submit" name = "save" value = "Save" />
</ form>

<form name = "delform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "delete" />
   <input type = "hidden" name = "post_id" value = "5" />
   <input type = "submit" name = "delete" value = "Delete" />
</ form>

Verwenden Sie das versteckte Feld "Aufgabe" im Bearbeitungsskript, um entsprechend zu verzweigen.

Diese Diskussion interessiert mich immer noch. Hinter dem ursprünglichen Beitrag stehen "Anforderungen", die das OP zu teilen scheint - dh ein Formular mit Abwärtskompatibilität. Als jemand, dessen Arbeit zum Zeitpunkt des Schreibens manchmal IE6 (und für die kommenden Jahre) unterstützen muss, grabe ich das.

Ohne das Framework voranzutreiben (alle Organisationen werden sich auf Kompatibilität / Robustheit verlassen wollen, und ich verwende diese Diskussion nicht als Rechtfertigung für das Framework), sind die Drupal-Lösungen für dieses Problem interessant. Drupal ist auch direkt relevant, da das Framework seit langem die Richtlinie "Es sollte ohne Javascript funktionieren (nur wenn Sie möchten)", dh das Problem des OP, verfolgt.

Drupal verwendet seine ziemlich umfangreichen form.inc- Funktionen, um das triggering_element zu finden (ja, das ist der Name im Code). Im unteren Bereich des auf der API-Seite aufgeführten Codes für form_builder (wenn Sie sich mit Details befassen möchten , wird die Quelle empfohlen - drupal-x.xx / includes / form.inc ). Der Builder verwendet die automatische HTML-Attributgenerierung und kann über diese bei der Rückkehr erkennen, welche Schaltfläche gedrückt wurde, und entsprechend handeln (diese können so eingerichtet werden, dass auch separate Prozesse ausgeführt werden).

Über den Formularersteller hinaus teilt Drupal die Aktionen zum Löschen von Daten in separate URLs / Formulare auf, wahrscheinlich aus den im ursprünglichen Beitrag genannten Gründen. Dies erfordert eine Art Such- / Auflistungsschritt ( stöhne ein anderes Formular!, Ist aber benutzerfreundlich) als Vorstufe. Dies hat jedoch den Vorteil, dass das Problem "Alles einreichen" beseitigt wird. Das große Formular mit den Daten wird für den beabsichtigten Zweck, die Datenerstellung / -aktualisierung (oder sogar eine Zusammenführungsaktion) verwendet.

Mit anderen Worten, eine Möglichkeit, das Problem zu umgehen, besteht darin, das Formular in zwei Teile zu teilen. Dann verschwindet das Problem (und die HTML-Methoden können auch über einen POST korrigiert werden).

Verwenden Sie ein iframefür das verschachtelte Formular. Wenn sie Felder gemeinsam nutzen müssen, dann ... ist es nicht wirklich verschachtelt.

Meine Lösung besteht darin, dass die Schaltflächen JS-Funktionen aufrufen, die Formulare außerhalb des Hauptformulars schreiben und dann senden

<head>
<script>
function removeMe(A, B){
        document.write('<form name="removeForm" method="POST" action="Delete.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.removeForm.submit();
}
function insertMe(A, B){
        document.write('<form name="insertForm" method="POST" action="Insert.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.insertForm.submit();
}
</script>
</head>

<body>
<form method="POST" action="main_form_purpose_page.php">

<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">

<input type="submit" name="submit" value="Submit">
</form>
</body>

Wenn Sie wirklich nicht mehrere Formulare verwenden möchten (wie Jason vorschlägt), verwenden Sie Schaltflächen und Onclick-Handler.

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

Und dann in Javascript (ich benutze jQuery hier aus Gründen der Einfachheit) (obwohl es ziemlich übertrieben ist, einige Onclick-Handler hinzuzufügen)

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

Ich weiß auch, dass dadurch die Hälfte der Seite ohne Javascript nicht funktioniert.

Als Antwort auf eine Frage, die Yar in einem Kommentar zu seiner eigenen Antwort gestellt hat, präsentiere ich JavaScript, mit dem die Größe eines Iframes geändert werden kann. Für den Fall einer Formularschaltfläche kann davon ausgegangen werden, dass sich der Iframe in derselben Domäne befindet. Dies ist der Code, den ich benutze. Sie müssen die Mathematik / Konstanten für Ihre eigene Site ändern:

function resizeIFrame(frame)
{
    try {
        innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
        if('style' in frame) {
            frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
            frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
        } else {
            frame.width = Math.ceil(innerDoc.body.scrollWidth);
            frame.height = Math.ceil(innerDoc.body.scrollHeight);
        }
    } catch(err) {
        window.status = err.message;
    }
}

Dann nenne es so:

<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>

Ich habe mir gerade eine nette Art ausgedacht, es mit jquery zu machen.

<form name="mainform">    
    <div id="placeholder">
    <div>
</form>

<form id="nested_form" style="position:absolute">
</form>

<script>
   $(document).ready(function(){
      pos = $('#placeholder').position();
      $('#nested_form')
         .css('left', pos.left.toFixed(0)+'px')
         .css('top', pos.top.toFixed(0)+'px');
   });
</script>

Wenn Sie ein Formular senden, sendet der Browser auch einen Namen und einen Wert für die Eingabe. Was Sie also tun können, ist

<form   
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"  
method="post">  

    <input type="text" name="foo" /> <!-- several of those here -->  
    <div id="toolbar">
        <input type="submit" name="action:save" value="Save" />
        <input type="submit" name="action:delete" value="Delete" />
        <input type="submit" name="action:cancel" value="Cancel" />
    </div>
</form>

Auf der Serverseite suchen Sie einfach nach einem Parameter, der die Breitenzeichenfolge "action:" startet, und der Restteil gibt an, welche Aktion ausgeführt werden soll

Wenn Sie also auf die Schaltfläche Browser speichern klicken, erhalten Sie so etwas wie foo = asd & action: save = Save

Ich ging das Problem um, indem ich ein Kontrollkästchen einfügte, je nachdem, welche Form die Person tun wollte. Verwenden Sie dann 1 Schaltfläche, um das gesamte Formular zu senden.

Alternativ können Sie das Formular actiob on the fly zuweisen ... ist möglicherweise nicht die beste Lösung, entlastet aber sicher die serverseitige Logik ...

<form name="frm" method="post">  
    <input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />  
    <input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />  
</form>