Totaling values from multiple selection boxes in javascript

Question

Totaling values from multiple selection boxes in javascript

James Curran 26

Hi all, I believe this to be a simple problem, but it has had me struggling for a while. I have posted 3 different ways I have tried to solve it, but to no avail. Basically, I have filled a table with selection boxes based on how much data I have in a database. I would like to do a number of things with the data that the user has selected in the selection boxes. The first task I would like to do is total the individual values. I will later use individual values that I have selected for some analysis.

The problem I am having is that I cannot read what has been selected. I can either read the value of the first selection box only or I can get the values of all the options in all of the drop down boxes. I have tried lots of variations. I will code dump

<!DOCTYPE html>
<html lang="en">
<head>
<title>Beverages</title>ghjgh
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="wa-top">

<div class="wa-bar wa-blue wa-card wa-right-align wa-large">
<a class="wa-bar-item wa-button wa-hide-medium wa-hide-large wa-right wa-padding-large wa-hover-white wa-large wa-blue" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="wa-bar-item wa-button wa-padding-large wa-white">Home</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Beverages</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Link 2</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Link 3</a>
<a href="#" class="wa-bar-item wa-button wa-hide-small wa-padding-large wa-hover-white">Link 4</a>
<div class="logo"><a href="../home.html" class="wa-logo"><img src="images/17GLogo.png" alt="17g Webapp" /></a></div>

<div id="navDemo" class="wa-bar-block wa-white wa-hide wa-hide-large wa-hide-medium wa-large">
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 1</a>
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 2</a>
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 3</a>
<a href="#" class="wa-bar-item wa-button wa-padding-large">Link 4</a>
</div>
</div>
<div class="container mt-5">
<% if (messages.success) { %>
<p class="alert alert-success mt-4"><%- messages.success %></p>
<% } %>
<br />
<table class="table">
<thead>
<tr>
<th scope="col">#Id</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">Milk</th>
</tr>
</thead>
<tbody>
<% if(data.length){ for(var i = 0; i< data.length; i++) {%>
<tr>
<th scope="row"><%= (i+1) %></th>
<td><%= data[i].name%></td>
<td>$ <%= data[i].price%></td>

         <td>  
      <form action="insertlabel.php" id="privtelabel" method="POST">  

          <label for="quantity" ></label>  
          <select id="quantity1">   
            <option value="0">0</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>  
          <td>  
   <select name='milk' id='milk'>  
    <option value="Regular Milk">Regular Milk</option>  
    <option value="Oat Milk">Oat Milk</option>  
    <option value="Light Milk">Light Milk</option>  
    </select>  
  </td>  
</form>  
        </td>  
        </tr>  
        <% } }else{ %>  
        <tr>  
          <td>No record found</td>  
        </tr>  
        <% } %>  
        <tr>  
          <td>Total Price: <span id="totalCost"></span></td>  
        </tr>  
      </tbody>  
        
    </table>  
     <!-- <script>

/* function myFunction() {
var x = document.getElementById("btn");
x.disabled = true;
} */
$(document).ready(function(){

        total_cost = 0;  
        alert(total_cost)  
          $('#quantity option').each(function(){  
             total_cost = total_cost + parseInt($(this).val())  
          })  
         alert(total_cost)  
      }) -->      
  <head>  
      

    <script>

function addExtrasCost()
{
var total_cost = 2;
alert(total_cost);
oSels = document.getElementById('quantity').getElementsByTagName("quantity");
alert(oSels);
for (i=0; i< oSels.length; i++){

  alert(i);  
    
}  

}

function getI(){
total_cost = 0;

    $('#quantity1').each(function(){  
       total_cost = total_cost + parseInt($(this).val());          
    })  
    alert(total_cost);  
}  

function getJ(){  
  total_cost = 0;    
  $('#quantity1').each(function(index,value){        
       total_cost = total_cost + parseInt($(this).val());    
       alert(value.value);  
    })  
    alert(total_cost);  
}  

function getK(){  
  total_cost = "";  
    selects = document.querySelectorAll("form");  
    alert(selects.length)  
      for( let i = 0; i < selects.length; i++){  
        num = selects[i].value;  
        total_cost = total_cost + num;  
          
      }  
      alert(total_cost);  
}  
    </script>  
    </head>  
    <body>    
    <button onclick ="getK()">Order</button>   
    </body>  
  </div>

</body>
</html>

Accepted answer

0 additional answers

Your answer

Answer 1

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @James Curran ,
Sorry, apparently I misunderstood your layout.
You change

