Django 表单的动态字段添加与删除

2023-04-11 00:00:00 字段删除表单

Django 表单的动态字段添加与删除能够通过 JS 实现。例如，可以使用 jQuery 的 append 和 remove 方法来实现动态添加和删除表单字段。

代码示例：

在 HTML 模板中，定义一个包含添加按钮和表单字段的 div 元素。该按钮的点击事件可以在 JS 中实现动态添加表单字段的逻辑。

<div id="fields">
    <input type="text" name="field1">
    <button id="add-field">Add Field</button>
</div>

在 JS 中，定义添加按钮的点击事件，使用 jQuery 的 append 方法添加一个新的表单字段。

$('#add-field').click(function() {
    var newField = '<input type="text" name="field2">';
    $('#fields').append(newField);
});

为了实现删除表单字段的逻辑，可以给每个表单字段添加一个删除按钮，并为每个删除按钮定义点击事件。在点击事件中，使用 jQuery 的 remove 方法删除对应的表单字段。

<div id="fields">
    <div class="field-wrapper">
        <input type="text" name="field1">
        <button class="delete-field">Delete Field</button>
    </div>
    <button id="add-field">Add Field</button>
</div>

$('#add-field').click(function() {
    var newField = '<div class="field-wrapper"><input type="text" name="field2"><button class="delete-field">Delete Field</button></div>';
    $('#fields').append(newField);
});

$(document).on('click', '.delete-field', function() {
    $(this).closest('.field-wrapper').remove();
});

在上述代码中，使用了 jQuery 的 on 方法来为删除按钮定义点击事件。这是因为在页面加载时，删除按钮并不存在，需要使用 on 方法来绑定事件处理函数。

这样，就实现了表单的动态字段添加和删除。在 Django 中，使用 POST 请求提交表单数据时，动态添加的字段将作为额外的数据一同提交。在视图函数中，可以使用 request.POST 来获取提交的数据。

相关文章