crispy-表单添加javascript字段总和

基础概念

crispy-forms 是一个 Django 应用程序，它允许你使用 Bootstrap 或 Foundation 等 CSS 框架来美化 Django 表单。它通过提供一组模板标签和过滤器来简化表单的呈现过程。

类型

crispy-forms 支持多种类型的表单布局，包括：

Inline Form：所有字段都在一行显示。
Stacked Form：每个字段都在单独的一行显示。
Horizontal Form：字段和标签分别在两列显示。

应用场景

适用于需要美观且响应式的表单的 Django 项目，特别是在 Web 开发中需要处理大量用户输入的场景。

添加 JavaScript 字段总和

假设你有一个表单，其中包含多个数字字段，并希望计算这些字段的总和。你可以通过以下步骤实现：

1. 定义 Django 表单

# forms.py
from django import forms

class MyForm(forms.Form):
    field1 = forms.IntegerField()
    field2 = forms.IntegerField()
    field3 = forms.IntegerField()

2. 在模板中使用 crispy-forms

<!-- template.html -->
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form with Sum</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <form method="post">
            {% csrf_token %}
            {{ form|crispy }}
            <div class="form-group">
                <label for="id_sum">Sum:</label>
                <input type="text" id="id_sum" class="form-control" readonly>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            function updateSum() {
                var sum = 0;
                $('input[type="number"]').each(function() {
                    sum += parseFloat($(this).val()) || 0;
                });
                $('#id_sum').val(sum);
            }

            $('input[type="number"]').on('input', updateSum);
        });
    </script>
</body>
</html>