onclick in php echo with error invalid unexpected token

Question

I\'m trying to add the onclick funtion when user checked the check box, and then the total price will be shown.
All the information including price is retrieve from databas

Answer 1

Why would you use so much '\' ? and what the asterisks '*' after total() for? I have tried following snippet and it seems to works well. (only changing the echo line in your php code)

echo "\t<div class='item'>
            <span class='eventTitle'>".filter_var($event['eventTitle'], FILTER_SANITIZE_SPECIAL_CHARS)."</span>
            <span class='eventStartDate'>{$event['eventStartDate']}</span>
            <span class='eventEndDate'>{$event['eventEndDate']}</span>
            <span class='catDesc'>{$event['catDesc']}</span>
            <span class='venueName'>{$event['venueName']}</span>
            <span class='eventPrice'>{$event['eventPrice']}</span>
            <span class='chosen'><input type='checkbox' name='event[]' value='{$event['eventID']}' data-price='{$event['eventPrice']}' onclick='total()*'/></span>
      </div>\n";

Answer 2

Don't inline the event handler!

Also getElementsByName is plural and returns a collection:

document.getElementsByName("total")[0].value

Remove the inline event and instead use

//calculate price
function total() {
  var cal = document.getElementsByName('event[]');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}
var checks = document.getElementsByName('event[]');
for (var i = 0; i < checks.length; i++) checks[i].onclick = total;

If you do not use total anywhere else, do

var checks = document.getElementsByName('event[]');
for (var i = 0; i < checks.length; i++) checks[i].onclick = function() {
  var cal = document.getElementsByName('event[]');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}

var checks = document.getElementsByName('event[]');
for (var i = 0; i < checks.length; i++) checks[i].onclick = function() {
  var cal = document.getElementsByName('event[]');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}

<div class='item'>
  <span class='eventTitle'>title 1</span>
  <span class='eventStartDate'>1-1-2018</span>
  <span class='eventEndDate'>2-2-2018</span>
  <span class='catDesc'>Event 1</span>
  <span class='venueName'>Place 1</span>
  <span class='eventPrice'>100</span>
  <span class='chosen'><input type='checkbox' name='event[]' value='id1' data-price='100' /></span>
</div>
<div class='item'>
  <span class='eventTitle'>title 2</span>
  <span class='eventStartDate'>2-2-2018</span>
  <span class='eventEndDate'>3-3-2018</span>
  <span class='catDesc'>Event 2</span>
  <span class='venueName'>Place 2</span>
  <span class='eventPrice'>200</span>
  <span class='chosen'><input type='checkbox' name='event[]' value='id1' data-price='200' /></span>
</div>
<section id="checkCost">
		<h2>Total cost</h2>
		Total <input type="text" name="total"  size="10" readonly />
	</section>