6

i was wondering if yous could help me with this. I am quite new to JavaScript but This has been getting to me for quite a while now and I have ran out of ideas on how to fix this. Basically If a user clicks on one of those checkboxes below, then the Data-price attribute of the checkboxes should show in the total box and so fourth. e.g user clicks the checkbox with the value of 14, then the price £13 will show up in the total box, if the user clicks on another checkbox, say the last checkbox with the value of 9, then it will calculate the two checkboxes 16 + 13 and will then show up the new figure in the total box

I have tried my code countless of times and it will not display anything in the total box. I really hope i have made myself clear with this and i'd be grateful if yous can help me out

HTML

<form id=BookingForm method="get"
    <section id="bookEvents"
        <div class="item">
            <input type='checkbox' name='event[]' value='6' data-price='18.50'>
            <input type='checkbox' name='event[]' value='14' data-price='13.00'>
           <input type='checkbox' name='event[]' value='11' data-price='35.00'>
           <input type='checkbox' name='event[]' value='9' data-price='16.00'>
        </div>
    </section>

    <section id="checkCost">
        Total <input type="text" name="total" size="10" readonly>
    </section>

JavaScript

window.addEventListener('load', function () {
    "use strict";

    const l_form = document.getElementById('bookingForm');  
    l_form.CheckValue.onclick = calculateTotal;  

    function calculateTotal() {
        let l_total = 0;  

        const l_item = l_form.querySelectorAll('div.item');  
        const l_checkboxesCount = l_checkboxes.length;  

        for (let t_i = 0; t_i < l_checkboxesCount; t_i++) {
            const t_item = l_item[t_i];  
            const t_checkbox = t_ckbox.querySelector('input[data-value][type=checkbox]');

            if (t_checkbox.checked) {
                l_total += t_checkbox.dataset.price;
            } 
            l_form.submit.value = l_total;  
        }
    }
});
Improve this question
5
  • You have a lot of issues here. A couple to start with is id=BookingForm should be id="BookingForm". And later when you use it in document.getElementById('bookingForm'), it should be document.getElementById('BookingForm') to match the case. Start with that and keep debugging. Look at your console, it's crystal clear what the issues are. Commented Dec 9, 2019 at 13:20
  • 3
    @Mike - please don't add extra code that wasn't there in the first place. The OP might not be aware that you've added the closing }); to the code... it's possible they forgot to include it when they wrote the question, but we simply don't know that Commented Dec 9, 2019 at 13:27
  • @freefaller You're right. Thanks for pointing this out. Commented Dec 9, 2019 at 13:28
  • @Harry check out my answer. Hope it's helpful. Commented Dec 9, 2019 at 13:39
  • Thank you guys for the help, i really appreciate what you's are doing Commented Dec 9, 2019 at 13:44

4 Answers 4

Reset to default
3

There are multiple issues with the code that you've provided... I'll list as many as I can...

  • The following do not have closing > symbols...

    <form id=BookingForm method="get"
<section id="bookEvents"

  • You're not closing the <form> element with a </form>

  • You're looking for document.getElementById('bookingForm');, but the ID of the form is BookingForm... javascript is case-sensitive, so it won't match. Instead you should change either the id in the element, or the name of the element in the function call.

  • You're using l_form.CheckValue but there is nothing wit CheckValue as an ID in the code you've provided

  • At the end of the code, you are not correctly closing the addEventListener function, which should have });

  • As per the comment by @fcalderan in the following you are not adding numbers together... you are actually concatenating strings

    Wrong: l_total += t_checkbox.dataset.price;
Fixed: l_total += parseFloat(t_checkbox.dataset.price);
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Also, he is trying to sum strings and not numbers. Maybe you could update the list :)
0

Here is an implementation with vanilla JavaScript:

window.onload = () =>
  document.querySelectorAll(".input-x")
  .forEach(input=>input.addEventListener("change",calculatePrize));

function calculatePrize(){
  let sum = 0;
  document.querySelectorAll(".input-x")
  .forEach(input=>sum += (input.checked? 
  Number.parseFloat(input.getAttribute("data-price")):0));
  document.getElementById("total").value = sum;
}
<form id="BookingForm" method="get">
    <section id="bookEvents">
        <div class="item">
           <input type='checkbox' class="input-x" name='event[]' value='6' data-price='18.50'>
           <input type='checkbox' class="input-x" name='event[]' value='14' data-price='13.00'>
           <input type='checkbox' class="input-x" name='event[]' value='11' data-price='35.00'>
           <input type='checkbox' class="input-x" name='event[]' value='9' data-price='16.00'>
        </div>
    </section>
    <section id="checkCost">
        Total:
        <input id="total" type="text" name="total" size="10" readonly>
    </section>
    </form>

Improve this answer

Comments

0

You need to add form closing tag to enclose the controls in it.

<form id=BookingForm method="get">
    <section id="bookEvents">
         <div class="item">
             <input type='checkbox' onchange = "calculateTotal()" name='event[]' value='6' data-price='18.50'>
             <input type='checkbox' onchange = "calculateTotal()" name='event[]' value='14' data-price='13.00'>
             <input type='checkbox' onchange = "calculateTotal()" name='event[]' value='11' data-price='35.00'>
             <input type='checkbox' onchange = "calculateTotal()" name='event[]' value='9' data-price='16.00'>
         </div>
    </section>
    <section id="checkCost">
         Total <input type="text" name="total" size="10" readonly>
    </section>
</form>

Should be in this format.

Improve this answer

1 Comment

Welcome to stackoverflow. It's better to give an explanation of exactly what you're doing to fix the issue... otherwise you're expecting people to read through and find the individual changes you've made. Unfortunately it's not just the HTML that's the issue, there's plenty in the javascript as well, so this wouldn't be a complete answer
-1

Here is the demo example I had made for you.

var totalPrice = 0;
$("#totalPrice").html(0);
$('.checkboxClass').change(function () {
  if ($(this).is(":checked")) {
    totalPrice += parseFloat($(this).attr('data-price'));
    $("#totalPrice").html(totalPrice);
  } else {
    totalPrice -= parseFloat($(this).attr('data-price'));
    $("#totalPrice").html(totalPrice);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkboxClass" name="c1" value="4" data-price="18.50" />18.50<br>

<input type="checkbox" class="checkboxClass" name="c2" value="8" data-price="14.50" />14.50<br>

<input type="checkbox" class="checkboxClass" name="c3" value="5" data-price="12.50" />12.50<br>
<br>
Total Price: <span id="totalPrice"></span>

Improve this answer

1 Comment

Sorry, but at no point has the OP given the impression that jQuery is something they are able or willing to use