Total was not calculated automatically.

kami2k · September 24, 2022

Hi,

Quote

<!DOCTYPE html>
<?php
   $con=mysqli_connect("localhost","root","","receipt");
   /*
CREATE TABLE `feedetails`
(
`fid` int(4) NOT NULL,
`fdescription` varchar(256) NOT NULL,
`fprice` int(6) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

       );
   */

   $data["product"]=[];
   $sql="select * from feedetails";
   $res=$con->query($sql);

   if($res->num_rows>0){
       while($row=$res->fetch_assoc()){
           $data["product"][]=$row;
       }
   }

$result = $con->query($sql);

if (!$result) {
trigger_error('Invalid query: ' . $con->error);
}

?>
<html>
<head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" >
   <script src="https://code.jquery.com/jquery-3.6.1.min.js" ></script>

<style>
html{counter-reset:rows}
tr{counter-increment:rows}
tbody td{border:1px dotted grey;padding:0.25rem}
tbody tr td:first-of-type::before{content:counter(rows);display:table-cell}
tfoot td{background:grey;padding:0.5rem;color:white}
</style>

</head>
<body>
<div class="container mt-5">
   <div class="row">
       <div class="col-md-12">


<table class='table table-bordered'>
<tbody id='table'>
<tr class='crow'>
<td style='width:150px;'></td>
<td style='width:350px;'>
<select class="form-control pid" required name="pid[]">
                           <?php
                               $options="<option value='' price='0' >Select</option>";
                               foreach($data["product"] as $row){
                                   $options.="<option value='{$row["fid"]}' price='{$row["famount"]}'>{$row["fdescription"]}</option>";
                               }
                               echo $options;
                           ?>
                       </select>
</td>
<td>
<input type="text" name="price[]" class="form-control price" required>
</td>
<td>
<input data-action='remove' type='button' value='Remove' class='btn btn-link btn-xs rmv' required />
</td>
</tr>
</tbody>

<tfoot>
<tr>
<td><input data-action='add' type='button' class='btn btn-link add' value='+Add Row' /></td>
<td colspan='2' class='text-right'>Total</td>
<td><input type='text' name='grand_total' class='form-control' required /></td>
</tr>
</tfoot>
</table>
   </div>
   </div>
</div>


<script>

const d=document;
const total=d.querySelector('input[name="grand_total"]');

d.addEventListener('click',e=>{
/* Add new row */
if( e.target.classList.contains('btn-link') && e.target.dataset.action=='add' ){
let tbody=d.querySelector('tbody#table');
let tr=tbody.querySelector('tr:first-of-type');

/* clone the first table row and clear any values previously entered */
let clone=tr.cloneNode( true );
clone.querySelector('input[name="price[]"]').value='';

/* add the new row to the table. */
tbody.appendChild( clone );
}




/* Remove existing row - NOT first row though! */
if( e.target.classList.contains('btn-link') && e.target.dataset.action=='remove' ){
if( d.querySelectorAll('tbody#table tr').length > 1 ){
// We need to identify the value entered into 'price[]' so that we can remove
// it from the total.
let value=e.target.closest('tr').querySelector('input[name="price[]"]').value;

// find and remove the button's parent row
// using closest to move UP the DOM until it finds the TR node.
d.querySelector('tbody#table').removeChild( e.target.closest('tr') );

// subtract this value from the total
total.value-=parseFloat( value )
}
}
});

// tally up all numbers entered by iterating through all input elements
// with the name price[]
d.addEventListener('keyup',e=>{
let col=d.querySelectorAll('input[name="price[]"]');

// convert nodelist to an array and use regular array methods (map & reduce)
// to return the sum
total.value=[...col]
.map(n=>n.value > 0 ? n.value : 0)
.reduce((a,b)=>parseFloat(a) + parseFloat(b));
});

$("body").on("change",".pid",function(){
   var p=$(this).find(":selected").attr("price");
   $(this).closest("tr").find(".price").val(p);
   });
</script>
</body>
</html>

in this code total was not auto. shown when we click on the total box it is updated then, not automatically how to fix it.

Thanks

Edited September 24, 2022 by kami2k

Sign In

Total was not calculated automatically.

Recommended Posts

kami2k

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information