Jump to content

i want to sum for total prices in sub total display result?


santan lal das

Recommended Posts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to add or remove rows in a table dynamically jQuery </title>
    <link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
    <script>
    
    /*find varial in textbox*/
            function myFunction(){
                var test_code = $('#tests').find(':selected').data('testcode');
        var test_name = $('#tests').find(':selected').data('testname');
        var generalprice = $('#tests').find(':selected').data('generalprice');
         var totalprice = $('#tests').find(':selected').data('totalprice');
                
                
                $('#test_code').val(test_code);
        $('#test_name').val(test_name);
        $('#generalprice').val(generalprice );
         $('#totalprice').val(totalprice);
                
    }
    </script>
    
    
    
</head>
<body>
    <div class="form-group">
    <form>
        <input name="patid" type="text" id="patid" placeholder="patid" value="">
        <select name="name" ID="tests" onchange="myFunction()" class="form-control">
<option value="Select">Select</option>
<?php
            include("database.php");
$qu="SELECT DISTINCT test_name,test_name_code,test_name,general_test_price, general_Total_Amount from test_name_setup ";
$res=$conn->query($qu);

while($r=mysqli_fetch_row($res))

    echo "<option data-testcode='$r[1]'  data-testname='$r[2]'  data-generalprice='$r[3]'  data-totalprice='$r[4]'  value='$r[0]'> $r[0] </option>";
}
?> 
</select>
        <div class="container" id="multiple">
        <input name="test_code" type="text" id="test_code" placeholder="test code" value="">
        <input name="test_name" type="text" id="test_name" placeholder="test Name" value="">
        <input class="qtol1"  name="generalprice" type="Number" id="generalprice" placeholder="general price">
        <input  class="qtol2" name="quantity" type="Number" id="quantity" value="1" onClick="calc()" placeholder="quantity">
        <input class="qtol3" name="totalprices" type="Number" id="totalprices" placeholder="total prices">
        <input class="qtol" name="totalprice" type="text" id="totalprice" placeholder="total price">
        <input name="send" type="button" id="butsend"  class="add-row" value="Add Row">
        <input name="send" type="reset" id="butsend"  class="add-row" value="Rest Row">
            
        </div>
        <div>
        <input name="save" type="button"  class="btn btn-primary" value="Save to database" id="butsave">
        </div>
   
    
    <table id="table1" name="table1" class="table table-bordered">
<tbody>
<tr>
<th>Serial no.</th>
<th>ID</th>
<th>Test code</th>
<th>Test name</th>
<th>General price</th>
<th>Quantity</th>
<th>Total prices</th>
<th>Total price</th>
<th>Action</th>
</tr>
</tbody>
        
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>Total:</td>
                <td ><input id="subtotal" name="subtotal" type="text"></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>

        </table>
         </form>
        </div>
    <script>
$(document).ready(function() {
var id = 1;
    var generalprice = 0;
    var  quantity  = 0;
    var totalprice =0;
    var totalprices =0;
/*Assigning id and class for tr and td tags for separation add in column.*/
$("#butsend").click(function() {
var newid = id++; 
$("#table1").append('<tr valign="top" id="'+newid+'">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\
<td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\
<td width="100px" class="test_name'+newid+'">' + $("#test_name").val() +  '</td>\n\
<td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\
<td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\
<td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\
<td width="100px" id="qntytolprice" class="totalprice'+newid+'">' + $("#totalprice").val() + '</td>\n\
<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
});
$("#table1").on('click', '.remCF', function() {
$(this).parent().parent().remove();
    
    $('#table1 tbody tr').each(function(id){            
        $($(this).find('td')[0]).html(id++);          
    });
     
    
    
});
    
    
    /*creating new click event for save button*/
$("#butsave").click(function() {
var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/
var test_code = new Array(); 
var test_name = new Array();
var generalprice = new Array();
var quantity = new Array();
var totalprice = new Array();
var totalprices = new Array();
var patid = new Array();
for ( var i = 1; i <= lastRowId; i++) {
patid.push($("#"+i+" .patid"+i).html()); /*pushing all the test_code listed in the table*/
test_code.push($("#"+i+" .test_code"+i).html()); /*pushing all the test_code listed in the table*/
test_name.push($("#"+i+" .test_name"+i).html()); /*pushing all the test_name listed in the table*/
generalprice.push($("#"+i+" .generalprice"+i).html()); /*pushing all the gprice listed in the table*/
quantity.push($("#"+i+" .quantity"+i).html()); /*pushing all the quantity listed in the table*/
totalprices.push($("#"+i+" .totalprices"+i).html()); /*pushing all the tprice listed in the table*/
totalprice.push($("#"+i+" .totalprice"+i).html()); /*pushing all the tprice listed in the table*/
}
var sendtest_code = JSON.stringify(test_code); 
var sendtest_name = JSON.stringify(test_name);
var sendgeneralprice = JSON.stringify(generalprice);
var sendquantity = JSON.stringify(quantity);
var sendtotalprices = JSON.stringify(totalprices);
var sendtotalprice = JSON.stringify(totalprice);
var sendpatid = JSON.stringify(patid);
    $.ajax({
url: "rough9process.php",
type: "post",
data: {patid : sendpatid , test_code : sendtest_code , test_name : sendtest_name , generalprice : sendgeneralprice, quantity: sendquantity , totalprices : sendtotalprices ,totalprice : sendtotalprice},
success : function(data){
alert(data); /* alerts the response from php.*/
}
});
});
});
    </script>
    
    <script>
    $(".qtol2,.qtol1").keyup(function() {

  $('.qtol3').val($('.qtol1').val() * $('.qtol2').val());

});
    </script>
    
    
    <script>
        /*get sum in col*/
        $(document).ready(function(){
    var TotalValue = 0;
    $("#table1 tr").each(function(){
          TotalValue += parseFloat($(this).find('.totalprices').text());
    });
    
});
    </script>
    <script>
        $(document).ready(function() {
            $('table thead th').each(function(i) {
                calculateColumn(i);
            });
        });

        function calculateColumn(index) {
            var total = 0;
            $('table tr').each(function() {
                var value = parseInt($('td', this).eq(index).text());
                if (!isNaN(value)) {
                    total += value;
                }
            });
            $('table tfoot td').eq(index).text('Total:' + total);
        }
    </script>
</body>
</html>

tablepage.jpg

Link to comment
Share on other sites

  • 4 weeks later...

Here is the solution:

$("#butsend").click(function() {
    var grandtotal=0;
var newid = id++; 
$("#table1").append('<tr valign="top" id="'+newid+'">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\
<td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\
<td width="100px" class="test_name'+newid+'">' + $("#test_name").val() +  '</td>\n\
<td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\
<td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\
<td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\
<td width="100px" id="qntytolprice" class="totalprice'+newid+'">' + $("#totalprice").val() + '</td>\n\
<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
for (let i =1; i<id ;i++){
grandtotal += parseInt($(".totalprices"+i+"").text() ?  $(".totalprices"+i+"").text()  : 0 );
}
$("#subtotal").val(grandtotal);
});

I have created new var of grandtotal and initialized it with 0 and used for loop for getting GrandTotal of all prices.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...