CODEWITHSUNDEEP
javascripthtml
WhynarySearch
WhynarySearch

Reputation: 217

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

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>

Upvotes: 0

Views: 42

Answers (1)

mplungjan
mplungjan

Reputation: 178350

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>

Upvotes: 1

Related Questions