Click here to Skip to main content
15,919,931 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
<!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>
   

    <P>here is jquery and javascript</p>
	<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>
	

   <p> java script</p>
	<script>
	$(".qtol2,.qtol1").keyup(function() {

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

});
	</script>
	
	
</head>
<body>

   <p> here is  html</p>
	<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>


What I have tried:

how to display sub total in text box when item and total price add in row?
Posted
Updated 24-Feb-20 14:28pm
v2
Comments
ZurdoDev 18-Feb-20 16:05pm    
Write some code. Where are you stuck?

As you have tried, you have a problem to get the total price, so you should put your code in the main script instead of writing it in another new script.

For display subtotal in the text box when item and total price add-in row following code will placed in (document).ready(function ():

JavaScript
var sum = 0;
               var sub = $('#subtotal').val(sum);
               $("#butsend").click(function () {
                   var newid = id++;
                   var txtValue = Number($('.qtol3').val());
                   sum += txtValue;
                   $('#subtotal').val(sum);}
 
Share this answer
 
Comments
Member 13751016 20-Feb-20 5:48am    
if i remove(delete) the row then what the code is subration ?
Member 13751016 25-Feb-20 3:08am    
hellow can you help me for this problem?
https://www.codeproject.com/Questions/5260455/How-I-can-get-grand-total-output-when-h-s-tax-adde?cmt=1038048#cmt1038048
If you are removing (delete ) the row then you should write the following code for the delete button id which we are appending.

JavaScript
<pre><td width="100px"><button class="remCF" id="' + newid + '" >Remove</button></td>\n\ </tr>');



Then you should add the following code to get the id of the delete button which is clicked and subtract that id's total_price from the subtotal.

JavaScript
$("#table1").on('click', '.remCF', function () {

                   var classname = '.totalprices' + $(this)[0].id;
                   var num = $(classname)[0].innerHTML
                   sum = sum - Number(num);
                   $('#subtotal').val(sum);
                   $(this).parent().parent().remove();
                   $('#table1 tbody tr').each(function (id) {
                       $($(this).find('td')[0]).html(id++);
                   });

               });
 
Share this answer
 
v2
Comments
Member 13751016 25-Feb-20 3:09am    
hellow can you help me for this problem?
https://www.codeproject.com/Questions/5260455/How-I-can-get-grand-total-output-when-h-s-tax-adde?cmt=1038048#cmt1038048

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900