...

View Full Version : Need help with variable input fields / percent calc in JS



gmac63
05-31-2006, 08:49 PM
First, I'm not a Javascript programmer so I have _no_ idea how to do what I need. Second here is the code I downloaded and hacked:


<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-Examples.com - http://www.js-examples.com/
-->

<script language="javascript">

function addTotals() {
with (document.forms["f1"])
{
var totalResult = Number( baseRate1.value ) + Number( baseRate2.value ) + Number( baseRate3.value ) + Number( baseRate4.value ) + Number( baseRate5.value );
var pTotal = (totalResult / Number(baseRate.value))*100;
totalR.value = totalResult;
totalP.value = pTotal;
}
}

</script>

</head>
<body>

<form name=f1>
<table cellpadding=2>
<tr><td bgcolor=#ff9999>
Base Rate:</td><td bgcolor=#ff9999>
<input type=text name=baseRate readonly onfocus=this.blur() value=10240 size=6>Kbs
</td></tr><tr><td bgcolor=#dddddd>
Rate One: </td><td bgcolor=#dddddd><input onblur=addTotals() type=text name=baseRate1 size=5>Kbs
</td></tr><tr><td bgcolor=#dddddd>
Rate Two: </td><td bgcolor=#dddddd><input onblur=addTotals() type=text name=baseRate2 size=5>Kbs
</td></tr><tr><td bgcolor=#dddddd>
Rate Three: </td><td bgcolor=#dddddd><input onblur=addTotals() type=text name=baseRate3 size=5>Kbs
</td></tr><tr><td bgcolor=#dddddd>
Rate Four: </td><td bgcolor=#dddddd><input onblur=addTotals() type=text name=baseRate4 size=5>Kbs
</td></tr><tr><td bgcolor=#dddddd>
Rate Five: </td><td bgcolor=#dddddd><input onblur=addTotals() type=text name=baseRate5 size=5>Kbs
</td></tr><tr><td bgcolor=#99ff99>
Total Bandwidth<br>
Used:</td><td bgcolor=#99ff99>
<input type=text name=totalR readonly onfocus=this.blur() size=5>Kbs
</td></tr><tr><td bgcolor=#99ff99>
Total Percentage<br>
Bandwidth Used:</td><td bgcolor=#99ff99>
<input type=text name=totalP readonly onfocus=this.blur() size=5>%
</td></tr>
</table
</form>

</body>
</html>

above I have 5 input fields named "baseRateN" where N is 1-5. The Javascript adds all 5. Suppose I have 1 or more input fields not just 5. How can I get the Javascript to iterate through and add the variable input fields? what do I need to change. Throw me a bone folks. Thanks!!!

-Wes Yates

vwphillips
05-31-2006, 08:59 PM
just did this for another forum


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Total(obj,tot){
var frm=obj.form;
var tobj=frm[tot];
if (!tobj.ary){ tobj.ary=[]; }
if (!obj.ary){ tobj.ary.push(obj); obj.ary=tobj.ary; }
tobj.value='';
var totvale=0;
for (var zxc0=0;zxc0<tobj.ary.length;zxc0++){
totvale+=tobj.ary[zxc0].value.replace(/\D/g,'')*1;
}
tobj.value=totvale;

}
//-->
</script>

</head>

<body>
<form>
<input name="N1" onkeyup="Total(this,'Total1');" onblur="Total(this,'Total1');">
<input name="N2" onkeyup="Total(this,'Total1');" onblur="Total(this,'Total1');">
<input name="N3" onkeyup="Total(this,'Total1');" onblur="Total(this,'Total1');">
<input name="N4" onkeyup="Total(this,'Total1');" onblur="Total(this,'Total1');">
<input name="Total1" disabled="disabled">
<br>
<input name="N11" onkeyup="Total(this,'Total2');" onblur="Total(this,'Total2');">
<input name="N12" onkeyup="Total(this,'Total2');" onblur="Total(this,'Total2');">
<input name="N13" onkeyup="Total(this,'Total2');" onblur="Total(this,'Total2');">
<input name="N14" onkeyup="Total(this,'Total2');" onblur="Total(this,'Total2');">
<input name="Total2" disabled="disabled">
<br>
</form>
</body>

