Jump to content

Total was not calculated automatically.

kami2k

By kami2k
in PHP Coding Help

 Share

Recommended Posts

kami2k Newbie

kami2k

Posted
Posted (edited)

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/[email protected]/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 by kami2k
Link to comment
https://forums.phpfreaks.com/topic/315365-total-was-not-calculated-automatically/
Share on other sites
  • 2 years later...
Moorcam Advanced Member

Moorcam

Posted
Posted (edited)
On 9/24/2022 at 6:52 PM, kami2k said:

Hi,

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

 

I have had a good look through your code and made a few minor changes for better readability, simplicity and understanding. There is so much code in yours when there is really no need for it.

I have added some Javascript (as mentioned above) that calculates the total on price changes. I have also made the total field read only to prevent it being changed. You can change that easy in the HTML.

Hope it helps. Look through it and learn from it. 

<!DOCTYPE html>
<?php
$con = mysqli_connect("localhost", "root", "", "receipt");

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

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

if (!$res) {
    trigger_error('Invalid query: ' . $con->error);
}
?>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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[]">
                                <option value='' price='0'>Select</option>
                                <?php foreach ($data["product"] as $row): ?>
                                    <option value='<?= $row["fid"] ?>' price='<?= $row["famount"] ?>'><?= $row["fdescription"] ?></option>
                                <?php endforeach; ?>
                            </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 readonly /></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

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

d.addEventListener('click', e => {
    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');
        let clone = tr.cloneNode(true);
        clone.querySelector('input[name="price[]"]').value = '';
        tbody.appendChild(clone);
    }

    if (e.target.classList.contains('btn-link') && e.target.dataset.action === 'remove') {
        if (d.querySelectorAll('tbody#table tr').length > 1) {
            let value = e.target.closest('tr').querySelector('input[name="price[]"]').value;
            d.querySelector('tbody#table').removeChild(e.target.closest('tr'));
            total.value -= parseFloat(value);
        }
    }
});

d.addEventListener('keyup', e => {
    let col = d.querySelectorAll('input[name="price[]"]');
    total.value = [...col].map(n => n.value > 0 ? n.value : 0).reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
});

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

 

Edited by Moorcam

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.