How to prevent checkbox loop and radio button loop from creating two separate price totals

Question

I have a query selector for checkboxes which works fine and I replicated it for radio button, but I am running into the problem that they are both keeping separate totals. I tried to take the totalPrice variable out of both of them and place it outside so that it would be shared, but that created the problem of the price not being removed from unchecked checkboxes and radio buttons.

This is my current buggy code:

const form = document.getElementById('bookingForm');
const total = document.getElementById('total');
document.getElementById("bookingForm").addEventListener("click", function(e) {
  if (e.target.name === "event[]") {
    let totalprice = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
      if (box.checked) {
        totalprice += +box.dataset.price;
      }
    })
    document.querySelector("[name=total]").value = totalprice.toFixed(2);
  }
})

document.getElementById("bookingForm").addEventListener("click", function(e) {
  if (e.target.name === "delivery") {
    let totalprice = 0;
    [...document.querySelectorAll('input[data-price][type=radio]')].forEach(function(box) {
      if (box.checked) {
        totalprice += +box.dataset.price;
      }
    })
    document.querySelector("[name=total]").value = totalprice.toFixed(2);
  }
})

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  <section id="bookEvents">
    <h2>Select Events</h2>
    <div class='item'>
      <span class='eventTitle'>Event number 1</span>
      <span class='eventPrice'>10.50</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2</span>
      <span class='eventPrice'>5.00</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <input type="radio" name="delivery" value="ticket" data-price="10">
      <h2>Total Price</h2>
      Total Price <input type="text" name="total" size="12">
    </section>

    <p><input type="submit" name="submit" value="Book"></p>
  </section>
</form>

mplungjan · Accepted Answer · 2020-01-06 13:17:18Z

1

Just have one event handler and one loop

If you only have data-price on the elements you need to loop, then you can change

[...document.querySelectorAll('input[data-price][type=checkbox], input[data-price][type=radio]')].forEach(function(box) {

to

[...document.querySelectorAll('input[data-price]')].forEach(function(box) {

I just wonder why you have a only a single radio - it cannot be un-selected. Why not another checkbox?

const form = document.getElementById('bookingForm');
const total = document.getElementById('total');
form.addEventListener("click", function(e) {
  if (e.target.name === "event[]" || e.target.name === "delivery") {
    let totalprice = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox], input[data-price][type=radio]')].forEach(function(box) {
      if (box.checked) {
        totalprice += +box.dataset.price;
      }
    })
    document.querySelector("[name=total]").value = totalprice.toFixed(2);
  }
})

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  <section id="bookEvents">
    <h2>Select Events</h2>
    <div class='item'>
      <span class='eventTitle'>Event number 1</span>
      <span class='eventPrice'>10.50</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2</span>
      <span class='eventPrice'>5.00</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <input type="radio" name="delivery" value="ticket" data-price="10">
      <h2>Total Price</h2>
      Total Price <input type="text" name="total" size="12">
    </section>

    <p><input type="submit" name="submit" value="Book"></p>
  </section>
</form>

edited Jan 6, 2020 at 13:17

answered Jan 6, 2020 at 13:06

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

3 Comments

WhynarySearch Over a year ago

There are actually two radio buttons I just neglected to include a second one in my example. oops. Also this works perfectly how I would like except that it only updates when a change is made to an event. Is there a way to make it so that it also updates if the radio button is switched? Sorry for not including one in my example. Thanks

mplungjan Over a year ago

It works on ANY click on ANY radio or checkbox in the bookingForm as long as they are named event[] or delivery

WhynarySearch Over a year ago

ahh, I had just misnamed a variable. Thanks for your help :)

Collectives™ on Stack Overflow

How to prevent checkbox loop and radio button loop from creating two separate price totals

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related