javascript - Krispy-forms 添加 javascript 字段总和
问题描述
我想在我的模板中动态汇总选择选择结果组。所有表单都是这样的选择字段(models.py)
evolQuote = (
(1, 'High'),
(0, 'Undetermine'),
(-1, 'Low'))
cycleMarket = models.IntegerField(choices=evolQuote, null=False, blank=False, default=0)
news = models.IntegerField(choices=evolQuote,null=False, blank=False)
我的模板是:
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}
{% block content %}
<head>
<style>
input {max-width: 10em};
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// function
$("form select").on("change", function() {
console.log("say hello")
sum = 0;
//loop through selects
$(".select").each(function() {
console.log($(this).val())
sum += Number($(this).val());
});
console.log(sum)
$("#fundamentals").val(sum);
})
</script>
</head>
<h3>Valuation {{ typeVal }} </h3>
<form method="post">{% csrf_token %}
<div class="col-md-8">
<div class="row">
<div class="col">
<h7>Market trend</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="marklRate" name="markRate">
</div>
</div>
<div class="form-row border">
<div class="form-group col-md-2 mb-0" name="market-1">
{{ form.cycleMarket|as_crispy_field }}
</div>
<div class="form-group col-md-2 mb-0" name="market-2">
{{ form.news|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="market-3">
{{ form.managementPostion|as_crispy_field }}
</div>
<div class="form-group col-md-2 mb-0" name="market-4">
{{ form.short|as_crispy_field }}
</div>
</div>
<br>
<div class="row">
<div class="col">
<h7>Analysts advice</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="analRate" name="analRate">
</div>
</div>
<div class="form-row border" >
<a href="https://www.barchart.com/stocks/quotes/{{ stck.codeBarchart }}/overview" class="form-group col-md-3 mb-0" target="_blank" rel="noopener noreferrer" name="analyst-1">
{{ form.BARCHART_analysts|as_crispy_field }}
</a>
<a href="https://www.tradingview.com/symbols/{{ stck.codeTradingviews }}" class="form-group col-md-4 mb-0" target="_blank" rel="noopener noreferrer" name="analyst-2">
{{ form.TRADINGVIEW_analysts|as_crispy_field }}
</a>
<a href="https://www.investing.com/{{ stck.codeInvesting }}" class="form-group col-md-3 mb-0" target="_blank" rel="noopener noreferrer" name="analyst-3">
{{ form.INVESTING_analysts|as_crispy_field }}
</a>
</div>
<br>
<div class="row">
<div class="col">
<h7>Indicators</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="indRate" name="indRate">
</div>
</div>
<div class="form-row border" >
<div class="col col-md-2 mb-0" name="indicator-1">
{{ form.parabolics|as_crispy_field }}
</div>
<div class="col col-md-2 mb-0" name="indicator-2">
{{ form.trix|as_crispy_field }}
</div>
<div class="col col-md-2 mb-0" name="indicator-3">
{{ form.arron|as_crispy_field }}
</div>
<div class="col col-md-2 mb-0" name="indicator-4">
{{ form.macd|as_crispy_field }}
</div>
<div class="col col-md-4 mb-0" name="indicator-5">
{{ form.moving_average_cross_up|as_crispy_field }}
</div>
</div>
<br>
<div class="row">
<div class="col">
<h7>Graphs</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="graphRate" name="graphRate">
</div>
</div>
<div class="form-row border" >
<div class="form-group col-md-4 mb-0" name="graph-1">
{{ form.graph_trend|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-2">
{{ form.graph_support|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-3">
{{ form.graph_mean15_30|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-4">
{{ form.candels|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-5">
{{ form.confirm_figure|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-6">
{{ form.graph_weeks|as_crispy_field }}
</div>
</div>
<br>
<div class="row">
<div class="col">
<h7>Fundamentals</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="fundamentals" name="fundamentals">
</div>
</div>
<div class="form-row border" >
<div class="form-group col-md-3 mb-0" name="fundamentals-1">
{{ form.fond_PE|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="fundamentals-2">
{{ form.fond_Profit_NextYear|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="fundamentals-3">
{{ form.fond_Profit_NextYear_dollars|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="fundamentals-4">
{{ form.fond_revenues_NetYear|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="fundamentals-5">
{{ form.fond_revenues_NetYear_dollars|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="fundamentals-6">
{{ form.fond_BARCHART_analyst_estimates|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="fundamentals-6">
{{ form.date_BARCHART_earnings|as_crispy_field }}
</div>
</div>
<br>
<input type="submit" class="btn btn-primary" value="Save">
</div>
</form>
{% endblock content %}
我的尝试javascript:
function sumamount(){
sum=0;
$("input[name^='market-']").each(function(){
sum+=Number($(this).val());
});
console.log(sum)
$("#fundamentals").val(sum);
}
请从第一个表单组(cyclMarket 字段)中找到生成的代码:
<div class="form-group col-md-2"> name="market-1">
<div id="div_id_cycleMarket" class="form-group">
<label for="id_cycleMarket" class=" requiredField">
CycleMarket<span class="asteriskField">*</span>
</label>
<div class>
<select name="cycleMarket" class="select form-control" id="id_cycleMarket">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
Cryspy 生成代码但在我的模板中不可见。并且不知道它是否可以看到我的组形式名称?
解决方案
您的onchange事件在 div 上而不是在输入字段上,因为您已经在使用 jquery 您可以将选择器更改$("form select").on("change",..
为每当 select inside form 发生更改时都会调用它,然后用于 $(".select")..
遍历 div 内的选择。
演示代码:
//on change of selct
$("form select").on("change", function() {
sum = 0;
//loop through selects
$(".select").each(function() {
console.log($(this).val())
sum += Number($(this).val());
});
$("#fundamentals").val(sum);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<div id="div_id_cycleMarket" class="form-group">
<label for="id_cycleMarket" class=" requiredField">
CycleMarket<span class="asteriskField">*</span>
</label>
<div class>
<select name="cycleMarket" class="select form-control" id="id_cycleMarket">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
<div id="div_id_news" class="form-group">
<label for="id_news" class=" requiredField">
news<span class="asteriskField">*</span>
</label>
<div class>
<select name="news" class="select form-control" id="id_news">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
<div id="div_id_managementPostion" class="form-group">
<label for="id_managementPostion" class=" requiredField">
managementPostion<span class="asteriskField">*</span>
</label>
<div class>
<select name="managementPostion" class="select form-control" id="id_managementPostion">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
fundamentals :
<input type="text" id="fundamentals">
</form>
推荐阅读
- android - 如何使用 firebase 数据库创建单独的登录帐户?
- c++ - C++:使用后缀设置时间
- php - 比较两个目录,哪个目录具有每个文件的最新版本?
- typescript - 类装饰器上的打字稿文档-返回“类扩展构造函数{}”的函数
- python - 在 Python 3 中执行 bash 命令
- html - 如何使用网格引导导航?
- javascript - 如何仅使用纯 Javascript 代码从 HTML 页面上的目录中列出文件
- maven - Netbeans 11 - Maven 和 JavaFX - javafx.application 不存在
- php - 我需要帮助使提交按钮仅在您在文本框中输入时出现
- c# - 将 LINQ-to-JSON 查询从 c# 转换为 VB.NET 后如何解决 InvalidCastException?