Onclick In Php Echo With Error Invalid Unexpected Token

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 database (no pro

Solution 1:

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 pricefunctiontotal() {
  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);
}

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

Solution 2:

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<divclass='item'><spanclass='eventTitle'>".filter_var($event['eventTitle'], FILTER_SANITIZE_SPECIAL_CHARS)."</span><spanclass='eventStartDate'>{$event['eventStartDate']}</span><spanclass='eventEndDate'>{$event['eventEndDate']}</span><spanclass='catDesc'>{$event['catDesc']}</span><spanclass='venueName'>{$event['venueName']}</span><spanclass='eventPrice'>{$event['eventPrice']}</span><spanclass='chosen'><inputtype='checkbox'name='event[]'value='{$event['eventID']}' data-price='{$event['eventPrice']}' onclick='total()*'/></span></div>\n";