Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need help with variable input fields / percent calc in JS

    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:

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    just did this for another forum

    Code:
    <!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/Fo...Compendium.htm
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    or even
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wonderful!

    I'll give it a go. Thanks!!

    -Wes

  • #5
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Success

    Vic,
    I needed to do a percentage as well, so this is what I have:

    Code:
    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:

    Code:
    <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

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    have a version to include radio and checkboxes, will post tonight if interested
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    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

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •