We Keep Coding

Javascript New User - onchange online firing once

I have a form that i'm working on that will dynamically hide any selections in an optgroup, everything works fine except that the onchange() only fires the initial time when initial selection is made. I'm trying to make it so that the onchange() even fires every time that a user selects a new option. The unhiding of the div and initial selection work like I said.
Help please!
<script>
function toggleandhide() {
var cont = document.getElementById('cont');
if (cont.style.display == 'inline-block') {
cont.style.display = 'none';
}
else {
cont.style.display = 'inline-block';
}
var e = document.getElementById("vendor_id");
var str = e.options[e.selectedIndex].text;
var groups = document.getElementsByTagName('optgroup');
for (var i = 0; i < groups.length; i++) {
if (groups[i].label != str) {
var options = groups[i].childNodes;
for (var j = 0; j < options.length; j++)
options[j].style.display = 'none';
}
}
}
</script>
echo "<div class=\"table\">";
echo "<div class=\"table-row\">";
echo "<div class=\"table-cell\">";
echo "Cruise Line:";
echo "</div>";
echo "<div class=\"table-cell\">";
echo "<div class=\"selectWrapper\">";
echo "<select class=\"selectBox\" name=\"vendor_id\" id=\"vendor_id\" onchange=\"toggleandhide()\">";
echo "<option value=\"\"></option>";
foreach($vendors as $key2 => $val2 ){
echo "<option value=\"".$key2."\">".$val2."</option>";
}
echo "</select>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class=\"table\">";
echo "<div id=\"cont\" style=\"display: none;\" class=\"table-row\">";
echo "<div class=\"table-cell\">";
echo "Cruise Ship :";
echo "</div>";
echo "<div class=\"table-cell\" style=\"padding-left: 114px\">";
echo "<div class=\"selectWrapper\">";
echo "<select class=\"selectBox\" name=\"ship_id\">";
echo "<option value=\"\"></option>";
foreach($vendors as $r3 => $d3){
foreach( $true_list as $k => $r ){
if($d3==$vendor_name[$k]){
if(!empty($vendor_name[$k])){
echo "<optgroup label=\"".$vendor_name[$k]."\">";
asort($r);
foreach($r as $r2 => $d2){
echo "<option value=\"".$r2."\">".$d2."</option>";
}
echo "</optgroup>";
}
}
}
}
echo "</select>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";

Pull data from html table using javascript

I have a php website that makes a table using data fetched from a database. In the table I have a input so that the user can select how many of each item they want to buy. I have successfully made the ids of each input different by concatenating the ids.
Here is the php that makes the table:
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['Article'] . "</td>";
echo "<td>" . $row['Prix'] . "</td>";
echo "<td>" . $row['PrixRetour'] . "</td>";
echo "<td>" . $row['QuantiteeMaximale'] . "</td>";
echo "<td>" . $row['Projet'] . "</td>";
echo "<td id=\"quantity" . $row['id'] . "\"><input type=\"number\" name=\"quantity\" id=\"quantity\"></td>";
echo "</tr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
I need to write the total amount at the end of my table, but i don't know how to make a for loop in javascript so that the number in the input field is multiplied by the price. Is there an easy part of code that i could use to calculate the grand total price?