</html>

see also

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm

vwphillips
05-31-2006, 09:36 PM
or even


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (31-May-2006) http://www.vicsjavascripts.org.uk

function zxcTotal(zxcevt,zxctotal){
var zxcobj=zxcEventObj(zxcevt);
var zxctobj=zxcobj.form[zxctotal];
if (!zxctobj.ary){ zxctobj.ary=[zxctobj]; }
if (!zxcobj.ary){ zxctobj.ary.push(zxcobj); zxcobj.ary=zxctobj.ary; }
zxcAddEvt(zxcobj,'zxcCalTotal','keyup');
zxcAddEvt(zxcobj,'zxcCalTotal','blur');
}

function zxcCalTotal(){
this.ary[0].value='';
var zxcvalue=0;
for (var zxc0=0;zxc0<this.ary.length;zxc0++){
zxcvalue+=this.ary[zxc0].value.replace(/\D/g,'')*1; // Only Digits
}
this.ary[0].value=zxcvalue;
}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}


function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}


var zxcEvt=0;

function zxcAddEvt(zxco,zxcfun,zxcevt){
if (zxco['zxc'+zxcfun+zxcevt]){ return; }
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

//-->
</script>

</head>

<body>
<form>
<input name="N1" onmouseover="zxcTotal(event,'Total1')">
<input name="N2" onmouseover="zxcTotal(event,'Total1')">
<input name="N3" onmouseover="zxcTotal(event,'Total1')">
<input name="N4" onmouseover="zxcTotal(event,'Total1')">
<input name="Total1" disabled="disabled">
<br>
<input name="N11" onmouseover="zxcTotal(event,'Total2')">
<input name="N12" onmouseover="zxcTotal(event,'Total2')">
<input name="N13" onmouseover="zxcTotal(event,'Total2')">
<input name="N14" onmouseover="zxcTotal(event,'Total2')">
<input name="Total2" disabled="disabled">
<br>
</form>


</body>

</html>

gmac63
06-01-2006, 01:12 AM
I'll give it a go. Thanks!!

-Wes

gmac63
06-01-2006, 03:54 AM
Vic,
I needed to do a percentage as well, so this is what I have:


function Total(obj,tag,base){
var thisForm=obj.form;
var outputTagID=thisForm[tag];
if (!outputTagID.array){ outputTagID.array=[]; }
if (!obj.array){ outputTagID.array.push(obj); obj.array=outputTagID.array; }
outputTagID.value='';
var totvale=0;
for (var a=0;a<outputTagID.array.length;a++){
// supplies the addition
totvale+=outputTagID.array[a].value.replace(/\D/g,'')*1;
}
outputTagID.value=totvale;
// percentage code
baseRate = base;
var outputTagID2 = thisForm['Total2'];
var pTotal = (totvale / baseRate)*100;
outputTagID2.value= pTotal;
}

and the form has:


<tr><td bgcolor=#dddddd>
Rate One: </td><td bgcolor=#dddddd><input onblur=Total(this,'Total1',10240) type=text size=5>Kbs
</td></tr

I will be using php to replace the 10240 with a variable, but it will work!! Whoo hoo! Thanks!

-Wes

vwphillips
06-01-2006, 07:44 AM
have a version to include radio and checkboxes, will post tonight if interested

gmac63
06-01-2006, 02:11 PM
have a version to include radio and checkboxes, will post tonight if interested

Appreciated immensely, but I'm good with this. However, I might want to see that at a later time for a similar issue.

Just for information:

This script that you helped me on is for calcualting the total bandwidth allocated over a varying number of "settings" with a percent calculation to ensure that the total does not exceed 100%. I tell you, it really works great! Now to code the rest.

Thanks again!

-Wes

vwphillips
06-01-2006, 04:00 PM
http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f67



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum