Add values in form

JavaScript
1

I’ve made a form with a few items. Each item has a value. Now my question is, how can I add the values from these items (when you check them) to the total value?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

ul
{
list-style-type:none;
}

ul#AddValueList
{
float:left;
}

.v1, .v2, .v3
{
width:35px;
text-align:right;
color:#000;
}

.v1
{
margin:0px 0px 0px 50px;
}

.v2
{
margin:0px 0px 0px 56px;
}

.v3
{
margin:0px 0px 0px 19px;
}

.t
{
width:35px;
text-align:right;
color:#000;
margin:20px 0px 0px 118px;
}

#ValueSubmit, #AddValueTotalList
{
clear:left;
}

#ValueSubmit input
{
margin:20px 0px 0px 0px;
}

</style>

<title>Add Values Form</title>
</head>

<body>

  <form id="AddValuesForm" action="">  
  
    <fieldset id="AddValuesFormPart1">
      
      <legend>Add Values</legend>      
                  
      <ul>
		
        <li>
          <ul id="AddValueList">
            <li id="AddValueItem1">
            <input id="value1" type="checkbox" name="value1" value="" tabindex="10"/> <label for="value1">Cheesecake</label>
            <input class="v1" id="value1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem2">
            <input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
            <input class="v2" id="value2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem3">
            <input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
            <input class="v3" id="value3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>

        <li>
          <ul id="AddValueTotalList">
            <li id="AddValueTotal">
            <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>

    
        <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li> 

      </ul>

    </fieldset>
  </form>

</body>
</html>
2

This should do it.

I have changed the id of the disabled value field to more easier equate from the check box to the value to be totaled.

I have added an onload to the body tag.

I have added a script section to do the work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
ul
{
list-style-type:none;
}

ul#AddValueList
{
float:left;
}

.v1, .v2, .v3
{
width:35px;
text-align:right;
color:#000;
}

.v1
{
margin:0px 0px 0px 50px;
}

.v2
{
margin:0px 0px 0px 56px;
}

.v3
{
margin:0px 0px 0px 19px;
}

.t
{
width:35px;
text-align:right;
color:#000;
margin:20px 0px 0px 118px;
}

#ValueSubmit, #AddValueTotalList
{
clear:left;
}

#ValueSubmit input
{
margin:20px 0px 0px 0px;
}

</style>
<script type="text/javascript">
<!--

var totalcounter = 0;

totaltracker = function (event) {
	var targetelement = (typeof event.target != "undefined") ? event.target : event.srcElement;
	var multipler = 0;
	if (targetelement.checked) {
		multipler++;
	} else {
		multipler--;
	}
	var targetvalue = document.getElementById(targetelement.id + 'a');
	var idtotal = document.getElementById("total");
	if (idtotal) idtotal.value = parseFloat(idtotal.value) + (multipler * parseFloat(targetvalue.value));



};

function totalloader () {
	var elements = document.getElementsByTagName('INPUT');
	for (var i=0; i<elements.length; i++) {
		var thisElement = elements[i];
		if (thisElement.getAttribute("type") == "checkbox") {
			if (typeof thisElement.addEventListener != "undefined") {
				thisElement.addEventListener("click", totaltracker, true);
			} else if (typeof thisElement.attachEvent != "undefined") {
				thisElement.attachEvent("onclick", totaltracker);
			}
		}
	}
}


// -->
</script>


<title>Add Values Form</title>
</head>

<body onload="totalloader();">

  <form id="AddValuesForm" action="">

    <fieldset id="AddValuesFormPart1">

      <legend>Add Values</legend>

      <ul>

        <li>
          <ul id="AddValueList">
            <li id="AddValueItem1">
            <input id="value1" type="checkbox" name="value1" value="" tabindex="10"/>
            <label for="value1">Cheesecake</label>
            <input class="v1" id="value1a" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem2">
            <input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
            <input class="v2" id="value2a" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
            </li>
            <li id="AddValueItem3">
            <input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
            <input class="v3" id="value3a" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>

        <li>
          <ul id="AddValueTotalList">
            <li id="AddValueTotal">
            <label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
            </li>
          </ul>
        </li>


        <li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>

      </ul>

    </fieldset>
  </form>

</body>
</html>
3

Thanks Philip, it works like a charm! I’m glad my html was usable to work together with the javascript code :smiley: