Summing up fields in a form for a total at the end of a form
I have a form that contains a radio button, pull down menus and a text field where people can purchase tickets or contribute $ to an event. I would like to be able to have a total at the bottom of the form that adds up what the user choses in the form. I am new to javascript and need some help with the code to make this work. The radio button will add up at the bottom but not sure how to code the rest. Any help would be greatly appreciated! Here is the code:
function calculateTotal(frm){
var total = 0;
var elems = frm.getElementsByTagName('input');
for(var i = 0; i < elems.length; i++){
if((elems[i].type == "radio" || elems[i].type == "checkbox") && elems[i].checked){
total += parseFloat(elems[i].value);
}
}
total = total.toFixed(2)
frm.total.value = "$" + total;
}
Change that to be more like this:
Code:
function calculateTotal(frm)
{
var total = 0;
var elems = frm.elements; // change
for(var i = 0; i < elems.length; i++)
{
if((elems[i].type == "radio" || elems[i].type == "checkbox") && elems[i].checked)
{
total += parseFloat(elems[i].value);
}
}
frm.total.value = "$" + total.toFixed(2);
return true;
}
Of all the changes I made, the one marked "change" is most important. This allows you to walk through ALL form elements -- not just INPUT elements. This means that SELECT and TEXTAREA elements will be included. You just have to add the code to differentiate these elements via their .type attribute.
Thank you for your help! I have changed the code per your reply and it still seems like the total is only adding up the radio button. Any suggestions? Must have something wrong with the html 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function calculateTotal(frm)
{
var total = 0;
var elems = frm.elements; // change
for(var i = 0; i < elems.length; i++)
{
if((elems[i].type == "radio" || elems[i].type == "checkbox") && elems[i].checked)
{
total += parseFloat(elems[i].value);
}
}
frm.total.value = "$" + total.toFixed(2);
return true;
}
Thank you for your help! I have changed the code per your reply and it still seems like the total is only adding up the radio button. Any suggestions? Must have something wrong with the html code?
Well, your code is only checking for radio buttons and checkboxes -- so, that is all it's going to total. You don't have any checkboxes, so that means your code will only total radio buttons. What else did you want to total?
I have a radio button to purchase a table, pull down menus where you can choose how many tickets you want to purchase (which should be times by the amount) and a text field where they can type in their contribution.
OK, the pull-down menu is a SELECT element. To detect that in your code, along with .selected == true, you need to check for .type == 'select-single' or 'select-multiple' depending upon the type of SELECT element you've specified. For the text field, .type == 'text' is what your code needs to check for.
Reply With Quote
Originally Posted by gobucks
Bookmarks