脆皮形式添加 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 生成代码但在我的模板中不可见。不知道能不能看到我的组名？
1 个答案:
答案 0 :(得分：1)
您的 onchange 事件在 div 上，而不是在输入字段上，因为您已经在使用 jquery，您可以将选择器更改为 $("form select").on("change",..，每当表单中的 select 发生更改时，它就会被调用，然后使用 $(".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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？