crispy-表单添加javascript字段总和
基础概念
crispy-forms 是一个 Django 应用程序，它允许你使用 Bootstrap 或 Foundation 等 CSS 框架来美化 Django 表单。它通过提供一组模板标签和过滤器来简化表单的呈现过程。
相关优势
- 简化模板代码：通过使用 crispy-forms，你可以减少模板中的 HTML 和 CSS 代码量。
- 响应式设计：与 Bootstrap 或 Foundation 等框架集成，使得表单在不同设备上都能良好显示。
- 易于定制：可以轻松地自定义表单的布局和样式。
类型
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>3. 解释
- 表单定义：定义了一个包含三个整数字段的 Django 表单。
- 模板：使用
crispy-forms标签来美化表单，并添加一个只读的输入框来显示总和。 - JavaScript：使用 jQuery 监听数字字段的输入事件，计算所有数字字段的总和并更新到只读输入框中。
参考链接
通过这种方式，你可以在使用 crispy-forms 美化表单的同时，动态计算字段的总和。
相关·内容
所有表单都是如下所示的选择字段(models.py) evolQuote = ( (0, 'Undetermine'),cycleMarket{% endblock content %} 我的尝试javascript请从first form-group (cyclMarket字段)中查找生成的代码： name="market-1">
浏览 73提问于2021-02-20得票数 1
回答已采纳
我有一个由crispy- ModelForm模块呈现的Django表单(带有密码输入)。
每次我提交表单时，浏览器都会询问是否应该记住密码。我在这里找到了一个可能的解决方案： ...but如何将属性添加到易碎的表单(而不是输入)？
浏览 3提问于2016-09-02得票数 0
我有像这样的动态表单：<div class="row"><input type="text" disabled id="total" name="tot"></
浏览 0提问于2012-07-12得票数 1
回答已采纳
3回答
我想向输入字段添加验证。我正在使用react钩子表单。验证应该类似于字段的总和应该是100。如果任何字段的总和大于或小于100，则应在输入字段(最后编辑的字段)显示错误。
浏览 33提问于2020-11-27得票数 1
1回答
我有一个表单，它计算一组用户输入值的总和和平均值。用户可以动态地添加输入字段，这样他们就可以找到任意多个数据值的总和和平均值。我试图证明，如果他们碰巧添加了一个字段，但将其保留为空白，则该输入字段将在计算中被忽略。当当前空白时，表单返回'NaN，NaN‘。我试过这个
$(':input[value=""]').attr('name', '');
浏览 2提问于2016-01-09得票数 1
回答已采纳
3回答
使用从单个数据库表自动生成的表单。该表单使用包含在WizBtns中的类c:\Program Files\Microsoft Visual FoxPro 9\Wizards。尽管表单中只有文本框来输入表中字段的数据，但我已经从工具箱中添加了一个自定义文本框，它主要用于显示某些字段的总和。现在的问题是更新文本框中的字段之和，或者只是更新costTotal的值。在哪里为这个添加代码？在窗体的刷新方法中添加代码会混淆cost
浏览 2提问于2011-12-12得票数 1
1回答
我已经创建了一个表单，里面有不同的字段(文本框，复选框，上传)，用户应该完成。我还创建了连接在表单上的db表。我需要为表单的每个字段分配一个数字值，并根据用户填写了多少字段来计算这些字段的最终总和。例如:如果每个字段都填满了，则和将是100，否则将是<100的数值。我认为这是必需的javascript代码，但我不太了解它来解决我的问题。
浏览 0提问于2014-07-11得票数 1
我有一个数据库，其中包含一个带有查找字段的表(tblQA)。该查找字段(CPT)包含4个值: Pass、NonPass、FYI和Both。(按照这个顺序，所以NonPass的id值是2)我有一个连续的表单，它基于一个查询，该查询为我提供特定用户在某个日期日期范围内的记录。我想要做的是能够对返回为NonPass的记录总数求和。我还尝试为连续表单中的每个记录包含一个文本字段，并打开一些VBA按钮，以便在文本框中将任何值2转换为1，然后我将对文本框进行求和，但这也不起作用，我想是因为每个文本框都是相同的名称，所
浏览 7提问于2018-08-22得票数 0
回答已采纳
我有一个表单，其中有一组可以添加和删除的字段。其中一个字段包含一组数字，这些数字相加后得到一个总和。你可以在这里看到一个例子：
这就是我的问题:当我在第一次加载表单时选择一个不同的数值时，总和不会改变，而且只有一组字段(没有添加任何内容)。只有在我添加或删除字段后，它才会发生变化。
浏览 1提问于2012-07-21得票数 0
4回答
我有将近100个HTML下降在一个表单内，在提交之前，我想从所有的下拉框中计算所选值的总和。目前，它不起作用。jQuery: var fields = $('#addFullAuditReportthis).val(); $('#price').html(score.toFixed(2));
}
浏览 4提问于2016-02-21得票数 0
回答已采纳
如何使用这些JavaScript或jquery数学函数？
例如，我想要计算表单中所有值的总和，而不需要添加表单或单击按钮。我有4个输入字段，我想把它们的结果添加到另一个输入或段落中。
浏览 4提问于2015-09-10得票数 0
回答已采纳
我有一个表单，在表单中我有一个对象(工作表)，其中包含excel文件。然后我有一个按钮，它可以计算工作表中字段的总和，并在表单的字段中显示总和。我该如何编码呢？
浏览 0提问于2012-04-20得票数 0
我有一个表单链接到Access中的表。我有一个额外的字段，它显示表中几个字段的总和。表单上的此域未连接到表。我已经在窗体上显示了总和，但我注意到，直到我离开并导航到另一条记录并返回到原始记录时，总和才会出现。当我在相应的字段中输入值时，我看不到增加的内容。
有人能帮助解决这个问题吗？
浏览 0提问于2013-04-24得票数 1
回答已采纳
1回答
我是Javascript的新手，正在尝试将计算输入的表单组合在一起。到目前为止，我已经获得了显示的总值，但它显示为0，而不是每个具有输入的字段的总和。<label>Total</label></div> 预期结果:应在输入数字时计算总和并非所有字段都需要输入。<em
浏览 10提问于2019-05-13得票数 2
回答已采纳
我使用Laravel 5的特性来验证表单输入。我需要确保这两个字段的总和不超过某个值。我尝试的是在验证文件的rules()函数中，我使用merge()人为地添加了一个新的输入值，即num_adults和num_children的总和。
浏览 1提问于2015-12-04得票数 2
回答已采纳
我为12种口味中的每一种都有一个数字输入字段，如下面的截图所示。 ? 我可以使用JavaScript来限制每个单独的数字字段不超过12，但我正在尝试在其他输入字段禁用的情况下，一旦所有字段的总和达到最大值12。 下面的代码是我用来获取所有字段总和的代码。但目前，它只能阻止单个字段上的数字在达到12个字段时的增加。我想防止添加超过12从所有领域的总和，这将完成12个百吉饼的盒子
浏览 3提问于2021-08-27得票数 0
我正在寻找一种方法来将一组数字舍入到最接近的有理数，同时仍然保留该集合的总和。假设我想将总数分布在三个字段中。我想用Jquery/javascript来实现。我有一个动态添加字段的表单。默认情况下，合计在每个字段中均匀分布，但是我的问题更加复杂，因为值通常不会在所有字段中平均共享。有些值的权重可能更大。
浏览 0提问于2010-10-17得票数 4
1回答
我需要知道如何从大约10个文本字段中添加值，添加和onChange，并让它给我一个表单内的另一个文本字段的总和。因此，当我点击提交时，文本字段"total“将与表单示例一起发送：<input name="qty" type="text" size="8" />
<input name="qty2
浏览 0提问于2013-06-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
对象存储
云直播活动推荐
腾讯云开发者
