Karan Gupta Karan Gupta - 1 month ago 11
Javascript Question

Fetching values from database and display in html table including PHP

I have a table in which data is entered by the user. The rows are created dynamically. The value given by the user is sent to the DB(Oracle 11g) and based on that other values are fetched and inserted into the table. The code is like this:

<!DOCTYPE HTML>
<html>
<body>
<?php
$code = $_POST['code'];
$qty = $_POST['qty'];
foreach ($_POST['code'] as $code => $c) {
//print $c . "&nbsp;&nbsp;&nbsp;" . $qty[$code] . "<br>";
}
$link = oci_connect('hd','hd', 'localhost/mydb');
if(!$link) {
$e = oci_error();
exit('Connection error ' . $e['message']);
}
foreach ($_POST['code'] as $code => $c)
{
$q1 = "select PROD_NAME, PROD_COST from PRODUCT where PROD_ALIAS = :bv_code";
$q1parse = oci_parse($link, $q1);
oci_bind_by_name($q1parse, ':bv_code', $c);
oci_execute($q1parse);
while($row = oci_fetch_array($q1parse))
PRINT $row['PROD_NAME'] . "&nbsp;&nbsp;&nbsp;&nbsp;" . $row['PROD_COST'] .
"&nbsp;&nbsp;&nbsp;&nbsp;" . $qty[$code] . "&nbsp;&nbsp;&nbsp;&nbsp;" .
($row['PROD_COST']*$qty[$code]) . "<br>";
}
?>
<script type = "text/javascript" >
function addRow()
{
var table = document.getElementById('order');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input type = 'text' name = 'code[]' /> ";
cell2.innerHTML = "";
cell3.innerHTML = "";
cell4.innerHTML = "<input type = 'text' name = 'qty[]' />";
cell5.innerHTML = "";

}

function delRow(r)
{
document.getElementById('order').deleteRow(-1);
}

</script>
<p><strong> Order Details </strong></p>
<form action = 'm3.php' method = 'POST' >
<table id = "order" border = 1 border_collapse = "collapse" >
<tr>
<th> Item Code </th>
<th> Name </th>
<th> Price </th>
<th> Quantity </th>
<th> Total </th>
</tr>
</table>
<input type = 'submit' name = 'submit' value = 'Submit' />
<input colspan = '2' type = "button" value = "Add Row" onclick = "addRow('order')" />
<input colspan = '2' type = "button" value = "Delete Row" onclick = "delRow('order')" />
</form>
</body>
</html>


The user provides the value of "CODE" and "Quantity". The "CODE" is sent to the DB and other values of the product are fetched. The problem is I want to display the fetched values in the same table. Right now I am displaying it outside the table. Also, I want a column in the end displaying the total bill. As in, the total of (price*qty). How can I do this?

Answer Source

Instead of placing the entire foreach loop up in the page, you should place it inside the <table> ... </table> like this:

// your code
<table id = "order" border = 1 border_collapse = "collapse" >
    <tr>
        <th> Item Code </th>
        <th> Name </th>
        <th> Price </th>
        <th> Quantity </th>
        <th> Total </th>
    </tr>
    <?php
        $sumTotal = 0;
        foreach ($_POST['code'] as $code => $c){
            $q1 = "select PROD_NAME, PROD_COST from PRODUCT where PROD_ALIAS = :bv_code";
            $q1parse = oci_parse($link, $q1);
            oci_bind_by_name($q1parse, ':bv_code', $c);
            oci_execute($q1parse);
            while($row = oci_fetch_array($q1parse)){
                ?>
                <tr>
                    <td><?php echo $c; ?></td>
                    <td><?php echo $row['PROD_NAME']; ?></td>
                    <td><?php echo $row['PROD_COST']; ?></td>
                    <td><?php echo $qty[$code]; ?></td>
                    <td><?php echo $row['PROD_COST']*$qty[$code]; ?></td>
                </tr>
                <?php
                $sumTotal += $row['PROD_COST']*$qty[$code];
            }
        }
    ?>
    <tr>
        <td>Sum Total</td>
        <td colspan="4"><?php echo $sumTotal; ?></td>
    </tr>
</table>
// your code