SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding different values of different input types

    I'm trying to make a registration form, and one part of that is it needs to be able to add the values of input types 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
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi niiik,

    Welcome to the forums

    There are a couple of things you can improve about your code.

    Firstly, using eval is almost never a good thing.
    Secondly, I'm not a big fan of inline event handlers, as it makes the code harder to maintain.
    Thirdly, your use of <label> tags.

    I rewrote your example to reflect these things.

    Have a look at the code and let me know if you have any questions.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Registration form example</title>
        <style>#myForm div{margin:5px;}</style>
      </head>
      
      <body>
        <form id="myForm">
          <div> 
            <label for="monday">Monday</label>
            <input name="attend" value="50.00" type="checkbox" id="monday"/>  
            <label for="tuesday">Tuesday</label>
            <input name="attend" value="50.00" type="checkbox" id="tuesday"/>  
            <label for="wednesday">Wednesday</label>
            <input name="attend" value="50.00" type="checkbox" id="wednesday"/>  
          </div>
          <div>
            <label for="yes">Yes</label>
            <input name="proceedings" value="50" type="radio" id="yes" checked="checked" />
            <label for="no">No</label>
            <input name="proceedings" value="0" type="radio" id="no" />
            </label>  
          </div> 
           
          <div>Total: <input id="cost" name="cost" class="formtextfield" type="text" /> </div>
        </form>
        
        <script type='text/javascript'>
          var form = document.getElementById("myForm");
          var output = document.getElementById("cost");
          
          function updateTotal(){
            var total = 0;
            for(var i=0; i<form.elements.length; i++){
              if(form.elements[i].name.match(/(attend|proceedings)/i)){
                if(form.elements[i].checked){
                  total += Number(form.elements[i].value);
                }
              }
            }
            output.value = total.toFixed(2);
          }
          
          // Attach event handlers
          for(var i=0; i<form.elements.length; i++){
            if(form.elements[i].name.match(/(attend|proceedings)/i)){
              form.elements[i].onclick = function(){
                updateTotal();
              }
            }
          }
          
          updateTotal();
        </script>
      </body>
    </html>
    Hope that helps

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo, thanks a lot of the reply. Ahh that makes a lot more sense than mine did. Yeah I wasn't too sure whether to use eval or not but it was in one of the examples so I decided to try it. As you can tell I'm fairly new to js so I'm still learning what to use and what not too.

    I did have a couple of questions about the code you posted, first was this bit;
    Code:
    match(/(attend|proceedings)/i)
    It might be a bit of a silly question but I'm just wondering what that piece of code does. I understand what 'match' does but I'm not sure about the part within the parentheses (/i etc)

    Another question I had was how could something like a dropdown list be implemented to change those values. For example, if option A was selected in the dropdown list then the cost (Mon/Tues/Wed) would be 80, or if option B was chosen then the cost would be 10...

    Once again, thanks a lot for the help, I very much appreciate it.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi again,

    Quote Originally Posted by niiik View Post
    I did have a couple of questions about the code you posted, first was this bit;
    Code:
    match(/(attend|proceedings)/i)
    It might be a bit of a silly question but I'm just wondering what that piece of code does. I understand what 'match' does but I'm not sure about the part within the parentheses (/i etc)
    Here we are just looking to match the string "attend" or the string "proceedings" (the names of your form elements).
    The pipe symbol tells the regex engine to match any of two or more options.
    The brackets aren't strictly necessary.

    Quote Originally Posted by niiik View Post
    Another question I had was how could something like a dropdown list be implemented to change those values. For example, if option A was selected in the dropdown list then the cost (Mon/Tues/Wed) would be 80, or if option B was chosen then the cost would be 10...
    This isn't too difficult. You would use an onchange event handler.
    I've got to go to work now but I'll post you a short demo when I get home.

    HTH

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by niiik View Post
    I understand what 'match' does but I'm not sure about the part within the parentheses (/i etc)
    I forgot to explain the 'i' earlier. Sorry. This is a modifier and means "make the match case insensitive".
    So the regex would match "aTTenD" as well as "attend".
    Again, this isn't strictly necessary in this instance.

    So, regarding the <select> and how to implement that, I have updated the script for you:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Registration form example</title>
        <style>#myForm div{margin:5px;}</style>
      </head>
      
      <body>
        <form id="myForm">
          <div> 
            <select name="weekDay" id="weekDay">
              <option value="0">Week day</option>
              <option value="50">Monday</option>
              <option value="60">Tuesday</option>
              <option value="70">Wednesday</option>
            </select>
          </div>
          
          <div>
            <label for="yes">Yes</label>
            <input name="proceedings" value="50" type="radio" id="yes" checked="checked" />
            <label for="no">No</label>
            <input name="proceedings" value="0" type="radio" id="no" />
            </label>  
          </div> 
           
          <div>Total: <input id="cost" name="cost" class="formtextfield" type="text" /> </div>
        </form>
        
        <script type='text/javascript'>
          var form = document.getElementById("myForm");
          var sel = document.getElementById("weekDay");
          var output = document.getElementById("cost");
          
          function updateTotal(){
            var total = 0;
            for(var i=0; i<form.elements.length; i++){
              if(form.elements[i].name == "proceedings"){
                if(form.elements[i].checked){
                  total += Number(form.elements[i].value);
                }
              } else if(form.elements[i].name == "weekDay"){
                total += Number(sel.options[sel.selectedIndex].value);
              }
            }
            output.value = total.toFixed(2);
          }
          
          for(var i=0; i<form.elements.length; i++){
            if(form.elements[i].name == "proceedings"){
              form.elements[i].onclick = function(){
                updateTotal();
              }
            }
          }
          sel.onchange = updateTotal;
          
          updateTotal();
        </script>
      </body>
    </html>
    Hopefully that makes things a little clearer.
    If you have any questions, don't hesitate to ask.


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
  •