form fiddle

by Laurel Bruggeman

HTML

<form id="checkboxForm">
<div>
<input type="checkbox" value="0" /><span>item name1</span>
</div>
<div>
<input type="checkbox" value="0" /><span>item name2</span>
</div>
<div>
<input type="checkbox" value="0" /><span>item name 3</span>
</div>
</form>
<div>
Total: <input id="totalChecks" value="0" type="text" disabled>
</div>

<div style="height:20px"></div>

<form id="textForm">
<div>
<span>item 1: </span><input type="text"/>
</div>
<div>
<span>item 2: </span><input type="text"/>
</div>
<div>
<span>item 3: </span><input type="text"/>
</div>
</form>
<div>
Total: <input id="totalText" value="0" type="text" disabled>
</div>

<div style="height:20px"></div>

<div>
Grand Total: <input id="grandTotal" value="0" type="text" disabled>
</div>

JavaScript

var updateGrandTotal = function () {
	var grandTotal = 0;
  var checkTotal = +document.getElementById("totalChecks").value;
  var textTotal = +document.getElementById("totalText").value;
  grandTotal = checkTotal + textTotal;
  document.getElementById("grandTotal").value = grandTotal;
}

var checkboxElements = document.querySelectorAll("#checkboxForm input[type=checkbox]")

var tallyCheckboxes = function () {
  var total = 0;
  //traverse over all checkbox elements in the form
  for (var i = 0, element; element = checkboxElements[i++];) {
  	//if an item is checked, count it
  	if(element.checked) {
    	total++;
    }
  } 
  document.getElementById("totalChecks").value = total;
  updateGrandTotal();
}

for (var i = 0, element; element = checkboxElements[i++];) {
  // put an onclick handler for each item in the form
  element.onclick = tallyCheckboxes;
} 




var textElements = document.querySelectorAll("#textForm input[type=text]")

var tallyText = function () {
  var total = 0;
  //traverse over all text elements in the form
  for (var i = 0, element; element = textElements[i++];) {
  	//if an item has text, count it
  	if(element.value.trim() !== '') {
    	total++;
    }
  } 
  document.getElementById("totalText").value = total;
  updateGrandTotal();
}

for (var i = 0, element; element = textElements[i++];) {
  // put an onclick handler for each item in the form
  element.onkeyup = tallyText;
}