Adding different values of different input types

JavaScript
1

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;

//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;

//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 :slight_smile:

2

Hi niiik,

Welcome to the forums :slight_smile:

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.

<!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

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;

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

Hi again,

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.

This isn’t too difficult. You would use an onchange event handler.
I’ve got to go to work now :frowning: but I’ll post you a short demo when I get home.

HTH

5

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:

<!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.