You don't need to do this in Javascript. You could just do it in your PHP code:
<?php
if ($result->num_rows > 0) {
$grandTotal = 0;
// output data of each row
while($row = $result->fetch_assoc()) {
$grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['Article'] . "</td>";
echo "<td>" . $row['Prix'] . "</td>";
echo "<td>" . $row['PrixRetour'] . "</td>";
echo "<td>" . $row['QuantiteeMaximale'] . "</td>";
echo "<td>" . $row['Projet'] . "</td>";
echo "<td id=\"quantity" . $row['id'] . "\"><input type=\"number\" name=\"quantity\" id=\"quantity\"></td>";
echo "</tr>";
}
echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.
} else {
echo "0 results";
}
$conn->close();
?>
Also, here's a cleaner way to output your HTML:
<?php
if ($result->num_rows > 0) {
$grandTotal = 0;
// output data of each row
while($row = $result->fetch_assoc()) {
$grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];
?>
<tr>
<td><?= htmlentities($row['id']); ?></td>
<td><?= htmlentities($row['Article']); ?></td>
<td><?= htmlentities($row['Prix']); ?></td>
<td><?= htmlentities($row['PrixRetour']); ?></td>
<td><?= htmlentities($row['QuantiteeMaximale']); ?></td>
<td><?= htmlentities($row['Projet']); ?></td>";
<td id="quantity<?= $row['id']; ?>"><input type="number" name="quantity"></td>
</tr>
<?php
}
echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.
} else {
echo "0 results";
}
$conn->close();
?>
If you want to use the quantity field in the table itself, you could do something like this. It's a pretty quick solution. You'd probably want to refine it. But it's at least something to work with.
<?php
if ($result->num_rows > 0) {
echo "<table id='items'>";
// output data of each row
while($row = $result->fetch_assoc()) {
$grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];
?>
<tr>
<td><?= htmlentities($row['id']); ?></td>
<td><?= htmlentities($row['Article']); ?></td>
<td><?= htmlentities($row['Prix']); ?></td>
<td><?= htmlentities($row['PrixRetour']); ?></td>
<td><?= htmlentities($row['QuantiteeMaximale']); ?></td>
<td><?= htmlentities($row['Projet']); ?></td>";
<td><input data-price='<?= floatval($row['Prix']); ?>' data-max-quantity='<?= intval($row['QuantiteeMaximale']); ?>' type="number" name="quantity"></td>
</tr>
<?php
}
?>
</table>
<p>Grand Total: $<span id='grandTotal'></span></p>
<script>
(() => {
const updateGrandTotal = (grandTotalEl, inputEls) => {
grandTotalEl.innerText = inputEls.reduce((total, inputEl) => {
const maxQuantity = parseInt(inputEl.dataset.maxQuantity)
if(parseInt(inputEl.value) > maxQuantity) inputEl.value = maxQuantity
if(parseInt(inputEl.value) < 0) inputEl.value = 0
const price = parseFloat(inputEl.dataset.price)
const quantity = parseInt(inputEl.value)
if(isNaN(quantity)) return total
return total + (price * quantity)
}, 0)
}
const tableEl = document.getElementById('items')
const grandTotalEl = document.getElementById('grandTotal')
const quantityInputEls = tableEl.querySelectorAll('input[name=quantity]')
quantityInputEls.forEach(el => el.addEventListener('keyup', () => updateGrandTotal(grandTotalEl, inputEls)))
})()
</script>
<?php
} else {
echo "0 results";
}
$conn->close();
?>

Passing PHP Next Page Variables

I want to pass the php variable to the next page.
I tried many things, but I did not succeed.
Here is the attached case I tried.
index code
<script>
<?php
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);
mysqli_set_charset($con, "utf8");
$result = mysqli_query($con, "select * from StoreTable");
$n = 1;
while($row = mysqli_fetch_array($result)){
$name = $row['name'];
?>
positions_1.push({ content:
'<div class="wrap">' +
' <div>next page</div>' +
'</div>'
});
<?
$n++;
}
?>
</script>
next code
<?php
echo $name;
?>
url has been changed to a variable, but a blank screen is displayed. (Variables were not passed to the next page.)

Try this --
<script>
<?php
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);
mysqli_set_charset($con, "utf8");
$result = mysqli_query($con, "select * from StoreTable");
$n = 1;
while($row = mysqli_fetch_array($result)){
$name = $row['name'];
?>
positions_1.push({ content:
'<div class="wrap">' +
' <div>next page</div>' +
'</div>'
});
<?
$n++;
}
?>
</script>

Why are my results not showing up from my database?

I have a program that displays authors book code and book title using php and
AJAX technology, but for some reason the data is not appearing in the table. I know my SQL code is correct as our instructor gave us the code for that, but something is preventing the data from appearing in the table. Any tips or suggestions would be appreciated!
<body>
<?php
$authorid = 0;
$authorid = (int) $_GET['authorid'];
if ($authorid > 0) {
require_once('dbtest.php');
$query = "SELECT * FROM author";
$r = mysqli_query($dbc, $query);
if (mysqli_num_rows($r) > 0) {
$row = mysqli_fetch_array($r);
} else {
echo "Title Not Returned<br>";
}
echo "<table border='1'><caption>Titles for </caption>";
echo "<tr>";
echo "<th>Book Code</th>";
echo "<th>Book Title</th>";
echo "</tr>";
$q2 ="SELECT wrote.author_number As ANo, wrote.book_code As BookCd, book.book_title As Title ";
$q2 .= " FROM wrote, book ";
$q2 .= " WHERE wrote.book_code=book.book_code ";
$q2 .= " AND wrote.author_number = ' ' ";
$q2 .= " ORDER BY book.book_title";
$r2 = mysqli_query($dbc, $q2);
$row = mysqli_fetch_array($r2);
while ($row) {
echo "<tr>";
echo "<td>" .$row['BookCd']. "</td>";
echo "<td>" .$row['Title']. "</td>";
echo "</tr>";
$row = mysqli_fetch_array($r2);
}
echo "</table>";
} else {
echo "<p>No Author ID from prior page</p>";
}
?>
</form>
</body>

