crispy-forms 添加 javascript 字段总和
crispy-forms add javascript sum of fields
我想在我的模板中动态地汇总 select 选择结果组。
所有表格都是 select 字段,如下所示 (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 您可以更改 select 或者到 $("form select").on("change",..
这将在 select 内部表单发生更改时调用,然后使用 $(".select")..
遍历 div 中的 selects .
演示代码 :
//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>
我想在我的模板中动态地汇总 select 选择结果组。 所有表格都是 select 字段,如下所示 (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 您可以更改 select 或者到 $("form select").on("change",..
这将在 select 内部表单发生更改时调用,然后使用 $(".select")..
遍历 div 中的 selects .
演示代码 :
//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>