'How to display total value of dropdown select boxes

I am trying to sum up all values in dropdown select boxes from duplicated forms.

Javascript Code (Gives me the count but it's not working as it should).

<script>
function onChange(elem) { 
    document.getElementById("clicks").innerHTML = clicks + Number(elem.value);    
    };
</script>

HTML (Button to duplicate a form)

<div class="card-header">
<h4 class="request-title">
    Request Temps
    <button onClick="onClick()">ADD</button>
</h4>
    <p class="request">Number <a id="clicks">0</a></p>
</div>

Main form

<form action="<?php echo '/request-temp/'; ?>" method="post">
<div class="col7">
<div class="form-group mb-2">
        <label>Select Repetition</label> <br>
        <select id="ddlViewBy"  name="repetition[]" onChange="onChange(this)">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
</div>
</div>
<button type="submit" name="save-multiple-data">Submit</button>
</form>

When you click ADD button as indicated above, it duplicates the above form using this Javascript code:

<script> 
$(document).ready(function(){
$(document).on('click', '.remove-btn', function() {
    $(this).closest('.main-form').remove();
});
    $(document).on("click", ".add-more-form", function() {
        $('.paste-new-forms').append('
        <div class="container-fluid main-form mt-3 border-bottom">\
            <div class="row">\
                <div class="col7">\
                    <div class="form-group mb-2">\
                        <label>Select Repetition</label> <br>\
                        <select id="ddlViewBy" name="repetition[]" onChange="onChange(this)">\
                            <option value="1">1</option>\
                            <option value="2">2</option>\
                            <option value="3">3</option>\
                            <option value="4">4</option>\
                            <option value="5">5</option>\
                        </select>\
                        <button onClick="onUnClick()" type="button" class="btn-danger">X</button>\
                    </div>\
                </div>\
            </div>\
        </div>');
    });
});
</script>

The challenge: After duplicating the form, I need the total count of values selected in dropdowns inside the select boxes for all duplicate forms. The total.

Right now, what I have achieved is basically getting the value of each dropdown which displays inside the <p class="request"> </p> above. The moment I select a value for another dropdown, the count changes to the current value of new dropdown instead of summing up the value of all of them. So I am basically getting the value of a single dropdown instead of the total sum in all dropdowns. How can I get the total count?

javascripthtml


Solution 1:[1]

A solution that I found was to store the value of each dropdown in a global variable, so supposing that you don't want to increase the value if the same dropdown is selected twice, you can do the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="src/style.css">
</head>

<body>
   <! –– Include this property with false as default when generating your dropdown ––>
  <select onChange="onChange(this)">
    <option value="default" selected disabled hidden>Choose a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  
  <select onChange="onChange(this)">
    <option value="default" selected disabled hidden>Choose a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  
  <select onChange="onChange(this)">
    <option value="default" selected disabled hidden>Choose a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <div>
    <p>Current selection <a id="clicks"></a></p>
    <p>Total:  <a id="total">0</a></p>
  </div>
  <div>
    <button onClick="resetTotal()">reset total value</button>
  </div>
</body>

  <script>
    // global variable
    let totalValue = 0
    
    function onChange(elem) { 
      const select = elem
      
      // sum the value
      totalValue += Number(select.value)
      // update the DOM
      document.getElementById("total").innerHTML = Number(totalValue);
      document.getElementById("clicks").innerHTML = Number(select.value);
      // disable selection, so you don't sum the same dropdown twice.
      select.disabled = true
    };

    // reset to default after selecting all dropdowns
    function resetTotal() {
      totalValue = 0;
      const selects = document.getElementsByTagName("select")
      
      for(let i=0; i < selects.length; i++) {
        // set selected option to default
        selects.item(i).selectedIndex = 0
        selects.item(i).disabled = false
      }
      document.getElementById("clicks").innerHTML = "";
      document.getElementById("total").innerHTML = Number(totalValue);
    }
  </script>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions