[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 497
  • Last Modified:

use jquery to calculate input

have a look at the sample image

There could ba 2 (or) more rows with input fields.

Now, I want to use JQuery to be able to the following:
If I change one element, it changes the value of other fields.
e.g. for the 1st row if I change the value from 2 to 3, the result should change to 9.
the calculation has to be on a row by row basis.

how do I do it?
test.png
0
manivineet
Asked:
manivineet
1 Solution
 
David H.H.LeeCommented:
Hi manivineet,
You may try this jQuery plugin called Calculation Plug-in
http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
0
 
Andyc75Commented:
Here is some code I wrote that does what you described in the image

If the value in row 1 changes the total will change in row 1.
if the value in row 2 changes the total will change in row 2


<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	  $(document).ready(function(){
	  
		$('.row1').change(function(){
			  var inputA = $('#row1_inputA').val();
			  var inputB = $('#row1_inputB').val();
			  $('#row1_total').val(inputA * inputB);	
		 });
		 
		 $('.row2').change(function(){
			  var inputA = $('#row2_inputA').val();
			  var inputB = $('#row2_inputB').val();
			  $('#row2_total').val(inputA * inputB);	
		 });
	  
	  });
	</script>
</head>
<body>
	<form>
	<table><tr>
		<td>
		<input id="row1_inputA" class="row1" type="text" value="2"/>
		<input id="row1_inputB" class="row1" type="text" value="2"/>
		<input id="row1_total" type="text" value="6"/>
		</td>
	</tr><tr>
		<td>
		<input id="row2_inputA" class="row2" type="text" value="3"/>
		<input id="row2_inputB" class="row2" type="text" value="4"/>
		<input id="row2_total" type="text" value="12"/>
		</td>
	</tr>
	</form>
</body>

</html>

Open in new window

0
 
manivineetAuthor Commented:
Thanks Andy
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now