#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    5
    Rep Power
    0

    Help Updating Table Without Reloading Page


    Hello everyone,

    Total noob to web design here. I'm trying to get the sum of a table column with editable cells to update in real time without reloading the page. I'd like to get it done first using only JavaScript and Html for now as my knowledge is still very limited. As my attached code clearly shows I don't know what I'm doing, I'm hoping someone can just point me in the right direction on this. Any input is appreciated.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset = "utf-8">
    	</head>
    	
    	<script type = "text/javascript">
    		function sumAnimals(){
    			var cows = parseInt(document.getElementById("numCows").value);
    			var chicks = parseInt(document.getElementById("numChicks").value);
    			var pigs = parseInt(document.getElementById("numPigs").value);
    			var horses = parseInt(document.getElementById("numHorses").value);
    			document.getElementById("totalAnimals").value = cows + chicks + pigs + horses;
    		}
    	</script>
    
    	<body onload = "sumAnimals();">
    		<table id = "table1" border = "1">
    			<tr>
    			  <th>Animal</td>
    			  <th>Quantity</td>
    			</tr>
    			<tr>
    			  <td>Cows</td>
    			  <td id = "numCows" contentEditable = "true" oninput = "sumAnimals();">15</td>
    			</tr>
    			<tr>
    			  <td>Chickens</td>
    			  <td id = "numChicks" contentEditable = "true" oninput = "sumAnimals();">95</td>
    			</tr>
    			<tr>
    			  <td>Pigs</td>
    			  <td id = "numPigs" contentEditable = "true" oninput = "sumAnimals();">20</td>
    			</tr>
    			<tr>
    			  <td>Horses</td>
    			  <td id = "numHorses" contentEditable = "true" oninput = "sumAnimals();">12</td>
    			</tr>
    			<tr>
    			  <td>Total</td>
    			  <td id = "totalAnimals"></td>
    			</tr>
    		</table>
    		
    	</body>
    	
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    5
    Rep Power
    0
    UPDATE

    I changed a couple of things (removed "oninput" from each td and added listener to the whole table). I'm getting "NaN" in the bottom cell where the sum should display. Am I parsing wrong or is it something else?

    Updated code:
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset = "utf-8">
    		<title>Table Sum 3</title>
    	</head>	
    
    	<body>
    		<table id = "budgetTable" border = "1">
    			<tr>
    			  <th>Animal</td>
    			  <th>Quantity</td>
    			</tr>
    			<tr>
    			  <td>Cows</td>
    			  <td id = "numCows"><div contentEditable = "true">10</div></td>
    			</tr>
    			<tr>
    			  <td>Chickens</td>
    			  <td id = "numChicks"><div contentEditable = "true">20</div></td>
    			</tr>
    			<tr>
    			  <td>Pigs</td>
    			  <td id = "numPigs"><div contentEditable = "true">30</div></td>
    			</tr>
    			<tr>
    			  <td>Horses</td>
    			  <td id = "numHorses"><div contentEditable = "true">40</div></td>
    			</tr>
    			<tr>
    			  <td>Total</td>
    			  <td id = "totalAnimals">100</td>
    			</tr>
    		</table>
    		
    		<script type = "text/javascript">
    			//add listener to the table
    			document.getElementById('budgetTable').addEventListener('change', sumAnimals())
    		
    			function sumAnimals(){
    				var cows = parseInt(document.getElementById("numCows").value);
    				var chicks = parseInt(document.getElementById("numChicks").value);
    				var pigs = parseInt(document.getElementById("numPigs").value);
    				var horses = parseInt(document.getElementById("numHorses").value);
    				document.getElementById("totalAnimals").innerHTML = cows + chicks + pigs + horses;
    			}
    		</script>
    		
    	</body>	
    </html>
  4. #3
  5. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,456
    Rep Power
    9645
    General HTML elements do not have a .value. That is only for form fields. Doesn't matter if the element is contenteditable.

    Use proper <input>s. They have the right functionality and they're the correct semantic markup.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    5
    Rep Power
    0
    I got it done without having to make that switch. Thanks for the input though.

IMN logo majestic logo threadwatch logo seochat tools logo