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

Question

1.00/5 (1 vote)

See more:

<!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 17-Feb-20 22:14pm

Member 13751016

Updated 24-Feb-20 14:28pm

v2

Add a Solution

Comments

ZurdoDev 18-Feb-20 16:05pm

Write some code. Where are you stuck?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

ishan_shah · Accepted Answer · 2020-02-19T23:03:00

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);}

ishan_shah · Accepted Answer · 2020-02-20T21:50:00

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++);
                   });

               });

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

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0