www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript help needed with adding different fields values

  1. #1
    Join Date
    Apr 2013
    Posts
    1

    Javascript help needed with adding different fields values

    I'm trying to make a registration form, and one part of that is it needs to be able to add the values of different fields and displays it at the bottom.

    This is what I've done for the JS;

    PHP Code:

    //Calculate checkbox
    var total 0;

    function 
    ShowTotal(obj){

       var 
    price; var i;
       if (
    obj.checked)                             
          
    total total + eval(obj.value);
       else                                         
          
    total total - eval(obj.value);

       return;
    }

    //Calculate radio
    var pro 0;

      function 
    ShowProTotal(obj)
      {
        var 
    price; var i;
        if (
    obj.checked)
          
    pro pro + eval(obj.value);
        else
          
    pro pro - eval(obj.value);
        return;
      }
      
    //Calculates total cost
     
    function getTotal(){
         var 
    totalCost ShowTotal() + ShowProTotal();

         
    document.getElementById("regform").cost.value totalCost;
         } 

    And this is the HTML parts of it which are affected by it;

    PHP Code:
    //Checkbox
            
    <dd>
                <
    label>
                    <
    input name="attend" value="50.00" type="checkbox" onclick="getTotal()" />Monday
                
    </label>
                <
    label>
                    <
    input name="attend" value="50.00" type="checkbox" onclick="getTotal()" />Tuesday
                
    </label>
                <
    label>
                    <
    input name="attend" value="50.00" type="checkbox" onclick="getTotal()" />Wednesday
                
    </label>
            </
    dd>


    //Radio buttons

            
    <dd>
                <
    label>
                    <
    input name="proceedings" value="50" type="radio" checked="checked" onclick="getTotal();" />Yes
                
    </label>
                <
    label>
                    <
    input name="proceedings" value="0" type="radio" onclick="getTotal();" />No
                
    </label>
            </
    dd>


    //Where result should be displayed
            
    <dd>
                <
    input id="cost" name="cost" class="formtextfield" type="text" />
            </
    dd
    I've omitted the rest of the code out for clarity, I'm not entirely sure where the problem is because when I try it with just the Checkbox it seems to be displaying the result fine. I'm probably doing something very wrong with the funtions.

    Any help on this would be very much appreciated. Thanks

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    //Calculate checkbox
    
      function getTotal(r,op,ary){
        var frm=document.forms[0],objs,z1=0,z1a;
         for (;z1<ary.length;z1++){
         objs=frm[ary[z1]];
         if (objs&&objs.length){
          for (z1a=0;z1a<objs.length;z1a++){
           if (objs[z1a].checked&&isFinite(objs[z1a].value*1)){
            r+=objs[z1a].value*1;
           }
          }
         }
        }
        frm[op].value=r;
        return r;
     }
    
      /*]]>*/
    </script></head>
    
    <body>
    <form>
            <dd>
                <label>
                    <input name="attend" value="50.00" type="checkbox" onclick="getTotal(0,'cost',['attend','proceedings']);;" />Monday
                </label>
                <label>
                    <input name="attend" value="50.00" type="checkbox" onclick="getTotal(0,'cost',['attend','proceedings']);;" />Tuesday
                </label>
                <label>
                    <input name="attend" value="50.00" type="checkbox" onclick="getTotal(0,'cost',['attend','proceedings']);;" />Wednesday
                </label>
            </dd>
    
    
    
            <dd>
                <label>
                    <input name="proceedings" value="50" type="radio" checked="checked" onclick="getTotal(0,'cost',['attend','proceedings']);;;" />Yes
                </label>
                <label>
                    <input name="proceedings" value="50" type="radio" checked="checked" onclick="getTotal(0,'cost',['attend','proceedings']);;;" />Yes
                </label>
                <label>
                    <input name="proceedings" value="0" type="radio" onclick="getTotal(0,'cost',['attend','proceedings']);;" />No
                </label>
            </dd>
    
    
            <dd>
                <input id="cost" name="cost" class="formtextfield" type="text" />
            </dd>
    </form>
    </body>
    
    </html>
    Last edited by vwphillips; 04-07-2013 at 06:53 AM.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles