我在模态中有以下形式(在页面上的其他模态旁边)(缩短以供阅读)。
<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">×</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; (就像在原帖中一样)在视觉上做了诀窍,但没有将新的表格组附加到表格上。
提前致谢。
答案 0 :(得分:1)
我认为问题在于:
next_form_group.appendTo('#form').insertAfter(current_form_group);
您正在使用insertAfter
在ID为#form
的div之后添加数据,而form
标记在ID为#form
的div内结束。
为了处理此问题,请使用append()
在form
代码