如何解决Django 动态表单集添加按钮不起作用
我刚接触 Django 和 Web 开发。我按照本教程 https://engineertodeveloper.com/dynamic-formsets-with-django/ 在我的 Django 项目中实现动态表单集。我还不太了解 Javascript,所以有人可以帮助我吗?我在我的 Django 应用程序中编写了相同的 javascript 代码,我的模板与教程的模板非常相似,我使用了相同的 id 识别 HTML 标签,但“添加另一个图像”按钮对我不起作用。当点击它时,什么也没有发生,另一方面,“删除”按钮工作正常。我的主表单和表单集与教程的主表单和表单集不同。我的表单和我的表单集各有三个字段。
查看控制台时会出现此消息:
“未捕获的 DOMException:无法在 'Node' 上执行 'insertBefore':要在其之前插入新节点的节点不是该节点的子节点。 在 HTMLButtonElement。”
Javascript 作者:https://engineertodeveloper.com/dynamic-formsets-with-django/
const imageForm = document.getElementsByClassName("image-form");
const mainForm = document.querySelector("#pet_form");
const addImageFormBtn = document.querySelector("#add-image-form");
const submitFormBtn = document.querySelector('[type="submit"]');
const totalForms = document.querySelector("#id_form-TOTAL_FORMS");
let formCount = imageForm.length - 1;
function updateForms() {
let count = 0;
for (let form of imageForm) {
const formRegex = RegExp(`form-(\\d){1}-`,'g');
form.innerHTML = form.innerHTML.replace(formRegex,`form-${count++}-`)
}
}
addImageFormBtn.addEventListener("click",function (event) {
event.preventDefault();
const newImageForm = imageForm[0].cloneNode(true);
const formRegex = RegExp(`form-(\\d){1}-`,'g');
formCount++;
newImageForm.innerHTML = newImageForm.innerHTML.replace(formRegex,`form-${formCount}-`);
mainForm.insertBefore(newImageForm,submitFormBtn);
totalForms.setAttribute('value',`${formCount + 1}`);
});
mainForm.addEventListener("click",function (event) {
if (event.target.classList.contains("delete-image-form")) {
event.preventDefault();
event.target.parentElement.remove();
formCount--;
updateForms();
totalForms.setAttribute('value',`${formCount + 1}`);
}
});
我的模板
<div class="row">
<div class="col-6 offset-md-3">
<form id="pet_form" method="post" action="." enctype="multipart/form-data">
{% csrf_token %}
{{ form_membro|crispy }}
{{ formset.management_form }}
{% for form in formset %}
<div class="image-form d-flex justify-content-between">
{{ form.nome_usuario }}
{{ form.cpf }}
{{ form.lattes }}
<button class="align-self-center btn btn-danger delete-image-form">Delete</button>
</div>
{% endfor %}
<input type="submit" name="submit" value="Submit" class="btn btn-primary" />
<button id="add-image-form" class="btn btn-primary my-3">Add Another Image</button>
</form>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。