Display total price when checkbox clicked in JS

Question

I am working on a checking form assignment. So, i have 3 products with price and the type is checkbox. The total field will display the total cost from only the checked products. However, when i click check the box the total field display nothing. Am I missing something? Any idea? Thank you! My HTML and JS:

    <form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="total()"/>
                Candy $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="total()"/>
                Burger $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="total()"/>
                Coke $1.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

JS

function total() {
        var input = document.getElementById("form");
        var total = 0;
        for (var i = 0; i < input.length; i++) {
                if (input[i].checked) {
                        total += parseFloat(input[i].value);
                }
        }
        document.getElementById("total").value = "$" + total;
}

var input = document.getElementsByName("product"); should work better - you have nothing with ID="form" and if you loop over theForm, you will get the total and buttons in the loop too — mplungjan
– mplungjan, Commented Mar 3, 2015 at 6:35

mplungjan · Accepted Answer · 2015-03-03 06:45:27Z

3

Three problems

1: use document.getElementsByName("product");
2: Rename the function. Seems using total as ID for the field interferes with the function of the same name.
3: Round the result

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

 <form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
                Candy $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
                Burger $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
                Coke $1.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

answered Mar 3, 2015 at 6:45

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mwangi Thiga Over a year ago

How can you implement this using ajax?

mplungjan Over a year ago

Implement what? Ask a new question but be sure to create a minimal reproducible example

Chi Shen Over a year ago

sir can u please help me with this? i follow your method but some error occur stackoverflow.com/questions/43179973/…

bvaughn · Accepted Answer · 2015-03-03 06:36:15Z

0

This line...

var input = document.getElementById("form");

Would only return a single element with an id of form - and such an element doesn't even exist in your example. What you're looking for is...

var inputs = document.getElementsByName("product");

answered Mar 3, 2015 at 6:36

bvaughn

13.5k49 silver badges46 bronze badges

Comments

Farkhat Mikhalko · Accepted Answer · 2015-03-03 06:40:28Z

0

window.calculate = function(){
    var total = 0;
    var form = document.getElementById("theForm");
    var inputs = form.getElementsByTagName("input");
    
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].getAttribute("name") == "product" && inputs[i].checked)
            total += parseFloat(inputs[i].value);
    }
    alert(total);
}

<form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="calculate()"/>
                Candy $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="calculate()"/>
                Burger $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="calculate()"/>
                Coke $1.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

answered Mar 3, 2015 at 6:40

Farkhat Mikhalko

3,6653 gold badges27 silver badges39 bronze badges

1 Comment

Farkhat Mikhalko Over a year ago

accidentally added ))

Tosin Ayoola · Accepted Answer · 2020-03-02 12:25:32Z

0

just create a form variable and add an event listener, to listen and modify the input text like this

function total_price(){
   let input = documnent.getElementsById('theForm'),
    total = 0.00,
    input = documnent.getElementsById('product');
    for (let i = 0; i <input.length; input++){
       if(input[i].checked){
         total += parseFloat(input[i].value)
       }
    }
    document.getElementById('total').value = total.toFixed(2)
}
document.getElementById('theForm').addEventListener('change', total_price)

answered Mar 2, 2020 at 12:25

Tosin Ayoola

791 silver badge12 bronze badges

Collectives™ on Stack Overflow

Display total price when checkbox clicked in JS

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related