Develop Reference

how to calculate text field value without submit button

I am trying to calculate a value without a submit button. If a user enters the weight, height and number of PCs then my code should calculate the value and display it in the total text field automatically without refreshing the page. How can I do that?
This is my calculation: total = weight * height * no of pcs
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>

try this code
javascript code
<script type="text/javascript">
function getOrderTotal() {
var iweight= document.myform.weight.value;
var iheight= document.myform.iheight.value;
var ino= document.myform.no.value;
if(!iweight.match(recurrency)) {
alert('Please provide an item cost in 0.00 format!');
}
else {
var ifinal=iweight * iheight * ino;
);
ifinal *= 100;
ifinal = Math.ceil(ifinal);
ifinal /= 100;
if(ifinal) {
ifinal = ifinal;
}
document.getElementById('mytotal').value = ifinal;
}
}
html code
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<label>
<span>Weight:</span>
<input name="weight" type="text" id="weight" onchange="getOrderTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="height" id="height" type="text" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="mytotal" value="0" size="3" maxlength="4"/>
</label>
</div>

with jquery
$( '[name="mytax"]' ).change(function() {
//add here your formula
});

You will Use something like this
Include jquery code in your file
<script>
$(document).ready(function() {
$('input[name="no"]').keyup(function() {
var kg = $('input[name="kg"]').val();
var mytax = $('input[name="mytax"]').val();
var no = $('input[name="no"]').val();
var total = parseInt(kg) * parseInt(mytax) * parseInt(no);
$('input[name="Total"]').val(total);
});
});
</script>
Hope it will Work

Try this:
In html add ids to all input fields so that we can easily identify any element:
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" id="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" id="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" id="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" id="no" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="total" id="total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>
jquery:
1) check if value not then store value in any variable with parseFloat
here we have use parseFloat because because price or weight may be in float value.
$( document ).ready(function() {
$('#kg, #mytax, #no').change(function () {
var kg = ($("#kg").val() != "") ? parseFloat($("#kg").val()) : 0;
var mytax = ($("#mytax").val() != "") ? parseFloat($("#mytax").val()) : 0;
var no = ($("#no").val() != "") ? parseFloat($("#no").val()) : 0;
var total = kg * mytax * no;
$('#total').val(total);
});
});

Without using JQuery or any other JavaScript Library, the plain vanilla JavaScript solution will be to tap the "keypress" event.
Here is an example code just to give you the idea:
<html>
<head>
<script>
function calculate () {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
document.getElementById("result").innerHTML = a * b;
}
</script>
</head>
<body>
First Value <input type="text" id="a"></input>
<br>
Second Value <input type="text" id="b" onkeyup="calculate()"></input>
<br>
<div id="result"></div>
</body>
</html>
The function calculate() is invoked on key press. It takes the value and does the multiplication.

You can try this.
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" id="weight" onblur="findTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" id="height" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="nopc" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="total" value="0" size="3" maxlength="4"/>
</label>
</div>
<script type="text/javascript">
function findTotal(){
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
var pc = document.getElementById('nopc').value;
total = weight * height * pc;
if(isNaN(total)){
alert("Please enter only numbers");
}
document.getElementById('total').value = total;
}
</script>

number increment button

