Question

我在模态中有以下形式（在页面上的其他模态旁边）（缩短以供阅读）。

<div class="modal fade" id="edit-project" tabindex="-1" role="dialog" aria-labelledby="edit-project">
  <form method="POST" action="update" id="edit-project-form">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Edit Project Metadata</h4>
        </div>
        <div class="modal-body">
          <label>People:</label>
        <div class="form-group row" data-rel="0">
        <div class="col-md-4">
          <input class="form-control" name="member[0][firstname]" type="text" value="John">
        </div>
        <div class="col-md-5">
          <input class="form-control" name="member[0][lastname]" type="text" value="Smith">
        </div>
        <div class="col-md-6">
          <input class="form-control" name="member[0][email]" type="text" value="john@example.com">
        </div>
        <div class="col-md-7">
          <input class="form-control" name="member[0][uri]" type="text" value="http://www.example.com">
        </div>
      </div>

      ...

      <div class="form-group row" data-rel="2">
        <div class="col-md-4">
          <input class="form-control" name="member[2][firstname]" type="text" value="Peter">
        </div>
        <div class="col-md-5">
          <input class="form-control" name="member[2][lastname]" type="text" value="Doe">
        </div>
        <div class="col-md-6">
          <input class="form-control" name="member[2][email]" type="text" value="peter@example.com@gmail.com">
        </div>
        <div class="col-md-7">
          <input class="form-control" name="member[2][uri]" type="text" value="">
        </div>
        <div class="col-md-2">
          <button class="add-form-group btn btn-default" type="button">
            <i class="fa fa-plus"></i><span class="hidden-sm hidden-xs"></span>
          </button>
        </div>
      </div>                
    </div>
  </form>
</div>

除了我调用一些JQuery动态添加输入的最后一个按钮之外，效果很好。我的计划是尽可能地使它成为最常用的，并通过克隆按钮所在的表单组并在当前表单组之后包含它来阻止JS中的任何HTML：

$('div.modal-body').on('click', '.add-form-group', function(){
    var current_form_group = $(this).closest('.form-group');
    var next_form_group = current_form_group.clone();
    var current_index = current_form_group.data('rel');
    var next_index = current_index + 1;

    next_form_group.attr('data-rel', next_index);


    next_form_group.children().find('input').each(function(index, element) {
        $(element).attr('name').replace(current_index, next_index);
        $(element).val = '';
    });
    $(this).parent().remove();
    next_form_group.appendTo('#edit-project-form').insertAfter(current_form_group);
})

表单组生成良好。但是新创建的输入永远不会被发布（甚至不是序列化的），尽管通过DevTools可以看到这些元素：

<div class="form-group row" data-rel="3">
    <div class="col-md-4">
        <input class="form-control" name="member[3][firstname]" type="text" value="New Firstname">
    </div>
    <div class="col-md-5">
        <input class="form-control" name="member[3][lastname]" type="text" value="New Lastname">
    </div>
    <div class="col-md-6">
        <input class="form-control" name="member[3][email]" type="text" value="New Email">
    </div>
    <div class="col-md-7">
        <input class="form-control" name="member[3][uri]" type="text" value="New URI">
    </div>                                                            
</div>

尝试查找要附加新表单组的表单不成功：

// Does not work:
var form = current_form_group.closest('form');
// Neither does this:
var for = $(this).closest('form');

我如何获得父表格？但我做错了吗？我查询了它，大多数时候这是一个错误的表达元素的问题（这不是这里的情况）。

到目前为止，序列化发生在客户端，并且与原始输入配合良好：

$('#edit-project-form').bind('submit', function (e) {
    e.preventDefault();
    var form    = $(this);
    var div     = $(this).parent();

    console.log(form.serialize());
});

更新：我提供了有关代码实际位置（模式）的更多信息。我遗漏了任何服务器端代码，因为序列化已经失败了客户端

更新2：我现在就开始工作了：

form.append(next_form_group);

现在让我困惑的唯一一件事就是：它现在被注入表格的顶部。如何将创建的表单组移动到＆＃34; current_form_group＆＃34;下面。一个简单的＆＃34;插入＆＃34; （就像在原帖中一样）在视觉上做了诀窍，但没有将新的表格组附加到表格上。

提前致谢。

Answer 1

我认为问题在于：

next_form_group.appendTo('#form').insertAfter(current_form_group);

您正在使用insertAfter在ID为#form的div之后添加数据，而form标记在ID为#form的div内结束。

为了处理此问题，请使用append()在form代码

中添加动态html

动态输入未被序列化/提交

1 个答案: