asked on

Need to add simple javascript calculator to a form

I need to add a simple javascript calculator to this form:

http://72.52.247.122/~homeland/individual.html

Basically, .. I just need to multiply the cost of the selected course times the selected number of Students, and display the calculated price in realtime somewhere on the page (perhaps above the submit button). Both of the fields I'm mentioning are under the "Course Information" section in the form.

What makes this a little challenging is that the Course dropdown box does not contain the actual prices as the option values. I'm thinking that I can just populate a hidden field with the appropriate values using "onchange" or something similar, and that the calculations could instead be performed against that,

Could someone here please assist me with integrating this javascript calculator?

Thanks in advance,
- Yvan

Vel Eous

Try the following script. It doesn't do exactly what you asked, just collects the required data. I'm sure you are more than capable of applying the mathematical logic to it.

If you have any issues feel free to ask as always:

<script>
 
window.onload = function sum()
{
 
	if ( !document.getElementById ) return false;
	if ( !document.getElementById('course') ) return false;
	if ( !document.getElementById('num_students') ) return false;
	
	var course = document.getElementById('course');
	var num_students = document.getElementById('num_students');
	
	course.onchange = function()
	{
		var val = course.value.split(" ");
		alert ( 'Number of hours: ' + val[0] );
	}
	
	num_students.onchange = function()
	{
		var val = num_students.value;
		alert ( 'Number of students: ' + val );
	}
 
}
 
</script>

Open in new window

ASKER CERTIFIED SOLUTION

bluV11t

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

Works like a charm. Thanks bluV11t!

- Yvan

caledoniack

This script worked great for me too. I was really happy to see it because I was also working on a form for courses and to calculate the cost. But, I have a problem.

I'm sending my form results to a confirmation page and email using a perl. CGI. Everything works fine except I don't know how to pull the Total Price div "calculatedPrice" information (see line 1158 in script on the 10/23/08 "Accepted Solution" above) to the page or email. I referenced the other form elements in the perl script using the input "name" field to assign variables to them in perl. But, since the div doesn't allow "name" in HTML I'm looking for something else to reference it in perl. Any ideas how I would do that?

Here's how I assigned the variables from the input field names of "course" and "numberregistered" in perl:
my $course = param('course');
my $number = param('numberregistered');

Here's my problem. How would I reference the contents of the div? Or, can I? Any ideas?
my $totalcost = ???('calculatedPrice');

Thanks for any help.
Karen

Michel Plungjan

Here

<script type="text/javascript">
function fnCalcPrice(theForm) {
  var optionList=theForm.course;
  var numberStudents = parseInt(theForm.num_students.options[theForm.num_students.selectedIndex].value,10);
  var selectedIndex = optionList.selectedIndex;
  var coursePrice = (selectedIndex<1)?0:parseInt(optionList.options[selectedIndex].value.split('$')[1]); // take the price after the $ sign
  var calculatedTotal = coursePrice * numberStudents;
  document.getElementById('calculatedPrice').innerHTML = calculatedTotal;
  theForm.calculatedTotal.value=calculatedTotal;
}
window.onload=function() {
  fnCalcPrice(document.forms[0])
  MM_preloadImages('images/nav_construction_on.jpg','images/nav_safetytraining_on.jpg','images/nav_emergency_on.jpg','images/nav_registration_on.jpg','images/nav_links_on.jpg','images/nav_employment_on.jpg','images/int_cal_prev_on.jpg','images/int_cal_next_on.jpg')
 
}
</script>
</head><body>
 
.
.
            <form name="individualRegistrationForm" id="individualRegistrationForm" method="post" action="individual.html">
            <input name="PROCESS" id="PROCESS" value="TRUE" type="hidden">
            <input name="calculatedTotal" value="0" type="hidden">
 
 
.
.
<select name="course" id="course" onchange="fnCalcPrice(this.form)">
.
.
.
 
				<select name="num_students" id="num_students" onchange="fnCalcPrice(this.form)">

Open in new window