I have an existing html form which use array to store multiple row values. So I do not have a specific name for the same field for different row. In the PHP page i match the row according to the index.
In the form below, how do I make the button + and - to increase and decrease the value of the quantity of the specific row?
ROW 1
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>`
ROW 2
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
ROW 3
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>

In my opinion you first should to numerate items:
<input type="text" name="product[]" />
<input id="price-1" type="text" name="price[]" value="" onChange="updatePrice(1)" /> <!-- row number -->
<input id="qty-1" type="text" name="quantity[]" value="" onChange="updatePrice(1)" />
<input type="button" onclick="inc('qty-1')" value="+"/>
<input type="button" onclick="dec('qty-1')" value="-"/>
Then use javascript to manipulate items:
<script>
function inc(id) {
stepQty(id, +1);
}
function dec(id) {
stepQty(id, -1);
}
function stepQty(id, step) {
var value = $('#'+id).val();
$('#'+id).val(value + step);
}
function updatePrice(id) {
var a = $('#price-'+id).val() || 0;
var b = $('#qty-'+id).val() || 0;
$('#'+id).val(a*b);
}
</script>

PHP multiplication and subtraction scripts

I am attempting to make a php script that will calculate the total miles driven by a car rental customer (.12 cents per mile) which multiplies that value to the number of days they rented the car ($15 a day) and display that grand total in a textarea box along with their name and address. I am fairly new to php and I have no clue how to project this idea into php code. I have a fully html version of this code working, but am lacking the knowledge with php to translate it.
Anyone have any ideas on how I can write this script?
<?php
if(isset($_POST['submit'])) {
$x = $_POST['bOdometer'];
$y = $_POST['eOdometer'];
$z = $_POST['daysRented'];
$miles = $y - $x; {
$result = (15 * $z) + ($miles * 0.12);
echo $result; } }
?>
<body>
<div align="center">
<hr>
<br>
<form method="post" name id="Main">
<input type="text" id="name" name="customerName" placeholder="Enter your name here" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" placeholder="Enter your street address here" size="50px">
<br><br>
<input type="text" id="city" name="customerCity" placeholder="What city do you live in?" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" placeholder="Enter your zip code" size="30px">
<br><br>
<input type="number" id="bOdometer" name="beginningOdometerReading" placeholder="Start odometer reading" size="80px">
<br><br>
<input type="number" id="eOdometer" name="endingOdometerReading" placeholder="End odometer reading" width="80px">
<br><br>
<input type="number" id="daysRented" name="endingOdometerReading" placeholder="Days rented" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id='miles' min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' min="1" max"10000" readonly="" />
<br><br>
<input type="button" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea"> </textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
Here is the working HTML version of this problem.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var customerName = Main.name.value;
var customerAdd = Main.address.value;
var totalCost = document.getElementById('result').value;
var area = document.getElementById("textarea");
area.value='Name: '+customerName+'\nAddress: '+customerAdd+'\nTotal Cost: $'+totalCost+'';}
</script>
<script type="text/javascript">
function multiply() {
var b = document.getElementById('bOdometer').value;
var e = document.getElementById('eOdometer').value;
var result = document.getElementById('miles');
var myResult = (e - b);
result.value= myResult;
var d = document.getElementById('daysRented').value;
var m = document.getElementById('miles').value;
var result2 = document.getElementById('result');
var myResult2 = (d * 15 + m * 0.12);
result2.value= myResult2;
}
</script>
</head>
<body>
<div align="center">
<hr>
<br>
<form name id="Main">
<input type="text" id="name" name="customerName" placeholder="Enter your name here" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" placeholder="Enter your street address here" size="50px">
<br><br>
<input type="text" id="city" name="customerCity" placeholder="What city do you live in?" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" placeholder="Enter your zip code" size="30px">
<br><br>
<input type="number" id="bOdometer" name="beginningOdometerReading" placeholder="Start odometer reading" size="80px">
<br><br>
<input type="number" id="eOdometer" name="endingOdometerReading" placeholder="End odometer reading" width="80px">
<br><br>
<input type="number" id="daysRented" name="endingOdometerReading" placeholder="Days rented" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id='miles' min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' min="1" max"10000" readonly="" />
<br><br>
<input type="button" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea"> </textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>

You haven't added a submit button yet.
Replace
input type="button" value="Generate Summary!" onclick="javascript:calculate();"/>
With
input type="submit" value="Calculate " />

<?php
if(isset($_POST['summary']))
{
$x = $_POST['bOdometer'];
$y = $_POST['eOdometer'];
$z = $_POST['daysRented'];
$name=$_POST["customerName"];
$address=$_POST["customerAdd"];
$city=$_POST["customerCity"];
$zip=$_POST["customerZip"];
$miles = $y - $x;
$result = (15 * $z) + ($miles * 0.12);
$summary= 'Name: '.$name. 'Address:'.$address.'Cost'.$result;
?>
<body>
<div align="center">
<hr>
<br>
<form method="post">
<input type="text" id="name" name="customerName" value ="<?php echo $name;?>" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" value ="<?php echo $address;?>"size="50px">
<br><br>
<input type="text" id="city" name="customerCity" value = "<?php echo $city;?>" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" value = "<?php echo $zip;?>" size="30px">
<br><br>
<input type="number" id="bOdometer" name="bOdometer" value ="<?php echo $x;?>" size="80px">
<br><br>
<input type="number" id="eOdometer" name="eOdometer" value ="<?php echo $y;?>" width="80px">
<br><br>
<input type="number" id="daysRented" name="daysRented" value="<?php echo $z;?>" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id="miles" name ="customerAdd" min="1" max"10000" readonly="" />
Total Cost: <input type="number" id= "result" name ="totalCost" min="1" max"10000" readonly="" />
<br><br>
<input type="submit" name ="summary" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea" name ="txt" ><?php echo $summary;?></textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
<?php
}
else
{
?>
<body>
<div align="center">
<hr>
<br>
<form method="post" name id="Main">
<input type="text" id="name" name="customerName" placeholder="Enter your name here" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" placeholder="Enter your street address here" size="50px">
<br><br>
<input type="text" id="city" name="customerCity" placeholder="What city do you live in?" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" placeholder="Enter your zip code" size="30px">
<br><br>
<input type="number" id="bOdometer" name="bOdometer" placeholder="Start odometer reading" size="80px">
<br><br>
<input type="number" id="eOdometer" name="eOdometer" placeholder="End odometer reading" width="80px">
<br><br>
<input type="number" id="daysRented" name="daysRented" placeholder="Days rented" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id='miles' name ="customerAdd" min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' name ="totalCost" min="1" max"10000" readonly="" />
<br><br>
<input type="submit" name ="summary" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea"> </textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
<?php
}
?>
Few pointers
Please name each and every html control that you put in, so that retrieve by $_POST[]

How do I create a matrix in html and then parse it to javascript?

So, I am fairly new to JavaScript and I want to create a box for the user to input matrix mxn then parse the input to JS. I know how to create row and column in html, but I have no idea with the JS.
This is what I have so far.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="submit" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian(){
var myArr = document.forms.inputField;
var myControls = myArr.elements['p_id'];
for(var i =0; i<myControls.length; i++){
var aControl = myControls[i];
document.getElementById("resultField").append=aControl;
}
}
</script>

After a few adjustments, the code is displayed below. Note that the variable name_value_array holds a map which store all values from the table, having as the key the input name and as stored value the input value.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian() {
var myArr = document.forms.inputField;
var myControls = myArr;
var name_value_array = [];
for (var i = 0; i < myControls.length; i++) {
var aControl = myControls[i];
// don't print the button value
if (aControl.type != "button") {
// store value in a map
name_value_array.push(aControl.value, aControl.name);
document.getElementById("resultField").appendChild(document.createTextNode(aControl.value + " "));
}
}
// show map values as a popup
alert(JSON.stringify(name_value_array));
}
</script>

Try the CSS selector string for 'starts with' aka ^= to grab all values with names starting with field, perhaps make it an array so as to save the name value numbers at the same time:
window.calcJacobian = function() {
var myArr = document.querySelectorAll('input[name^="field"]')
for (var i = 0; i < myArr.length; i++) {
var results = "\nfield: " + myArr[i].name.substring(5) + ", value: " + myArr[i].value;
var text = document.createTextNode(results);
document.querySelector('#resultField').appendChild(text);
}
}
#resultField {
white-space: pre-line;
}
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3" />
<input type="text" name="field01" size="3" />
<input type="text" name="field02" size="3" />
<input type="text" name="field03" size="3" />
<br>
<input type="text" name="field10" size="3" />
<input type="text" name="field11" size="3" />
<input type="text" name="field12" size="3" />
<input type="text" name="field13" size="3" />
<br>
<input type="text" name="field20" size="3" />
<input type="text" name="field21" size="3" />
<input type="text" name="field22" size="3" />
<input type="text" name="field23" size="3" />
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info" />
</form>
<div id="resultField"></div>
</div>
</div>

Adding looped variables in Jquery and storing in input field [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I know nothing about Javascript/Jquery etc but using Google and people answers I am using the following to add x number of fields together and showing in a subtotal box.
The following script loops so each time you see a 1 that will increment each loop count. Meaning the totals for each count are displayed, editing any number will only update that section total.
var $form = $('#locations'),
$summands1 = $form.find('.addme1'),
$sumDisplay1 = $('#incoming1');
$form.delegate('.addme1', 'change', function () {
var sum = 0;
$summands1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay1.val(sum);
$summandsa1 = $form.find('.addmea1'),
$sumDisplaya1 = $('#outgoing1');
});
$form.delegate('.addmea1', 'change', function () {
var sum = 0;
$summandsa1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplaya1.val(sum);
});
This is an example form
<form id="locations" method='post' action=''>Loop 1
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="300" name="" id="incoming1">
<input type="text" value="600" name="" id="outgoing1">
<br>Loop 2
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="300" name="" id="incoming2">
<input type="text" value="600" name="" id="outgoing2">
<br>
<br>
<br>Total :
<input type="text" value="600" name="" id="totalin">
<input type="text" value="1200" name="" id="totalout"><br>
Profit :
<input type="text" value="600" name="" id="profit">
</form>
What I need is a way of adding the incoming1 incoming2 plus any other incomingx values there are and storing in totalin, likewise with outgoing1,2etc then having the profit update with totalout-totalin. So if a value is changed from what they are currently set it will automatically update all the other fields.
Can anyone help with this?
Fiddle here : http://jsfiddle.net/Gt473/3/
Note that loop 2 doesn't work as I am not sure how to repeat the script on jsfiddle but it does work on the html page.

I am not sure what your requirement was.But this is my take on it, the answer I posted mighty not what you are looking for.And also the code below can be written better but that's for you to research.
<form id="locations" method='post' action=''>
<fieldset class="level">
<legend>Loop1</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop2</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop3</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop4</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop5</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="total">
<legend>Total</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" id="totalIncoming" disabled>
<input type="text" value="" name="" id="totalOutgoing" disabled>
</fieldset>
<fieldset>
<legend>Profit</legend>
<input type="text" value="" name="" id="profit" disabled>
</fieldset>
</form>
var $form = $('#locations'),
$totalIncoming = $('#totalIncoming'),
$totalOutgoing = $('#totalOutgoing'),
$profit = $('#profit');
$form.on('input', '.level input', function () {
var textBoxClass = $(this).attr('class'),
$level = $(this).closest('.level'),
$subTextBox = null,
$totalTextBox = null,
$textBoxes = null,
$subTextBoxes = null,
subSum = 0,
totalSum = 0;
if(textBoxClass === 'incoming'){
$textBoxes = $level.find('.incoming');
$subTextBox = $level.find('.subIncoming');
$totalTextBox = $('#totalIncoming');
$subTextBoxes = $form.find('.subIncoming');
}else{
$textBoxes =$level.find('.outgoing');
$subTextBox = $level.find('.subOutgoing');
$totalTextBox = $('#totalOutgoing');
$subTextBoxes = $form.find('.subOutgoing');
}
$textBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) subSum += value;
});
$subTextBox.val(subSum);
$subTextBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) totalSum += value;
});
$totalTextBox.val(totalSum);
$profit.val($totalIncoming.val() - $totalOutgoing.val())
});