SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calculating total from multiple text inputs[]

    Given a form like this...
    HTML Code:
    <form id="ca" method="post" action="">
    <table>
    	<tr>
    	<input type="hidden" name="artID[]" value="2" />
    		<td class="digit"><input type="text" class="num" name="incoming[]" /></td>
    		<td class="digit"><input type="text" class="num" name="outgoing[]" /></td>
    		<td class="digit" id="result0"><(result goes here)</td>
    	</tr>
    	
    	<tr>
    	<input type="hidden" name="artID[]" value="3" />
    		<td class="digit"><input type="text" class="num" name="incoming[]" /></td>
    		<td class="digit"><input type="text" class="num" name="outgoing[]" /></td>
    		<td class="digit" id="result1">(result goes here)</td>
    	</tr>	
    	...
    	<tr>
    		<td colspan="3">
    		<input type="button" class="button" value="Calculer" onclick="calc(this.form);" />
    	</tr>
    </table>	
    </form>
    ... with PHP it's rather trivial to calculate the result sum for each row (incoming minus outgoing = result) once the form is posted.

    However I've been trying to come up with a Javascript solution which displays the result for each row onclick of the "Calculate" button, as a sort of preview before the form is actually submitted. Here's my, ahem, rather primitive attempt, which does not work:

    HTML Code:
    function calc(){
    				var form = document.getElementById("ca");
    				for (var i = 0; i < form.elements["incoming"].length; i++) {
    					var total = 0;
      				var incoming = form.elements["incoming"][i].value;
      				var outgoing = form.elements["outgoing"][i].value;
      				total = (incoming - outgoing);
      				document.getElementById('result'+i).innerHTML = total;
    				}
    	  	}
    Any suggestions? Thanks!

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    something like:
    Code:
    function calc(){
     	var count_1 = document.getElementsByName('incoming[]');
     	var total = 0;
     	
     	for(var i = 0; i < count_1.length; i++) {
    		if(document.ca.elements['incoming[]'][i].value != '') {
    		 	total = (document.ca.elements['incoming[]'][i].value - document.ca.elements['outgoing[]'][i].value);
    			document.getElementById('result'+i).innerHTML = total;
    		}
    	}
     
     }
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Spike! That looked promising, but didn't do anything
    I modified it to this:
    HTML Code:
    function calc(){
    	var ca = document.getElementById("ca");
     	var count_1 = document.getElementsByName('incoming[]');
     	var total = 0;
     	
     	for(var i = 0; i < count_1.length; i++) {
    		if(ca.elements['incoming[]'][i].value != '') {
    		 	total = (ca.elements['incoming[]'][i].value - ca.elements['outgoing[]'][i].value);
    			document.getElementById('result'+i).innerHTML = total;
    		}
     	} 
     }
    ... turning the form into a var first. Now I get the following JS error:
    "document.getElementById("result" + i) has no properties"...


    Nevermind: forgot to add id='resultxxx' to ALL of the td's duh!

    Problem solved
    Last edited by mudshark; Mar 26, 2008 at 06:22. Reason: problem solved

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note that you already pass a reference to the form in the onclick handler. Use the reference like this:

    Code:
    function calc(ca) {
        // not needed anymore:
        var ca = document.getElementById("ca");
    
        // rest of code
    }

  5. #5
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Note that you already pass a reference to the form in the onclick handler. Use the reference like this:

    Code:
    function calc(ca) {
        // not needed anymore:
        var ca = document.getElementById("ca");
    
        // rest of code
    }
    Roger that. Thanks!


Bookmarks

Posting Permissions

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