Jump to content

How to display sub total in text box when item and total price add in row?


santan lal das
 Share

Recommended Posts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> </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>
$(document).ready(function() {
var id = 1;

$("#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"><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++);          
    });
    
});
    
    
    
$("#butsave").click(function() {
var lastRowId = $('#table1 tr:last').attr("id");
var test_code = new Array();
var test_name = new Array();
var generalprice = new Array();
var quantity = new Array();

var totalprices = new Array();
var patid = new Array();
for ( var i = 1; i <= lastRowId; i++) {
patid.push($("#"+i+" .patid"+i).html());
test_code.push($("#"+i+" .test_code"+i).html());
test_name.push($("#"+i+" .test_name"+i).html());
generalprice.push($("#"+i+" .generalprice"+i).html());
quantity.push($("#"+i+" .quantity"+i).html());
totalprices.push($("#"+i+" .totalprices"+i).html());
totalprice.push($("#"+i+" .totalprice"+i).html());
}

});
});
    </script>
    
    <script>
    $(".qtol2,.qtol1").keyup(function() {

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

});
    </script>
    
    
</head>
<body>
    <div class="form-group">
    <form>
        <input name="patid" type="text" id="patid" placeholder="patid" value="">
        
        <div class="container" id="multiple">
        <input name="test_code" type="text" id="test_code" placeholder="code" value="">
        <input name="test_name" type="text" id="test_name" placeholder="Item Name" value="">
        <input class="qtol1"  name="generalprice" type="text" id="generalprice" placeholder="general price">
        <input  class="qtol2" name="quantity" type="text" id="quantity" value="1" onClick="calc()" placeholder="quantity">
        <input class="qtol3" name="totalprices" type="text" id="totalprices" placeholder="total prices">
        <input name="send" type="button" id="butsend"  class="add-row" value="Add 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>
    <thead>
<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>Action</th>
</tr>
        </thead>
</tbody>

        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>Total:</td>
                <td ><input id="subtotal" type="text"></td>
                
                <td>
                    
                </td>
            </tr>
        </tfoot>
        
        </table>
        
         </form>
        </div>
    
    
    
    
</body>
</html>

 

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
 Share

×
×
  • Create New...