Django 实现表单填写的取消功能

写在前面

在 Web 开发中，表单是用户与应用程序进行交互的关键组件之一。在 Django 中，我们可以通过多种方式实现表单填写的取消功能。本文将介绍三种常见的实现方法，包括直接跳转 URL、JavaScript 清空表单内容、以及关闭模态框。

方案一：直接跳转 URL

这是最简单的取消功能实现，即直接跳转到另一个 URL，放弃当前表单填写。通过在取消按钮上设置链接地址，用户点击取消按钮时将直接跳转至指定的 URL，完成取消操作。该方法虽然简单，但无法实现动态交互，每个取消按钮需要硬编码对应的 URL。

<a href="{% url 'cancel_url' %}" class="btn btn-secondary">取消</a>

方案二：使用JavaScript 清空表单内容

通过在取消按钮上绑定相应的 JavaScript 函数，我们可以获取表单元素并将其内容重置为空。该方法无需页面刷新，通过前端 JavaScript 可以动态清空表单内容。（这方法比较好用）

<button type="button" class="btn btn-secondary" onclick="clearForm()">取消</button>

<script>
    function clearForm() {
        var form = document.querySelector('.profile-form');
        form.reset();
        alert('表单内容已清空！');
    }
</script>

方案三：关闭模态框

如果使用模态框来展示表单，那么我们可以通过关闭模态框的方式实现取消功能，当然，这需要根据使用的模态框库或框架进行相应的调用。该方法适用于使用模态框展示表单的场景，用户体验好！

这里我们举个使用 Bootstrap 的模态框的例子：

<button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>


<!-- 引入 Bootstrap 的 JavaScript 文件 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<script>
    function closeModal() {
        // 使用 Bootstrap 提供的方法关闭模态框
        $('#exampleModal').modal('hide');
    }
</script>

注意，如果你使用的不是 Bootstrap，而是其他库或自定义的模态框，那么需要查看相应的文档以获取关闭模态框的正确方法。