尝试修复嵌套表单答案

【问题标题】：Trying to fix nested forms尝试修复嵌套表单
【发布时间】：2015-12-13 12:17:02
【问题描述】：

我正在尝试为我的客户的问题编写修复程序 - 他的主表单相当大并且跨越许多选项卡，其中包含包含模式表单的内容（因此，如果您有一个与您的个人资料相关联的小部件列表，弹出表单可以让您添加另一个）。模式不起作用，因为它们在表单中创建了一个表单，所以我想我可以像这样将它们推到页面的末尾：

$('body').append('#modalFormID');

但这不起作用，因为浏览器似乎在 document.ready 可以触发之前从 DOM 中剥离了 2nd form 标记。我创建了一个jsFiddle here：

感谢任何帮助。谢谢，

罗伯

【问题讨论】：

没错。 DOM 必须有效，因此如果 HTML 无效，浏览器将在解析时自行重写。并且 jQuery 对 DOM 进行操作，而不是原始源代码。
要添加到 Barmar 的评论中，而不是使用 jquery 修改 DOM，您可以尝试修改原始 HTML 代码，以便首先不存在表单问题。

标签： javascript jquery html forms dom

【解决方案1】：

好的，这就是我的想法。在 include 中，只要有表单，我就会将其包装在 div 标记中，该标记还包括操作和方法的数据属性，如下所示：

<div id="wrap_form1" class="formwrap" data-action="/myscript.php" data-method="POST">
<form action="/myscript.php" medhod="POST">
... form stuff...
</form>
</div>

如果表单被浏览器删除，则在全局页面脚本中使用某些内容来恢复表单。

  $('div.formwrap').each(function() {
    if (!($(this).find('form').length) {
      var formtag='<form class="nestedform" action="'+$(this).attr('data-action')+'" method='+$(this).attr('data-method')+'>';
      $(this).html(formtag+$(this).html()+'</form>');
    }
  })

然后我们仍然需要将其向下移动，使其位于主窗体之外。

  $('form.nestedform').each(function() {
    $('body').append($(this));
  });

有什么想法吗？

【讨论】：