how to calculate text field value without submit button - javascript

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>

Related

Change a CSS display style in Javascript

I have a problem with a bit of my javascript code.
I am trying to get my #showAddress to display: block when the deliverservice radio button is clicked/checked.
I've tried looking at some Stack Overflow posts but a lot of them are too advanced for my current level (I just started JavaScript).
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
</p>
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
<p>
I believe the error is happening in my JavaScript, however it's only two functions. The first two lines are my initialise function, which is calling my second function down below.
var showDelivery = document.getElementById("deliverService");
showDelivery.onclick = showAddress;
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
You should change this line
showDelivery.onclick = showAddress;
to something like this:
showDelivery.onclick = function(){showAddress();};
Alternatively, you can set the onclick listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
EDIT: An example of using addEventListener
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
#additionalInformation, #showAddress {
display: none;
}
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
Billing address same as Above
</p>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>

How to get data-attribute value of elements which is greater than given value using jquery?

I have few textboxes and data-attrribute for installment number.
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If my installment number is 15. i want to get controls have data-instno>=15. that means last 5 textboxes in this case.
Use jQuery Has Attribute Selector [name] to selecting target elements and use .filter() to filtering element has data-instno great than 15.
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).doSomething();
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).css("background", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If you want to get value of data-instno use this
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
Just plain JavaScript:
console.log(
[].filter.call(document.getElementsByTagName('INPUT'),
function(elem) {
return elem.dataset.instno >= 15;
})
);
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
var arrNumber = new Array();
$('input[type=text]').each(function(){
if($(this).attr('data-instno') >= 15){
arrNumber.push($(this).attr('data-instno'));
}
});
use this you will get this as an array

disable/able textbox onclick radio button

im sorry but i tried everything that's available in the internet but all "solutions" doesnt work.
if the radio button is clicked, the textbox under that radio button will be enabled.else disabled.
pls help me with this.when i click the radio button, the textbox is still disabled.
js
function radioModeOfPayment(x){
if(document.getElementById('mMininum').checked == true){
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if(document.getElementById('numMonth').checked == true){
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
html
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Minimum Payment</label><br>
<input type="text" class="tlabel" readonly="true" value="Amount"> <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value=""><br>
<input type="text" class="tlabel" readonly="true" value="Starting Date"> <input type="date" disabled="disabled" id="first" name="sdate"><br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Number of Months</label><br>
<input type="text" class="tlabel" readonly="true" value="Months"> <input type="text" class="tlabel w3-border" readonly="true" id="numMonth-months" name="numMonth-months" value=""><br>
</div>
remove input text readonly attribute
function radioModeOfPayment(x) {
if (document.getElementById('mMininum').checked == true) {
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if (document.getElementById('numMonth').checked == true) {
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Amount">
<input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly="true" value="Starting Date">
<input type="date" disabled="disabled" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
EDIT 2
In Snippet 2 it is exactly the same as OP's layout. By adding nth-of-type, the inputs on the right-side are the only inputs that are enabled and disabled while the ones on the left are unaffected. The attribute disabled and have been removed.
EDIT
Sorry forgot OP wants radio buttons, it works just as well.
Here's a simple CSS only solution.
This uses:
adjacent sibling selector
pointer-events
SNIPPET 1
.chx:checked + input {
pointer-events: none;
}
.chxs:checked ~ input {
pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
pointer-events: none;
}
<p>This example uses + which affects only the sibling that's immediately after .chx</p>
<input class='chx' type='checkbox'>
<input>
<br/>
<br/>
<p>This example uses ~ which affects all siblings that follow .chxs</p>
<input class='chxs' type='checkbox'>
<input>
<input>
<input>
<br/>
<br/>
<p>Works on radio buttons as well</p>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
SNIPPET 2
.w3-radio:checked ~ input:nth-of-type(2n-1) {
pointer-events: none;
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly=true value="Amount">
<input type="text" class="tlabel w3-border" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly=true value="Starting Date">
<input type="date" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly=true value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>

My javascript calculator is not holding onto values

VERY simple javascript calculator at http://trailmeister.com/calculator.html
The function "Calculate" happens on any variable input change, and the "Calculate" link runs a simple function that fills the value of the form element "tripweight" with an arbitrary value (for now) - it sems to work, then immediately reverts to empty... ideas?
Javascript (form is below):
function calculate(){
safecarry();
//tripweight();
tackweightsub();
}
/* SAFE CARRY */
function safecarry(){
document.forms['calculator'].safecarry.value = document.forms['calculator'].equineweight.value * .2
}
/* TOTAL TRIP WEIGHT*/
function tripweight() {
document.forms['calculator'].tripweight.value = 12
}
// riderweight+tackweightsub+gearweightsub+foodweightsub
/* CAPACITY
function
safecarry-triptotal
*/
/* PERCENTAGE
function
capacity / safecarry
*/
/* TACK WEIGHT SUBTOTAL */
function tackweightsub(){
document.forms['calculator'].tackweightsub.value = parseFloat(saddle.value) + parseFloat(saddlepad.value) + parseFloat(bridle.value) + parseFloat(reins.value) + parseFloat(crupper.value) + parseFloat(saddlebags.value) + parseFloat(cantlebags.value) + parseFloat(pommelbags.value) + parseFloat(packsaw.value) + parseFloat(othertack.value)
}
/* CAMP WEIGHT SUBTOTAL */
function campweightsub(){
document.forms['calculator'].campweightsub.value = parseFloat(sleepingbag.value) + parseFloat(sleepingpad.value) + parseFloat(tent.value) + parseFloat(tarp.value) + parseFloat(waterfilter.value) + parseFloat(campstove.value) + parseFloat(stovefuel.value) + parseFloat(cookpot.value) + parseFloat(highline.value) + parseFloat(othercamp.value)
}
/* FOOD WEIGHT SUBTOTAL*/
function foodweightsub(){
document.forms['calculator'].foodweightsub.value = parseFloat(humanfood.value) + parseFloat(equinefood.value) + parseFloat(otherfood.value)
}
<form class="form" id="calculator" name="calculator">
<h2> PACK WEIGHT CALCULATOR </h2>
<p class="name">Equine Weight: <input onchange="calculate();" name="equineweight" type="text" placeholder="Equine Weight" value="1100" id="equineweight" /></p>
<p class="name">Pounds Your Horse Can Safely Carry: <input readonly="readonly" name="safecarry" type="text" value="220" placeholder="" id="safecarry" /></p>
<p class="name">Riders Weight: <input = name="riderweight" type="text" value="175" placeholder="" id="riderweight" /></p>
<p class="name">Total Weight for your trip: [ calculate ] <input = name="tripweight" type="text" placeholder="" id="tripweight" /></p>
</p>
<hr>
<p class="name">Capacity: <input name="capacity" type="text" value="0" placeholder="" id="capacity" /></p>
<p class="name">Percentage Over Optimal: <input name="percentage" type="text" value="0" placeholder="" id="percentage" /></p>
</p>
<hr>
<p class="name">Tack Weight Subtotal: <input readonly="readonly" name="tackweightsub" type="text" value="43" placeholder="" id="tackweightsub" /></p>
<p class="name">Saddle: <input onchange="calculate();" name="saddle" type="text" value="31" placeholder="" id="saddle" /></p>
<p class="name">Saddle Pad: <input onchange="calculate();" name="saddlepad" type="text" value="5" placeholder="" id="saddlepad" /></p>
<p class="name">Bridle: <input onchange="calculate();" name="bridle" type="text" value="0.75" placeholder="" id="bridle" /></p>
<p class="name">Reins: <input onchange="calculate();" name="reins" type="text" value="1" placeholder="" id="reins" /></p>
<p class="name">Crupper: <input onchange="calculate();" name="crupper" type="text" value="0.5" placeholder="" id="crupper" /></p>
<p class="name">Saddle Bags: <input onchange="calculate();" name="saddlebags" type="text" value="1" placeholder="" id="saddlebags" /></p>
<p class="name">Cantle Bags: <input onchange="calculate();" name="cantlebags" type="text" value="0.75" placeholder="" id="cantlebags" /></p>
<p class="name">Pommel Bags: <input onchange="calculate();" name="pommelbags" type="text" value="0.5" placeholder="" id="pommelbags" /></p>
<p class="name">Pack Saw: <input onchange="calculate();" name="packsaw" type="text" value="2" placeholder="" id="packsaw" /></p>
<p class="name">First Aid Kit: <input onchange="calculate();" name="firstaid" type="text" value="0.5" placeholder="" id="firstaid" /></p>
<p class="name">Other: <input onchange="calculate();" name="othertack" type="text" value="0" placeholder="" id="othertack" /></p>
</p>
<hr>
<p class="name">Camp Weight Subtotal: <input readonly="readonly" name="campweightsub" type="text" value="8" placeholder="" id="campweightsub" /></p>
<p class="name">Sleeping Bag: <input onchange="calculate();" name="sleepingbag" type="text" value="2" placeholder="" id="sleepingbag" /></p>
<p class="name">Sleeping Pad: <input onchange="calculate();" name="sleepingpad" type="text" value="1" placeholder="" id="sleepingpad" /></p>
<p class="name">Tent: <input onchange="calculate();" name="tent" type="text" value="1" placeholder="" id="tent" /></p>
<p class="name">Tarp: <input onchange="calculate();" name="tarp" type="text" value="0.5" placeholder="" id="tarp" /></p>
<p class="name">Water Filter: <input onchange="calculate();" name="waterfilter" type="text" value="0.5" placeholder="" id="waterfilter" /></p>
<p class="name">Camp Stove: <input onchange="calculate();" name="campstove" type="text" value="0.25" placeholder="" id="campstove" /></p>
<p class="name">Stove Fuel: <input onchange="calculate();" name="stovefuel" type="text" value="0.5" placeholder="" id="stovefuel" /></p>
<p class="name">Cook Pot: <input onchange="calculate();" name="cookpot" type="text" value="0.75" placeholder="" id="cookpot" /></p>
<p class="name">Highline Kit: <input onchange="calculate();" name="highline" type="text" value="1" placeholder="" id="highline" /></p>
<p class="name">Other: <input onchange="calculate();" name="othercamp" type="text" value="0" placeholder="" id="othercamp" /></p>
</p>
<hr>
<p class="name">Food Weight Subtotal: <input readonly="readonly" name="foodweightsub" type="text" value="4.5" placeholder="" id="foodweightsub" /></p>
<p class="name">Human Food: <input onchange="calculate();" name="humanfood" type="text" value="2.5" placeholder="" id="humanfood" /></p>
<p class="name">Equine Food: <input onchange="calculate();" name="equinefood" type="text" value="2" placeholder="" id="equinefood" /></p>
<p class="name">Other: <input onchange="calculate();" name="otherfood" type="text" value="0" placeholder="" id="otherfood" /></p>
</p>
<hr>
<div class="ease"></div>
</form>
Your <a> tag is reloading the entire page. To prevent this add "#" to the href attribute. Like this:
[ calculate ]

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

Categories

Resources