javascript - 尝试修复嵌套表单

Question

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

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

但这不起作用，因为浏览器似乎在 document.ready 触发之前从 DOM 中剥离了第二个表单标签。我创建了一个jsFiddle here :

感谢任何帮助。 谢谢，

抢

Answer 1

好吧，这就是我的想法。在包含内容中，只要有表单，我都会将其包装在 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));
  });

有什么想法吗？