我想动态地向Django表单集添加新表单,这样当用户点击“添加”按钮时,它就会运行JavaScript,向页面添加新表单(这是表单集的一部分)。
当前回答
另一个cloneMore版本,允许对字段进行选择性消毒。当您需要防止多个字段被擦除时使用它。
$('table tr.add-row a').click(function() {
toSanitize = new Array('id', 'product', 'price', 'type', 'valid_from', 'valid_until');
cloneMore('div.formtable table tr.form-row:last', 'form', toSanitize);
});
function cloneMore(selector, type, sanitize) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function() {
var namePure = $(this).attr('name').replace(type + '-' + (total-1) + '-', '');
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name': name, 'id': id}).removeAttr('checked');
if ($.inArray(namePure, sanitize) != -1) {
$(this).val('');
}
});
newElement.find('label').each(function() {
var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
其他回答
一种选择是创建一个包含所有可能表单的表单集,但最初将不需要的表单设置为隐藏——即display: none;。当需要显示一个表单时,将它的css显示设置为block或任何合适的显示。
如果不了解更多关于“Ajax”正在做什么的细节,就很难给出更详细的回应。
另一个cloneMore版本,允许对字段进行选择性消毒。当您需要防止多个字段被擦除时使用它。
$('table tr.add-row a').click(function() {
toSanitize = new Array('id', 'product', 'price', 'type', 'valid_from', 'valid_until');
cloneMore('div.formtable table tr.form-row:last', 'form', toSanitize);
});
function cloneMore(selector, type, sanitize) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function() {
var namePure = $(this).attr('name').replace(type + '-' + (total-1) + '-', '');
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name': name, 'id': id}).removeAttr('checked');
if ($.inArray(namePure, sanitize) != -1) {
$(this).val('');
}
});
newElement.find('label').each(function() {
var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
克隆莫尔函数有一个小问题。因为它也会清除django自动生成的隐藏字段的值,如果你试图保存一个包含多个空表单的表单集,它会导致django报错。
这里有一个解决方案:
function cloneMore(selector, type) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function() {
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
if ($(this).attr('type') != 'hidden') {
$(this).val('');
}
$(this).attr({'name': name, 'id': id}).removeAttr('checked');
});
newElement.find('label').each(function() {
var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
模拟和模仿:
Create a formset which corresponds to the situation before clicking the "add" button. Load the page, view the source and take a note of all <input> fields. Modify the formset to correspond to the situation after clicking the "add" button (change the number of extra fields). Load the page, view the source and take a note of how the <input> fields changed. Create some JavaScript which modifies the DOM in a suitable way to move it from the before state to the after state. Attach that JavaScript to the "add" button.
虽然我知道表单集使用特殊的隐藏<input>字段,并且大约知道脚本必须做什么,但我不记得我头顶上的细节。我上面所描述的就是我在你的情况下会做的事情。
Paolo的建议很好用,但有一点需要注意——浏览器的后退/前进按钮。
如果用户使用后退/前进按钮返回到表单集,那么用Paolo的脚本创建的动态元素将不会被呈现。对一些人来说,这个问题可能是交易的破坏者。
例子:
1)用户使用“add-more”按钮向表单集中添加两个新表单
2)用户填充表单并提交表单集
3)用户在浏览器中点击后退按钮
4)形式集现在减少到原来的形式,所有动态添加的形式不存在
这根本不是保罗剧本的缺陷;但是dom操作和浏览器缓存是一个现实。
我认为可以在会话中存储表单的值,并在表单集加载时再次创建元素并从会话中重新加载值;但这取决于你想要的相同用户和表单的多个实例,这可能会变得非常复杂。
有人有好的建议吗?
谢谢!
推荐文章
- 在Django模型中存储电话号码的最佳方法是什么?
- 如何禁用django-rest-framework的管理风格的可浏览界面?
- 如何获取请求。Django-Rest-Framework序列化器中的用户?
- 如何在Django模板中获得我的网站的域名?
- 在django Forms中定义css类
- 我应该在.gitignore文件中添加Django迁移文件吗?
- SQLAlchemy是否有与Django的get_or_create等价的函数?
- 如何选择一个记录和更新它,与一个单一的查询集在Django?
- Django REST框架:向ModelSerializer添加额外字段
- 如何在django上自动化createsuperuser ?
- 如何将Django QuerySet转换为列表?
- 如何直接从测试驱动程序调用自定义的Django manage.py命令?
- 在Python Django中运行单元测试时,如何禁用日志记录?
- Django CSRF检查Ajax POST请求失败
- 如何重命名一个模型字段使用南方?