const collection = document.forms['privtelelabel'].getElementsByTagName('select');

to

const collection = document.getElementsByTagName('select');

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2022-11-10T06:49:10.34+00:00
Hi @James Curran ,

You should want to add all the values of quantity1.
You can refer to the code below.
First get the select boxes you need to get. Then calculate the length of the options. Then iterate over the values of the options.

function ge t K ( ) { total_cost = 0; var list = document.getElementById("quantity1"); alert(list.options.length); for (let i = 0; i < list.options.length; i++) { num =parseInt(list.options[i].text); total_cost = total_cost + num; } alert(total_cost); }

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
James Curran 26 Reputation points

2022-11-10T16:19:04.817+00:00

Thank you for the reply Lan. I have run the code, and have had very similar before. This totals all of the values from one individual selection box, ie 0+1+2+3+4+5 and so it displays 15.

However, if select box one is 3 and the third select box is 2, then it should display 5. Instead, it still displays 15. How do I access the selected value from each box?
James Curran 1 Reputation point

2022-11-10T16:38:19.123+00:00

@Lan Huang-MSFT

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @James Curran ,
Sorry, at first I thought you need to calculate all the values of the select box.
If you just want to count the selected value, you can look for the <select> tag in the form and change i to selectedIndex .
For details, you can view the code below.

function getK(){         
            total_cost = 0;  
            const collection = document.fo rms['privtelabel'].getElementsByTagName('select');  
            for (let i = 0; i < collection.length; i++) {  
                var e = collection[i];  
                var num = parseInt(e.options[e.selectedIndex].text) || 0;  
  
                total_cost = total_cost + num  ;  
            }  
            alert(total_cost);  
                      
        }

Best regards,
Lan Huang

James Curran 26 Reputation points

2022-11-14T11:01:22.777+00:00
@Lan Huang-MSFT - thank you again for the reply, and for taking the time to help. This gives the total of one of the selection boxes in the table, but each row has a different selection element. I wanted to add the total of all elements.

the .getElementbyID("quantity") only selects one element. But as

<% if(data.length){ for(var i = 0; i< data.length; i++) {%>
<tr>
<th scope="row"><%= (i+1) %></th>
<td><%= data[i].name%></td>
<td>$ <%= data[i].price%></td>

<td> <form action="insertlabel.php" id="privtelabel" method="POST"> <label for="quantity" ></label> <select id="quantity1"> <option value="0">0</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> <td>

generates one selection box per row, I do not know how to iterate over the table and select the value of each box in each row, which I could then total. I was hoping a function such as getElementsbyTagName("quantity") would get all of them, but it does is get the first selection box in the table. I edited your function to test with

var list = document.getElementById("quantity1"); alert(list.options.length);

and the length came up as 1.

How do I get this to select ALL of the boxes so I can iterate over them all?
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2022-11-15T01:25:10.507+00:00

Hi @James Curran ,
I wrote a new workaround in the comments based on your needs, did you check it?

Best regards,
Lan Huang
James Curran 1 Reputation point

2022-11-15T08:23:18.44+00:00

@Lan Huang-MSFT - yes I tried this and it still only adds the first box in the table, ie the row 1 selection box selected value.

I put alert(i) in the loop at it displays one box with 0 and nothing else.

I changed

var e = collection[i];
to
var e = collection[2];

and changed each of the numbers in the selection's boxes selected numbers to something different. No alert box displayed. I am therefore sure that the line

const collection = document.forms['privtelabel'].getElementsByTagName('select');

is only selecting the first selection box. I have no idea why though.
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2022-11-15T08:53:53.943+00:00
Hi @James Curran ,
I'm not sure how many select boxes you have, have you tried looking for the "milk" select box and see if you can find it?

const collection = document.forms['privtelabel'].getElementsByTagName('select');

This line of code finds the select tag in the form named privtelelabel.

I suggest you use the f12 developer tools to see where the problem is.
James Curran 1 Reputation point

2022-11-15T09:31:14.287+00:00

@Lan Huang-MSFT I checked in sources and no error occurs.

I have attached an image; the page has each selection box in a different row, as opposed to the same row.
James Curran 1 Reputation point

2022-11-15T09:31:41.947+00:00

As you can see, I have selected 3 then 4, but get a total of 3.
James Curran 1 Reputation point

2022-11-15T09:55:25.23+00:00

Ahh, so simple.

Thank you so much for taking the time to help.

It has made a huge difference. @Lan Huang-MSFT

Share via

Totaling values from multiple selection boxes in javascript

0 additional answers

Your answer