SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Florida
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to calculate with JS?

    I'm just starting out in JS and would like to know how to solve this.
    I have an HTML form with 3 checkboxes, like a would-be order form. For example, on checkbox 1, the product is a toy car that costs $5.00, second box is a cigar cutter for $50, etc. I to have a button that when clicked, enters the total price (no taxes or subtotals) into a textbox field below in the same page.
    Can someone help out with this? Would really appreciate it.
    Thanks.
    tigrvision

  2. #2
    SitePoint Evangelist
    Join Date
    Nov 2002
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made this example for you:

    Code:
    <form>
    <input type="checkbox" name="chProduct1" value="5"> Product 1 - $5<br> 
    <input type="checkbox" name="chProduct2" value="50"> Product 2 - $50<br>
    <input type="checkbox" name="chProduct3" value="500"> Product 3 - $500 <br>
    Total <input type="text" name="Total" value="0"><br>
    <input type="button" onclick="calcTotal(this.form)" value="Total"><br>
    </form>
    
    <script>
    	function calcTotal(frm){
    		frm.Total.value = 0;
    		for(i=0;i<frm.length;i++){
    			if(frm.elements[i].name.substr(0,2)=="ch"&&frm.elements[i].checked){
    				frm.Total.value = parseInt(frm.Total.value) + parseInt(frm.elements[i].value);
    			}
    		}
    	}
    </script>
    Any questions let me know

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Florida
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, asp!
    the code worked, only thing is that I'm getting a JS error in the browser (IE6).
    "'Total' is null or not an object"
    Not sure why that is.
    Here's the relevant part of my form:
    Code:
    <table>
    <tr> 
          <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Pro 
            Football</font></td>
          <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">$349 
            <input name="chActivity_profoot" type="checkbox" id="activity_profoot" value="349.00" onclick="calcTotal(this);">
            </font></td>
        </tr>
        <tr> 
          <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">College 
            Football</font></td>
          <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">$349 
            <input name="chActivity_colfoot" type="checkbox" id="activity_colfoot" value="349.00" onclick="calcTotal(this);">
            </font></td>
        </tr>
        <tr> 
          <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Golf</font></td>
          <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">$349 
            <input name="chActivity_golf" type="checkbox" id="activity_golf" value="349.00" onclick="calcTotal(this);">
            </font></td>
        </tr>
        <tr> 
          <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Racing</font></td>
          <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">n/a</font></td>
        </tr>
        <tr> 
          <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Baseball</font></td>
          <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">n/a</font></td>
        </tr>
        <tr> 
          <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Other</font></td>
          <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">n/a</font></td>
        </tr>
        <tr> 
          <td align="right">&nbsp;</td>
          <td><input type="button" onClick="calcTotal(this.form)" value="Total"></td>
        </tr>
        <tr> 
          <td align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Total 
            Amount to be charged</font></td>
          <td>
            <input name="Total" type="text" value="0" readonly></font>
            </td>
        </tr>
    </table>
    <script>
    	function calcTotal(frm){
    		frm.Total.value = 0;
    		for(i=0;i<frm.length;i++){
    			if(frm.elements[i].name.substr(0,2)=="ch"&&frm.elements[i].checked){
    				frm.Total.value = parseInt(frm.Total.value) + parseInt(frm.elements[i].value);
    			}
    		}
    	}
    </script>
    I appreciate your help on this.

  4. #4
    SitePoint Evangelist
    Join Date
    Nov 2002
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tigrvision,

    There is a problem with your code. The calcTotal function expects the object FORM as a parameter. You have call to this function from within INPUT element, but you are passing the INPUT object not the FORM object:

    Code:
    <input name="chActivity_colfoot" type="checkbox" id="activity_colfoot" value="349.00" onclick="calcTotal(this);">
    If you want to pass the form object from within INPUT element use this.form otherwise you'll get error from the function.
    The correct code should be:

    Code:
    <input name="chActivity_colfoot" type="checkbox" id="activity_colfoot" value="349.00" onclick="calcTotal(this.form);">
    If you want to have cents in the prices use parseFloat function instead of parseInt.

    I hope this helps.


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
  •