Loop multiple check boxes in javascript addition

Question

I have a simple checkbox calculator, that pretty much adds the items that are checked. How can I seperate the totalPrice. My issue is that it doesn't display in the right place when food items are selected.

Is there a way to display the price in the right spot according to which items are ticked.. For example items from technology should display in the totalPrice for that fieldset, and items checked from foods should display in the totalPrice for that fieldset. I struggle to make the code as intuitive as possible, any help or tips will be appreciated.

function priceAddition() {
  var input = document.getElementsByName("option");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}

<form method="post" oninput="priceAddition();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Technology</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="2500"> 4K Television $2500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="250"> Speakers $250
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Laptop $500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Gaming Console $500
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for technology: </h3>
                <p id="totalPrice">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>
        
        <form method="post" oninput="priceAddition();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Food</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="12.99"> 1kg of Chicken $12.99
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="5"> Grapes $5
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="22"> Salmon Fish $22
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="30"> 12 Donuts $30
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for food: </h3>
                <p id="totalPrice">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>

Sunderam Dubey · Accepted Answer · 2022-11-01 16:43:53Z

Ok, so first of all you've used an id twice, that causess some issues, also you'll need seperate functions for both forms.

Here's the new code:

function priceAddition() {
  var input = document.getElementsByName("option");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}


function priceAddition2() {
  var input = document.getElementsByName("option2");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("totalPrice2").innerHTML = "$" + total.toFixed(2);
}

<form method="post" oninput="priceAddition();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Technology</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="2500"> 4K Television $2500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="250"> Speakers $250
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Laptop $500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Gaming Console $500
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for technology: </h3>
                <p id="totalPrice">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>
        
        <form method="post" oninput="priceAddition2();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Food</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="12.99"> 1kg of Chicken $12.99
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="5"> Grapes $5
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="22"> Salmon Fish $22
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="30"> 12 Donuts $30
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for food: </h3>
                <p id="totalPrice2">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>

basically, i have made two functions, one for each form, when u use 1 function for both forms it gets messed up and can't work properly. also u can't have two paragraphs with the same id

Collectives™ on Stack Overflow

Loop multiple check boxes in javascript addition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related