Comment surmontez-vous le formulaire HTML de nidification limitation?

Je sais que c'est une vieille question, mais HTML5 offre un couple de nouvelles options.

La première consiste à séparer la forme de la barre d'outils dans le balisage, ajouter une autre forme pour l'action de suppression, et d'associer les boutons dans la barre d'outils avec leurs formes respectives à l'aide de la form attribut.

<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>

Cette option est assez souple, mais le post original a également mentionné qu'il peut être nécessaire d'effectuer différentes actions avec un seul formulaire. HTML5 vient à la rescousse de nouveau. Vous pouvez utiliser le formaction attribut sur les boutons de soumission, de sorte que les différents boutons dans le même formulaire peut soumettre à des Url différentes. Cet exemple ajoute juste un clone de la méthode de la barre d'outils en dehors de la forme, mais il fonctionne de la même imbriquée dans la forme.

<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

L'avantage de ces nouvelles fonctionnalités est qu'ils font tout cela de manière déclarative sans JavaScript. L'inconvénient est qu'ils ne sont pas pris en charge sur les anciens navigateurs, de sorte que vous avez à faire certains polyfills destinés à la prise pour les anciens navigateurs.

HTML5 a une idée de "forme " propriétaire" - la "forme" de l'attribut pour les éléments d'entrée. Il permet d'émuler des formulaires imbriqués et permettra de résoudre le problème.

Je pense que Jason est le droit. Si votre "Supprimer" l'action est un minimum, faire que d'être dans une forme par lui-même, et l'aligner avec les autres boutons afin de rendre l'apparence de l'interface comme une forme unifiée, même si elle ne l'est pas.

Ou, bien sûr, la refonte de votre interface, et de laisser les gens supprimer en un tout autre lieu qui ne les oblige pas à voir la enormo-forme à tous.

Cette discussion est toujours d'intérêt pour moi. Derrière le post original sont des "exigences" qui l'OP semble partager - c'est à dire une forme avec rétro-compatibilité. Comme quelqu'un dont le travail au moment de l'écriture doit parfois revenir à IE6 (et pour les années à venir), je creuse ça.

Sans pousser le cadre de toutes les organisations vont vouloir se rassurer sur la compatibilité et la robustesse, et je ne suis pas en utilisant cette discussion comme justification pour le cadre), Drupal solutions à ce problème sont intéressants. Drupal est aussi directement, parce que le cadre a eu une longue période de politique de "il devrait fonctionner sans Javascript (si vous le souhaitez)" c'est à dire l'OP question.

Drupal utilise c'est plutôt vaste forme.inc fonctions pour trouver le triggering_element (oui, c'est le nom de code). Voir le bas de la code figurant sur l'API page pour form_builder (si vous souhaitez creuser dans les détails, la source est recommandé - drupal-x.xx/includes/forme.inc). Le générateur automatique de l'attribut HTML génération et, par là, pouvez sur le retour de détecter quel bouton a été pressé, et agir en conséquence (il peut être configuré pour exécuter des processus distincts trop).

Au-delà de la forme builder, Drupal divise les données 'supprimer' actions pour séparer les adresses url/formes, probablement pour les raisons évoquées dans le post original. Ce besoin d'une forme de recherche/référencement étape (gémissement une autre forme!, mais est user-friendly) à titre préliminaire. Mais cela a l'avantage de supprimer le "soumettre tout" de l'émission. La grande formulaire avec les données est utilisé pour son usage prévu, de la création de données/mise à jour (ou même une "fusion" de l'action).

En d'autres termes, une façon de travailler ronde, le problème est de décentraliser la forme en deux, puis le problème disparaît (et le HTML méthodes peuvent être corrigées par le biais d'un POST trop).

Ma solution est d'avoir les boutons d'appel JS fonctions de l'écriture, puis de soumettre des formulaires à l'extérieur de la principale forme

<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>

En réponse à une question posté par Yar dans un commentaire de sa propre réponse, je vous présente un peu de JavaScript qui permettra de redimensionner une iframe. Pour le cas d'un bouton de formulaire, il est sûr de supposer que l'iframe sera sur le même domaine. C'est le code que j'utilise. Vous devrez modifier la/les maths constantes pour votre propre site:

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;
    }
}

Puis l'appeler comme ceci:

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

Bien, si vous soumettez un formulaire, le navigateur envoie une entrée de soumettre le nom et la valeur.
Donc, ce que vous pouvez faire est de

<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>

donc sur le côté serveur vous suffit de regarder pour le paramètre qui commence largeur de chaîne "d'action:" et le reste de la partie vous indique les mesures à prendre

ainsi, lorsque vous cliquez sur le bouton Enregistrer navigateur vous envoie quelque chose comme foo=tsa&action:save=enregistrer

Vous pouvez également affecter la forme actiob à la volée...peut-être pas la meilleure solution, mais vous ne soulager la logique côté serveur...

<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>