The suspicious line is: AND wrote.author_number = ' '
Why is it empty?
Put a check after the second query:
$r2 = mysqli_query($dbc, $q2);
if (mysqli_num_rows($r2) > 0) {
echo "rows are Returned<br>";
} else {
echo "rows are Not Returned<br>";
}
$row = mysqli_fetch_array($r2);

Adding a checkbox button on table

Hi i'm making a project using php i just wonder how i can add checkbox on a table that indicate being selected. As I didn't find any question asked before, on how to toggle checkbox on click of a table row, so I'd like to share my approach to this.
here are my codes:
$list_equipments = array();
$con = new data_abstraction("resource_booking", "it_equipment_type");
if ($result = $con - > make_query() - > result) {
while ($data = $result - > fetch_assoc()) {
$list_equipments[] = $data;
}
} else {
die("SQL Error:".$con - > error);
}
$html - > draw_container_div_start();
$html - > draw_fieldset_header('');
$html - > draw_fieldset_body_start();
echo "<table width='600px' style='border-width:1px; border-style:solid;'>";
$counter = 0;
$no_columns = 2; //initialize 3 columns
$column_width = 110 / $no_columns; +
foreach($list_equipments as $key => $equipment) {
if ($counter % $no_columns == 0)
echo "<tr>";
echo "<td width='".$column_width.
"%' style='border-width:1px; border-style:solid'>";
draw_equipment($equipment);
echo "</td>";
if ($counter % $no_columns == $no_columns - 1)
echo "</tr>";
$counter++;
}
echo "</table>";
$html - > draw_fieldset_body_end();
$html - > draw_fieldset_footer_start();
$html - > draw_submit_cancel(true, '2', 'btn_submit', 'RESERVE');
$html - > draw_fieldset_footer_end();
$html - > draw_container_div_end();
$html - > draw_footer();
function draw_equipment($equipment) {
$equipment_name = $equipment['img_link'];
echo "<div style='text-align:left;width:120%'>";
echo "<img src='img/$equipment_name' alt='$equipment_name' width='155px'/><br/>";
echo $equipment['equip_type'];
}
echo "</form>";
return ob_get_clean();

While creating table you can add a td in which you can add a checkbox for each row like below
<td><input type= "checkbox" class="toggleCheckbox"></td>
And then using jquery you can handle click event on this like below
$("table tr").click(function(){
($(this).children(":last").trigger("click");
})

finally i have a solution on my question
<?php
$list_equipments = array();
$con = new data_abstraction("resource_booking", "it_equipment_type");
if ($result = $con->make_query()->result) {
while ($data = $result->fetch_assoc()) {
$list_equipments[] = $data;
}
} else {
die("SQL Error:" . $con->error);
}
$html->draw_container_div_start();
$html->draw_fieldset_header('');
$html->draw_fieldset_body_start();
echo "<table width='600px' style='border-width:1px; border-style:solid;'>";
$counter = 0;
$no_columns = 2; //initialize 3 columns
$column_width = 110 / $no_columns;
foreach ($list_equipments as $key => $equipment) {
if ($counter % $no_columns == 0)
echo "<tr>";
echo "<td width='" . $column_width . "%' style='border-width:1px; border-style:solid'>";
draw_equipment($equipment);
echo "</td>";
if ($counter % $no_columns == $no_columns - 1)
echo "</tr>";
$counter++;
}
echo "</table>";
$html->draw_fieldset_body_end();
$html->draw_fieldset_footer_start();
$html->draw_submit_cancel(true, '2', 'btn_submit', 'RESERVE');
$html->draw_fieldset_footer_end();
$html->draw_container_div_end();
$html->draw_footer();
function draw_equipment($equipment)
{
$equipment_name = $equipment['img_link'];
echo "<div style='text-align:left;width:120%'>";
echo "<input type='checkbox' class='toggleCheckbox'>";
echo "<img src='img/$equipment_name' alt='$equipment_name' width='120px'/><br/>";
echo $equipment['equip_type'];
}
echo "</form>";
return ob_get_clean();