Jump to content
santan lal das

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

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.   Paste as plain text instead

  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.

Loading...

×
×
  • Create New...