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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to add up dynamic totals?

    I haveI have ten functions (I know this is a drawn out way of coding) and the last function doesn't work.

    Its supposed to total up the result of the first 9 functions, but it doesn't change my input at all.

    can I resolve this?

    Code:
    <script type="text/javascript">
    function updatesuma(){ document.form.suma.value =(document.form.sum1a.value-0)- (document.form.sum2a.value -0); }*
    function updatesumb(){ document.form.sumb.value =(document.form.sum1b.value-0)- (document.form.sum2b.value -0); }*
    function updatesumc(){ document.form.sumc.value =(document.form.sum1c.value-0)- (document.form.sum2c.value -0); }*
    function updatesumd(){ document.form.sumd.value =(document.form.sum1d.value-0)- (document.form.sum2d.value -0); }
    function updatesume(){ document.form.sume.value =(document.form.sum1e.value-0)- (document.form.sum2e.value -0); }*
    function updatesumf(){ document.form.sumf.value =(document.form.sum1f.value-0)- (document.form.sum2f.value -0); }
    function updatesumg(){ document.form.sumg.value =(document.form.sum1g.value-0)- (document.form.sum2g.value -0); }*
    function updatesumh(){ document.form.sumh.value =(document.form.sum1h.value-0)- (document.form.sum2h.value -0); }
    function updatesumi(){ document.form.sumi.value =(document.form.sum1i.value-0)- (document.form.sum2i.value -0); } *
    
    function updatesumtotal(){*
    document.form.sumtotal.value =
    (document.form.suma.value -0)+*
    (document.form.sumb.value -0)+
    (document.form.sumc.value -0)+*
    (document.form.sumd.value -0)+
    (document.form.sume.value -0)+*
    (document.form.sumf.value -0)+
    (document.form.sumg.value -0)+*
    (document.form.sumh.value -0)+
    (document.form.sumi.value -0)*
    ; }*
    </script>
    
    *<form name="form"> *
    
    <input type="text" autocomplete="off" name="Scores" * *id="Score" * * value="Score" *class="clip" * readonly style="border:0px" />
    <input type="text" autocomplete="off" name="Par" * * * id="Par" * * * value="Par" * *class="clip" * readonly style="border:0px" />
    <input type="text" * * * * * * * * * *name="Par Score" id="Par Score" value="Total" *class="clip" * readonly style="border:0px" /><br>
    
    <input type="text" autocomplete="off" *name="sum1a" id="hole1A" value="" onChange= "updatesuma()" />*
    <input type="text" autocomplete="off" name="sum2a" readonly value="<?php echo $par1;?>" *id="hole1B" onChange= "updatesuma()" />*
    <input type="text" name="suma" value="" id="hole1result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    <input type="text" autocomplete="off" name="sum1b" id="hole2A" value="" onChange= "updatesumb()" />*
    <input type="text" autocomplete="off" name="sum2b" readonly value="<?php echo $par2;?>" id="hole2B" onChange= "updatesumb()" />*
    <input type="text" name="sumb" value="" id="hole2result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    <input type="text" autocomplete="off" name="sum1c" id="hole3A" value="" onChange= "updatesumc()" />*
    <input type="text" autocomplete="off" name="sum2c" readonly value="<?php echo $par3;?>" id="hole3B" onBlur= "updatesumc()" />*
    <input type="text" name="sumc" value="" id="hole3result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    <input type="text" autocomplete="off" name="sum1d" id="hole4A" value="" onChange= "updatesumd()" />*
    <input type="text" autocomplete="off" name="sum2d" readonly value="<?php echo $par4;?>" id="hole4B" onChange= "updatesumd()" />*
    <input type="text" name="sumd" value="" id="hole4result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    <input type="text" autocomplete="off" name="sum1e" id="hole5A" value="" onChange= "updatesume()" />*
    <input type="text" autocomplete="off" name="sum2e" readonly value="<?php echo $par5;?>" id="hole5B" onChange= "updatesume()" />*
    <input type="text" name="sume" value="" id="hole5result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    
    <input type="text" autocomplete="off" name="sum1f" id="hole6A" value="" onChange= "updatesumf()" />*
    <input type="text" autocomplete="off" name="sum2f" readonly value="<?php echo $par6;?>" id="hole6B" onChange= "updatesumf()" />*
    <input type="text" name="sumf" value="" id="hole6result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    <input type="text" autocomplete="off" name="sum1g" id="hole7A" value="" onChange= "updatesumg()" />*
    <input type="text" autocomplete="off" name="sum2g" readonly value="<?php echo $par7;?>" id="hole7B" onChange= "updatesumg()" />*
    <input type="text" name="sumg" value="" id="hole7result" readonly style="" *onChange= "updatesumtotal()" > <br>
    
    <input type="text" autocomplete="off" name="sum1h" id="hole8A" value="" onChange= "updatesumh()" />*
    <input type="text" autocomplete="off" name="sum2h" readonly value="<?php echo $par8;?>" id="hole8B" onChange= "updatesumh()" />*
    <input type="text" name="sumh" value="" id="hole8result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    <input type="text" autocomplete="off" name="sum1i" id="hole9A" value="" onChange= "updatesumi()"/>*
    <input type="text" autocomplete="off" name="sum2i" readonly value="<?php echo $par9;?>" id="hole9B" onChange= "updatesumi()" />*
    <input type="text" name="sumi" value="" id="hole9result" readonly style="" onChange= "updatesumtotal()" > <br>
    
    <input type="text" name="Total Scores" * *id="Score" * * *class="clip" * value="" * * * readonly style="border:0px" */>
    <input type="text" name="Par Total" * * * id="Par" * * * *class="clip" * value="Total" *readonly style="border:0px" />
    <input type="text" name="sumtotal" *class="box" id="totalparscore" value="" * * * readonly style="" />
    
    <input type="submit" name="submit"/>
    
    </form>*
    **

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Exclamation

    Is this a homework assignment? See: http://www.webdeveloper.com/forum/sh...=Dynamic+total

    You also have several syntax errors . . . Check your error console.

    What was wrong with the previous response in the link above?
    Last edited by jmrker; 12-27-2012 at 04:00 PM.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Re the previous link...

    I had to change the first function, as it was playing up.
    Which then caused the second function you showed me not to work.

    Where am I going wrong on the syntax?

    As you can tell I'm really new to JavaScript, is white space not ignored in JavaScript?

    Also some inputs are generated with php post, for some reason on change worked but on blur didn't when using php in the form

    Ps. Thanks for your help!
    Last edited by wright67uk; 12-27-2012 at 04:31 PM.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Lightbulb

    It may be your PHP, because the following runs the JS without errors on FF. I know very little of PHP.
    Tested on FF but not other browsers.

    Remember to change the <form...> arguments for your needs.
    Code:
    <html> 
    <head> 
    <title>Text Summation</title>
    
    <style type="text/css">
    .parResult { border:0px solid black;width:50px;display:inline; }
    </style>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?270199-How-can-i-get-a-running-total-using-form-id-s&highlight=Dynamic+total
    //  and: http://www.codingforums.com/showthread.php?p=1302472#post1302472
    
    function calc(IDS) { 
      var one = Number(document.getElementById(IDS+'A').value);  if (isNaN(one)) { alert('Invalid entry: '+one); one=0; } 
      var two = Number(document.getElementById(IDS+'B').value);  if (isNaN(two)) { alert('Invalid entry: '+two); two=0; } 
      document.getElementById(IDS+'result').innerHTML = one - two;
      addition();
    } 
    function addition() {  
      var IDS;
      var total = 0;
      for (var i=1; i<=9; i++) { IDS = 'hole'+i+'result'; total += Number(document.getElementById(IDS).innerHTML); }
      document.getElementById("totalparscore").innerHTML = total;   
    }  
    </script>
    </head>
    <body> 
    
    <!-- PHP not available for checking code and alter onsubmit when finished testing -->
    <form name="form" method="post" action="" onsubmit="return false"> <!-- action="addup5.php" -->
    
    1) Score:  <input name="h1" id="hole1A" value="" onblur="calc('hole1')" size="3" /> 
    Par:       <input name="p1" id="hole1B" value="2" readonly size="3" /> 
    Par Score: <div id="hole1result" class="parResult"></div><br>
    
    2) Score:  <input name="h2" id="hole2A" value="" onblur="calc('hole2')" size="3" /> 
    Par:       <input name="p2" id="hole2B" value="5" readonly size="3" /> 
    Par Score: <div id="hole2result" class="parResult"></div><br>
    
    3) Score:  <input name="h3" id="hole3A" value="" onblur="calc('hole3')" size="3" /> 
    Par:       <input name="p3" id="hole3B" value="5" readonly size="3" /> 
    Par Score: <div id="hole3result" class="parResult"></div><br>
    
    4) Score:  <input name="h4" id="hole4A" value="" onblur="calc('hole4')" size="3" /> 
    Par:       <input name="p4" id="hole4B" value="5" readonly size="3" /> 
    Par Score: <div id="hole4result" class="parResult"></div><br>
    
    5) Score:  <input name="h5" id="hole5A" value="" onblur="calc('hole5')" size="3" /> 
    Par:       <input name="p5" id="hole5B" value="5" readonly size="3" /> 
    Par Score: <div id="hole5result" class="parResult"></div><br>
    
    6) Score:  <input name="h6" id="hole6A" value="" onblur="calc('hole6')" size="3" /> 
    Par:       <input name="p6" id="hole6B" value="5" readonly size="3" /> 
    Par Score: <div id="hole6result" class="parResult"></div><br>
    
    7) Score:  <input name="h7" id="hole7A" value="" onblur="calc('hole7')" size="3" /> 
    Par:       <input name="p7" id="hole7B" value="5" readonly size="3" /> 
    Par Score: <div id="hole7result" class="parResult"></div><br>
    
    8) Score:  <input name="h8" id="hole8A" value="" onblur="calc('hole8')" size="3" /> 
    Par:       <input name="p8" id="hole8B" value="5" readonly size="3" /> 
    Par Score: <div id="hole8result" class="parResult"></div><br>
    
    9) Score:  <input name="h9" id="hole9A" value="" onblur="calc('hole9')" size="3" /> 
    Par:       <input name="p9" id="hole9B" value="5" readonly size="3" /> 
    Par Score: <div id="hole9result" class="parResult"></div><br>
    
    Total par score: <div id="totalparscore" style="border:1px;width:30px;display:inline"></div> 
    <br><input type="submit" name="submit" value="Submit Scores" />
    
    </form>
    </body> 
    </html>


  •  

    Posting Permissions

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