我想动态地向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);
}
其他回答
另一个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);
}
模拟和模仿:
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>字段,并且大约知道脚本必须做什么,但我不记得我头顶上的细节。我上面所描述的就是我在你的情况下会做的事情。
是的,如果你有有限数量的条目,我也建议在html中渲染它们。(如果你不这样做,你将不得不使用另一个方法)。
你可以像这样隐藏它们:
{% for form in spokenLanguageFormset %}
<fieldset class="languages-{{forloop.counter0 }} {% if spokenLanguageFormset.initial_forms|length < forloop.counter and forloop.counter != 1 %}hidden-form{% endif %}">
然后js真的很简单:
addItem: function(e){
e.preventDefault();
var maxForms = parseInt($(this).closest("fieldset").find("[name*='MAX_NUM_FORMS']").val(), 10);
var initialForms = parseInt($(this).closest("fieldset").find("[name*='INITIAL_FORMS']").val(), 10);
// check if we can add
if (initialForms < maxForms) {
$(this).closest("fieldset").find("fieldset:hidden").first().show();
if ($(this).closest("fieldset").find("fieldset:visible").length == maxForms ){
// here I'm just hiding my 'add' link
$(this).closest(".control-group").hide();
};
};
}
Paolo的建议很好用,但有一点需要注意——浏览器的后退/前进按钮。
如果用户使用后退/前进按钮返回到表单集,那么用Paolo的脚本创建的动态元素将不会被呈现。对一些人来说,这个问题可能是交易的破坏者。
例子:
1)用户使用“add-more”按钮向表单集中添加两个新表单
2)用户填充表单并提交表单集
3)用户在浏览器中点击后退按钮
4)形式集现在减少到原来的形式,所有动态添加的形式不存在
这根本不是保罗剧本的缺陷;但是dom操作和浏览器缓存是一个现实。
我认为可以在会话中存储表单的值,并在表单集加载时再次创建元素并从会话中重新加载值;但这取决于你想要的相同用户和表单的多个实例,这可能会变得非常复杂。
有人有好的建议吗?
谢谢!
对于那些正在寻找资源以更好地理解上述解决方案的程序员:
Django动态表单
读完上面的链接后,Django文档和以前的解决方案应该更有意义了。
Django Formset文档
作为对我所困惑的内容的快速总结:管理表单包含其中表单的概述。你必须保证这些信息的准确性,这样Django才能知道你添加的表单。(社区,如果我的一些措辞不正确,请给我建议。我刚接触Django。)
推荐文章
- Django模型表单对象的自动创建日期
- 错误:“字典更新序列元素#0的长度为1;2是必需的”
- 改变Django的SECRET_KEY的效果
- 当Django只启动一次时执行代码?
- Django设置“SECRET_KEY”的目的是什么?
- 以编程方式将图像保存到Django ImageField中
- 嵌入YouTube视频-拒绝在帧中显示,因为它将“X-Frame-Options”设置为“SAMEORIGIN”
- django test app error -在创建测试数据库时出现错误:创建数据库的权限被拒绝
- django MultiValueDictKeyError错误,我如何处理它
- 我如何在Django中创建一个鼻涕虫?
- 没有名为'django.core.urlresolvers'的模块
- Django - makemigrations -未检测到任何更改
- ">", "<", ">=" 和“< =”不工作”在Django过滤()”
- Django项目工作目录结构的最佳实践
- 如何在Django中表达一对多关系?