将复选框的值传递给PHP中嵌入的HTML中的Javascript

Question

Good afternoon. I am trying to pass the values associated with a list of checkboxes to a javascript function that then calculates the total for all values associated with selected checkboxes.

The HTML code is embedded within PHP. When I try to call the javascript function, I get a null result. Could anyone provide some pointers on where I am going wrong. Code below. All help is appreciated! Thank you.

The variables are pulled from the results of an SQL query executed just before the copied code below.

"<form action = 'book.php' method = 'POST'>
  <tr><td>$seat</td>"
  ."<td>$zone</td>"
  ."<td>$price</td>"
  ."<td><input type = 'checkbox' id = 'seat['$seat']' value = '$price'></td></tr>"
  //."<input type = 'hidden' id = '$seat' value = '$price' action = 'checkDetails()'>"
  ;
}

echo "</table>"
      ."Email address for booking ".
      "<input type = 'text' name = 'email id'>"
      ."&emsp;&emsp;"
      ."<button type = 'submit' name = 'book' action = 'book.php'>Book</button></form>"
      ."&emsp;&emsp;"."<button name = 'check price' onclick = 'checkDetails()'>Check Prices</button>";



    } 
    catch (PDOException $e) {
        echo "PDOException: ".$e->getMessage();
    }

echo "<script language = 'javascript'>

  function checkDetails() {
  var seat = document.forms[0];
  var i;
  for (i = 0; i < seat.length; i++) {
    if (seat[i].checked) {
        var total = document.getElementById('seat[i]');
        alert('Your total is ' + total);
    }
}
}

</script>";

Answer 1

You are looping through the forms length.

Since this is rendered in php why dont you set the length of of I programmatically

var i;
var length = <?= $seat?>;
for (i = 0; i < length; i++) {
if ( document.getElementById('seat[i]').checked) {
    var total = document.getElementById('seat[i]');
    alert('Your total is ' + total.value);
}

the following code is looping through the form and not the elements

var seat = document.forms[0];
  var i;
  for (i = 0; i < seat.length; i++) {