Trying to total price with checkbox loop using JavaScript

Question

My goal is when a checkbox is clicked it's data-price should be added to the total variable and then this variable should be shown in the total price text box, however, it currently doesn't update the value when a checkbox is clicked.

Here is an interactive example of how it currently works/looks:

const form = document.getElementById('bookingForm');
const total = document.getElementsByName[0]('total');
document.getElementById("bookingForm").addEventListener("click", function(e) {
  if (e.target.name === "event[]") {
    let total = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
      if (box.checked) {
        total += +box.dataset.price;
      } //if
    })
    document.querySelector("[name=total]").innerHTML = total.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">
			<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>

Try with const total = document.getElementsByName('total')[0] other way around, you have document.getElementsByName[0]('total'). — norbitrial
– norbitrial, Commented Jan 6, 2020 at 11:26

Azad · Accepted Answer · 2020-01-06 11:50:25Z

const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total');
var chksBoxes = document.querySelectorAll('.chkEvent');

chksBoxes.forEach(function(chk) {
  chk.addEventListener("click", function(e) {
    var total = 0;
    chksBoxes.forEach(function(box) {
      if (box.checked)
        total += +box.dataset.price
    });
    document.querySelector("[name=total]").value = total.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'>Price: 10.50</span>
      <span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2 </span>
      <span class='eventPrice'>Price: 5.00</span>
      <span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <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>

Akash Shrivastava · Accepted Answer · 2020-01-06 11:27:14Z

For Input elements you should use value instead of innerHTML

const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total')[0];
document.getElementById("bookingForm").addEventListener("click", function(e) {
  if (e.target.name === "event[]") {
    let total = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
      if (box.checked) {
        total += +box.dataset.price;
      } //if
    })
    document.querySelector("[name=total]").value = total.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">
      <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>

PS: You have a typo at line# 2 where document.getElementsByName[0]('total'); should actually be document.getElementsByName('total')[0];

Collectives™ on Stack Overflow

Trying to total price with checkbox loop using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related