[Webinar] Streamline your web hosting managementRegister Today

  • 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?
1 Solution
David H.H.LeeCommented:
Hi manivineet,
You may try this jQuery plugin called Calculation Plug-in
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

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
			  var inputA = $('#row1_inputA').val();
			  var inputB = $('#row1_inputB').val();
			  $('#row1_total').val(inputA * inputB);	
			  var inputA = $('#row2_inputA').val();
			  var inputB = $('#row2_inputB').val();
			  $('#row2_total').val(inputA * inputB);	
		<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"/>
		<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"/>


Open in new window

manivineetAuthor Commented:
Thanks Andy

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