Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding together of input boxes

    Hi there!

    Basically i am creating a webpage for staff rotas that can then be printed out but i need to know the code to add the values of input boxes together then display the results.

    For example
    ...........Monday......Tuesday....Wednesday...Thursday..Friday....Hrs worked
    John:........4............5...............7....................7........2

    Calculate

    So i want the boxes for monday, tuesday, wednesday, thursday and friday added together upon clicking of the calculate button then displayed in the hrs worked box, very much like an excel page.

    Is this possible?

    Thankyou!

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    82
    Thanks
    0
    Thanked 6 Times in 6 Posts

    calc hours

    Here is one way.

    Code:
    <script>
    function calculate() {
    
       var sun = document.getElementById("sun").value;
       var mon = document.getElementById("mon").value;
       var tue = document.getElementById("tue").value;
       var wed = document.getElementById("wed").value;
       var thu = document.getElementById("thu").value;
       var fri = document.getElementById("fri").value;
       var sat = document.getElementById("sat").value;
       if (isNumeric(sun, false)) { 
          sun = parseInt(sun);
       } else {
          sun = 0;
       }
       if (isNumeric(mon, false)) {
          mon = parseInt(mon);
       } else {
          mon = 0;
       }
       if (isNumeric(tue, false)) {
          tue = parseInt(tue);
       } else {
          tue = 0;
       }
       if (isNumeric(wed, false)) {
          wed = parseInt(wed);
       } else {
          wed = 0;
       }
       if (isNumeric(thu, false)) {
          thu = parseInt(thu);
       } else {
          thu = 0;
       }
       if (isNumeric(fri, false)) {
          fri = parseInt(fri);
       } else {
          fri = 0;
       }
       if (isNumeric(sat, false)) {
          sat = parseInt(sat);
       } else {
          sat = 0;
       }
    
       var total = sun + mon + tue + wed + thu + fri + sat;
       alert(total);
    }
       
    	function isNumeric(sText, decimalAllowed) {
            if (sText.length == 0) return false;
        	var validChars = "";
    		if (decimalAllowed) {
    			validChars = "0123456789.";
    		} else {
    			validChars = "0123456789";
    		}
            var isNumber = true;
            var charA;
    		var decimalCount = 0;
            for (i = 0; i < sText.length && isNumber == true && decimalCount < 2; i++) {
                charA = sText.charAt(i); 
    			if (charA == ".") { 
    				decimalCount += 1;
    			}
                if (validChars.indexOf(charA) == -1) {
                   isNumber = false;
                }
            }
            return isNumber;
        }
    </script>
    
    <input type="text" id="sun" name="sun" size="2" />
    <input type="text" id="mon" name="mon" size="2" />
    <input type="text" id="tue" name="tue" size="2" />
    <input type="text" id="wed" name="wed" size="2" />
    <input type="text" id="thu" name="thu" size="2" />
    <input type="text" id="fri" name="fri" size="2" />
    <input type="text" id="sat" name="sat" size="2" />
    <input type="button" id="button" name="button" value="Calculate" onMouseDown="calculate()" />

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" language="javascript">
    function Calculate()
    
    {
    
    var monday=document.form2.monday.value;
    var tuesday=document.form2.tuesday.value;
    var wednesday=document.form2.wednesday.value;
    var thursday=document.form2.thursday.value;
    var friday=document.form2.friday.value;
    var saturday=document.form2.saturday.value;
    var sunday=document.form2.sunday.value;
    	
    var total;
    
    total = parseInt(monday) + parseInt(tuesday) + parseInt(wednesday) + parseInt(thursday) + parseInt(friday) + parseInt(saturday) + parseInt(sunday) ;
    
    document.form2.result.value = total;	
    
    return false;
    	
    }
    	
    </script>
    
    </head>
    <body>
          
          <form id="form2" name="form2" method="post" action="#" onsubmit="return Calculate();">
            <table width="700" border="0" align="center" cellpadding="3" cellspacing="0">
          
          <tr>
            <td align="center" valign="middle"></td>
            <td height="40" align="center" valign="middle">MONDAY</td>
            <td align="center" valign="middle">TUESDAY</td>
            <td align="center" valign="middle">WEDNESDAY</td>
            <td align="center" valign="middle">THURSDAY</td>
            <td align="center" valign="middle">FRIDAY</td>
            <td align="center" valign="middle">SATURDAY</td>
            <td align="center" valign="middle">SUNDAY</td>
            <td align="center" valign="middle">TOTAL HOURS</td>
          </tr>
          <tr>
            <td width="18%" align="center" valign="middle">John        </td>
            <td width="41%" height="40" align="center" valign="middle"><input name="monday" type="text" id="monday" size="10" /></td>
            <td width="41%" align="center" valign="middle"><input name="tuesday" type="text" id="tuesday" size="10" /></td>
            <td width="82%" align="center" valign="middle"><input name="wednesday" type="text" id="wednesday" size="10" /></td>
            <td width="82%" align="center" valign="middle"><input name="thursday" type="text" id="thursday" size="10" /></td>
            <td width="82%" align="center" valign="middle"><input name="friday" type="text" id="friday" size="10" /></td>
            <td width="82%" align="center" valign="middle"><input name="saturday" type="text" id="saturday" size="10" /></td>
            <td width="82%" align="center" valign="middle"><input name="sunday" type="text" id="sunday" size="10" /></td>
            <td width="82%" align="center" valign="middle"><input name="result" type="text" id="result" size="10" /></td>
          </tr>
          
          
          <tr>
            <td>&nbsp;</td>
            <td colspan="8" align="left" valign="middle">
              <input type="submit" name="button" id="button" value="Calculate" /></td>
          </tr>
        </table>
          </form>
     
    </body>
    </html>
    TRY THIS


  •  

    Posting Permissions

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