calculationg fees on online registration form 1

mojanda · Feb 18, 2006

Hello,

I'm the Director of an environmental summer camp, and took it upon myself to develop an online registration form. I'm nearing the end of what was a gruelling process... and am struggling with some Javascript code. In essence, it allows registrants to select cost/discount options, which is calculated and presented in a grand total.

I'm having a problem with the radio buttons. When a button in the Session array is selected, the total appears. However, when a button in the Supervision array is selected (just below), the value of the selected button replaces the previous value...it doesn't add the value to the calculatedTotal.

I've been staring at the same code for days, at what appears to be a simple solution... but am drawing a blank. Does anyone have any suggestions!

http://www.zoocamp.net/calculate.html

Kind regards,

Peter Klose

http://www.zoocamp.com

trollacious · Feb 18, 2006

Try the following for your function

Code:

function calculateTotal(inputItem)
{
var frm = document.forms['selectionForm'];

var total = 0;
var oneradio = frm.elements['Session'];
for (var ri=0;ri<oneradio.length;ri++)
  {
  if (oneradio[ri].checked)
    {
    total += oneradio[ri].value * 1;
    break;
    }
  }

oneradio = frm.elements['Supervision'];
for (var ri=0;ri<oneradio.length;ri++)
  {
  if (oneradio[ri].checked)
    {
    total += oneradio[ri].value * 1;
    break;
    }
  }

if (frm.elements['Discount_one'].checked)
  {
  total += frm.elements['Discount_one'].value * 1;
  }

if (frm.elements['Discount_two'].checked)
  {
  total += frm.elements['Discount_one'].value * 1;
  }

return(formatCurrency(total));
}

Lee

theniteowl · Feb 18, 2006

I took too long again. Oh well.

I simplified the code a bit.
It loops through all form elements and creates the total based on the values of any checked elements.
It does not care how many discount boxes or radio boxes there are or what their names are.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>The JavaScript Source: Forms : Update Order Form w/o Page Refresh</TITLE>
<META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache">
<META NAME="description" CONTENT="In this order form, the cost for each item is totaled as the items are selected and deselected. This is done without refreshing the entire page in order to save other form information. Heavily commented.">
<META NAME="date" CONTENT="2005-12-21">
<META NAME="channel" CONTENT="Developer">
<META NAME="author" CONTENT="Kevin Hartig">
<META NAME="section" CONTENT="Forms">
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: [URL unfurl="true"]http://javascript.internet.com[/URL]
Created by: Kevin Hartig :: [URL unfurl="true"]http://www.grafikfx.net/[/URL] */

function calculateTotal() {
  var total=0;
  var el = document.forms['selectionForm'].elements;
  for (x=0;x<el.length;x++) {
    if (el[x].checked)
      total+=el[x].value-0;
  }
  document.selectionForm.total.value = formatCurrency((total > 0)?total:0);
}

// Format a value as currency.
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
     num = "0";
  sign = (num == (num = Math.abs(num)));
  num = Math.floor(num*100+0.50000000001);
  cents = num%100;
  num = Math.floor(num/100).toString();
  if(cents<10)
      cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
      num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
  return (((sign)?'':'-') + '$' + num + '.' + cents);
}

// This function initialzes all the form elements to default values.
function InitForm() {
  // Reset values on form.
  document.selectionForm.total.value='$0';
  document.selectionForm.calculatedTotal.value=0;
  document.selectionForm.previouslySelectedRadioButton.value=0;

  // Set all checkboxes and radio buttons on form to unchecked.
  for (i=0; i < document.selectionForm.elements.length; i++) {
    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
      document.selectionForm.elements[i].checked = false;
    }
  }
}

//-->
</script>

</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff onLoad="InitForm();" onreset="InitForm();">


<BR>
<center>
<script language="JavaScript" type="text/javascript"><!--
function openDescription(ID) {
var url = "[URL unfurl="true"]http://www.ppcforhosts.com/public/util/description.cfm?id="[/URL] + ID;
link = window.open(url,"newWin","directories=0,height=250,location=0,menubar=0,resizable=1,scrollbars=1,status=0,toolbar=0,width=450");
}
//--></script>

  <div align="center">
<table width="600"><tr><td>
  <form method="POST" name="selectionForm">
      
    <p><b>How many Sessions will the camper be attending?</b> <br>
&nbsp;&nbsp;
  <input type="radio" name="Session" value="650.00" onClick="calculateTotal();">
  1 Session&nbsp;$650.00 <br>
&nbsp;&nbsp;
  <input type="radio" name="Session" value="1300.00" onClick="calculateTotal();">
  2 Sessions&nbsp;$1,300.00 <br>
&nbsp;&nbsp;
  <input type="radio" name="Session" value="1950.00" onClick="calculateTotal();">
  3 Sessions&nbsp;$1,950.00 <br>
&nbsp;&nbsp;
  <input type="radio" name="Session" value="2600.00" onClick="calculateTotal();">
  4 Sessions&nbsp;$2,600.00 <br>
&nbsp;&nbsp;
  <input type="radio" name="Session" value="3250.00" onClick="calculateTotal();">
  5 Sessions&nbsp;$3,250.00</p>
    <p> <br>
	    <b>Fee for supervising campers that are staying at camp between Sessions. Please specify how many weekends the campers is expected to stay at camp: </b> <br>
&nbsp;&nbsp;
    <input type="radio" name="Supervision" value="75.00" onClick="calculateTotal();">
    1 Weekend&nbsp;$75.00 <br>
&nbsp;&nbsp;
    <input type="radio" name="Supervision" value="150.00" onClick="calculateTotal();">
    2 Sessions&nbsp;$150.00 <br>
&nbsp;&nbsp;
    <input type="radio" name="Supervision" value="225.00" onClick="calculateTotal();">
    3 Sessions&nbsp;$225.00 <br>
&nbsp;&nbsp;
    <input type="radio" name="Supervision" value="300.00" onClick="calculateTotal();">
    4 Sessions&nbsp;$300.00 <br>
&nbsp;&nbsp;
    <input type="radio" name="Supervision" value="375.00" onClick="calculateTotal();">
    5 Sessions&nbsp;$375.00 </p>
    <p><br>
	     <b>Discounts</b><br>
	     <input type="checkbox" name="Discount_one" value="-50.00"  onclick="calculateTotal();">$50.00 Discount&nbsp;
         
&nbsp;&nbsp; 
         <input type="checkbox" name="Discount_two" value="-20.00" onClick="calculateTotal();">$20.00 Discount&nbsp;
&nbsp;<br>
        <br>
	    
      <input type="hidden" name="calculatedTotal" value="0">
        <input type="hidden" name="previouslySelectedRadioButton" value="0">
        <strong>Your total is:</strong>
        <input type="text" name="total" readonly onFocus="this.blur();">
        </p>
  </form>
</td></tr></table>
</div>
</center>
</body></html>

Stamp out, eliminate and abolish redundancy!

trollacious · Feb 18, 2006

I just did it quick and dirty.

#

Lee

mojanda · Feb 18, 2006

Wow, I'm impressed! Thank you for the prompt and professional response.

Thanks so much!

Cheers,

Peter

theniteowl · Feb 18, 2006

I did quick and dirty too and just before I posted it I came up with another idea for the approach and just had to try it out so...

mojanda, I strongly suggest that you use server-side code to re-do the calculations after the form is submitted just to make certain no values are being fiddled with.

Stamp out, eliminate and abolish redundancy!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

calculationg fees on online registration form 1

mojanda

Programmer

trollacious

Programmer

theniteowl

Programmer

trollacious

Programmer

mojanda

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor