如何克服HTML表单嵌套的限制?

我知道XHTML不支持嵌套的表单标记，我已经在Stack Overflow上阅读了关于这个主题的其他答案，但我仍然没有找到一个优雅的解决方案。

有些人说你不需要它，他们想不出有什么场景会需要它。就我个人而言，我想不出任何一种情况下我不需要它。

让我们看一个非常简单的例子:

你正在制作一个博客应用程序，你有一个带有一些字段的表单用于创建新帖子，还有一个带有“操作”的工具栏，如“保存”、“删除”、“取消”。

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

我们的目标是以一种不需要JavaScript的方式编写表单，只需要普通的HTML表单和提交按钮。

由于动作URL是在Form标签中定义的，而不是在每个单独的提交按钮中，所以我们唯一的选择是发布到一个通用URL，然后开始“if…then…”Else”来确定提交的按钮的名称。不是很优雅，但这是我们唯一的选择，因为我们不想依赖JavaScript。

The only problem is that pressing "Delete", will submit ALL the form fields on the server even though the only thing needed for this action is a Hidden input with the post-id. Not very big deal in this small example, but I have forms with hundreds (so to speak) of fields and tabs in my LOB applications that (because of requirements) have to submit everything in one-go and in any case this seems very inefficient and a waste. If form nesting was supported, I would at least be able to wrap the "Delete" submit button inside it's own form with only the post-id field.

你可能会说“只是实现‘删除’链接，而不是提交”。这在很多层面上都是错误的，但最重要的是，像“Delete”这样的副作用操作永远不应该是GET请求。

所以我的问题是(特别是对那些说他们不需要表单嵌套的人)你会做什么?有什么优雅的解决方案，我错过或底线真的是“要么需要JavaScript或提交一切”?

当前回答

我的解决方案是让按钮调用JS函数编写，然后提交表单与主表单

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

2013-03-24 05:32:45

其他回答

HTML5有一个“表单所有者”的概念——输入元素的“form”属性。它允许模拟嵌套表单，并将解决问题。

2010-05-13 22:05:37

我的解决方案是让按钮调用JS函数编写，然后提交表单与主表单

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

2013-03-24 05:32:45

我认为杰森是对的。如果你的“删除”操作是一个最小的操作，那就把它单独放在一个表单中，并把它与其他按钮对齐，这样界面看起来就像一个统一的表单，即使它不是。

或者，当然，重新设计你的界面，让人们完全删除其他地方，这根本不需要他们看到巨大的形式。

2009-02-28 22:44:29

对嵌套表单使用iframe。如果他们需要共享场地，那么……它并不是真正的嵌套。

2011-03-05 00:21:35

我刚刚想出了一个很好的方法来做jquery。

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

2012-03-15 18:43:57

如何克服HTML表单嵌套的限制?

推荐文章

最新文章

标签