crispy表单添加javascript字段总和_Javascript_Django_Django Crispy Forms

crispy表单添加javascript字段总和

javascript django

crispy表单添加javascript字段总和,javascript,django,django-crispy-forms,Javascript,Django,Django Crispy Forms,我想在我的模板中对选择结果的组进行动态求和。所有表单都是类似于models.py的选择字段 evolQuote = ( (1, 'High'), (0, 'Undetermine'), (-1, 'Low')) cycleMarket = models.IntegerField(choices=evolQuote, null=False, blank=False, default=0) news = models.IntegerField(choices=evolQuo

我想在我的模板中对选择结果的组进行动态求和。所有表单都是类似于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 %}

但控制台日志和始终等于零。

请在“第一表单组”字段中查找生成的代码：

<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.onchange，。。每当更改表单内的select，然后使用$.select时，将调用此函数。。要遍历div中的选择项

演示代码：

//论selct的变化 $form select.onchange，函数{ 总和=0； //循环选择 $.select.eachfunction{ console.log$this.val 总和+=数字$this.val； }; $1.valsum； } 自行车市场* 高的未定低的新闻* 高的未定低的管理职位* 高的未定低的基本原理：

您好，{form.cycleMarket | as_crispy_field}生成的html是什么行？我在我的代码中添加了一张现在的图片，上面写着：ReferenceError:找不到变量：$hi你能显示完整的错误吗？我认为这不适用于crispy_表单，因为crispy管理模板中字段的名称我们只是将输入用作选择器，不应该引起问题。如果您可以显示表单的html生成代码，那就更清楚了。只需编辑我在这个简洁的第一组表单上方的问题。我的所有字段都基于相同的生成html代码

<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>