Django Formset与JavaScript交互：传递表单ID的正确姿势

{% for form in formset %}
    <button onclick="deleteFormFunc({{ form.form_id_test }})">
        Delete Form
    </button>
{% endfor %}

{% for form in formset %}
    {# 为每个表单实例创建一个容器，并赋予其唯一的ID #}
    <div id="{{ form.id }}" class="formset-item mb-3 p-3 border rounded">
        {{ form.as_p }} {# 渲染表单字段 #}

        <button type="button" class="btn btn-danger mt-2"
                onclick="deleteFormFunc('{{ form.id }}')">
            删除此表单
        </button>
    </div>
{% endfor %}

/**
 * 处理表单删除操作的JavaScript函数。
 * @param {string} formId - 要删除的表单的唯一HTML ID。
 */
function deleteFormFunc(formId) {
    console.log("收到删除请求，表单ID为:", formId);

    // 1. 通过ID获取表单的DOM元素
    const formElement = document.getElementById(formId);

    if (formElement) {
        // 2. 执行删除逻辑
        // 最常见的处理方式有以下几种：

        // a) 视觉上隐藏表单 (不实际删除，仅隐藏)
        formElement.style.display = 'none';
        console.log(`表单ID为 ${formId} 的元素已隐藏。`);

        // b) 对于Django Formset，通常是标记隐藏的DELETE字段
        //    这允许在提交整个Formset时，后端知道哪些表单被“删除”了。
        //    假设你的表单内部有一个隐藏的DELETE字段，其name属性以"-DELETE"结尾
        const deleteInput = formElement.querySelector(`[name$="-DELETE"]`);
        if (deleteInput) {
            deleteInput.value = 'on'; // 将DELETE字段的值设为'on'
            console.log(`表单ID为 ${formId} 的删除标记已设置。`);
        } else {
            console.warn(`未找到表单ID为 ${formId} 的DELETE字段。`);
        }

        // c) 发送AJAX请求到后端进行实际的数据库删除
        //    这通常需要后端提供一个删除API接口，并传递CSRF token。
        /*
        fetch('/your-delete-api-endpoint/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken') // 确保获取并发送CSRF token
            },
            body: JSON.stringify({ 'form_id_to_delete': formId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 如果后端删除成功，可以从DOM中彻底移除该表单
                formElement.remove();
                console.log(`表单ID为 ${formId} 已从DOM中移除。`);
            } else {
                alert('删除失败: ' + (data.message || '未知错误'));
                // 如果删除失败，可能需要恢复表单的显示状态
                formElement.style.display = '';
                if (deleteInput) deleteInput.value = '';
            }
        })
        .catch(error => {
            console.error('删除请求出错:', error);
            alert('网络错误或服务器异常，请稍后再试。');
            // 错误处理，恢复表单状态
            formElement.style.display = '';
            if (deleteInput) deleteInput.value = '';
        });
        */

    } else {
        console.error("错误：未找到ID为", formId, "的表单元素。");
    }
}

// 辅助函数：获取CSRF token (如果使用AJAX)
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}