SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add values in form

    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?

    HTML Code:
    <!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. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    Code HTML4Strict:
    <!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. #3
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Philip, it works like a charm! I'm glad my html was usable to work together with the javascript code


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
  •