[Answered ]-Crispy-forms add javascript sum of fields

by

1👍

✅

Your onchange event is on div not on input field instead as you are already using jquery you can change your selector to $("form select").on("change",.. this will get called whenever select inside form will changed and then use $(".select").. to iterate through selects inside div .

Demo Code :

//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>
👤Swati

Leave a comment