Solved

Need to add simple javascript calculator to a form

Posted on 2008-10-23
5
690 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:egoselfaxis
5 Comments
 
LVL 14

Expert Comment

by:Tchuki
ID: 22787999
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

0
 
LVL 7

Accepted Solution

by:
bluV11t earned 500 total points
ID: 22788215
Try this:
<!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>Homeland Safety, Inc. - Registration : Company Registration</title>
 

<link rel="stylesheet" type="text/css" href="Filer_for_individual/style.css">
 

<link rel="shortcut icon" href="http://72.52.247.122/%7Ehomeland/favicon.ico">
 

<script type="text/javascript" src="Filer_for_individual/rollovers.js"></script>
 

<script type="text/javascript" src="Filer_for_individual/showhide.js"></script>
 

<script type="text/javascript" src="Filer_for_individual/form_individual.js"></script>
 

<link href="Filer_for_individual/esstyle.css" rel="stylesheet" type="text/css">

<style type="text/css">

<!--

.s22 {background-color: #A4CAE6;}

.s21 {background-color: #F2BFBF;}

.s23 {background-color: #CCFF00;}

.s24 {background-color: #FBF484;}

.s29999 {background-color: #FFC18A;}

-->

</style>

<script language=javascript>

function fnCalcPrice(){

var optionList = document.getElementById('course');

var numberStudents = document.getElementById('num_students').value;

var coursePrice = 0;

switch(optionList.value)

{

case '4 hour Supported Scaffold Course (Local Law 52) - $150':

  coursePrice = 150;

  break;    

case '32 hour Supported Scaffold Course (Local Law 52) - $550':

  coursePrice = 550;

  break;

case '10 Hour OSHA Course - $295':

  coursePrice = 295;

  break;

  case '7 Hour NYC Site Safety Refresher Course - $195':

  coursePrice = 195;

  break;

  case '40 Hour NYC Site Safety Manager Course - $650':

  coursePrice = 650;

  break;

  case '30 Hour OSHA Course - $600':

  coursePrice = 600;

  break;

    case 'Master Plumber and Fire Suppression Refresher (7 hour) - $225':

  coursePrice = 225;

  break;

    case 'EAP Director - $225':

  coursePrice = 225;

  break;

    case 'Fire Safety Director - $295':

  coursePrice = 295;

  break;

default:

  // none selected

  coursePrice=0;

}

var calculatedTotal = coursePrice * numberStudents;

 document.getElementById('calculatedPrice').innerHTML = calculatedTotal;

}
 

</script>
 

</head><body onload="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')">
 

<div id="container">
 

			<div id="topheader_homelinks">
 

	<div class="floatleft_small">
 

		<a href="http://72.52.247.122/%7Ehomeland/index.html" class="noborder"><img src="Filer_for_individual/hp_home_icon.jpg" alt="Home" width="21" align="top" border="0" height="21"></a>
 

	</div>
 

	<div class="floatleft_small">
 

		<img src="Filer_for_individual/nav_top_divider.jpg" alt="|" class="margintop" width="1" align="top" height="24">
 

	</div>
 

	<div class="floatleft_small">
 

		<a href="http://72.52.247.122/%7Ehomeland/about.html">About Us</a>
 

	</div>
 

	<div class="floatleft_small">
 

		<img src="Filer_for_individual/nav_top_divider.jpg" alt="|" class="margintop" width="1" align="top" height="24">
 

	</div>
 

	<div class="floatleft_small">
 

		<a href="http://72.52.247.122/%7Ehomeland/contact.html">Contact Us</a>
 

	</div>
 

	<div class="clear"> </div>
 
 

	</div>
 

	<img src="Filer_for_individual/hp_hdr_logo.jpg" alt="Homeland Safety Inc" usemap="#Map" width="759" border="0" height="111"><img src="Filer_for_individual/hp_hdr_resume.jpg" alt="EMAIL RESUME NOW" usemap="#emailresume" width="194" border="0" height="111"><br>
 

	<div id="topheader_mainnav" onmouseout="hideSec(2)">
 

		<img src="Filer_for_individual/nav_cap_left.jpg" alt="Homeland Safety Inc" width="45" height="43"><a href="http://72.52.247.122/%7Ehomeland/construction.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('construction','','images/nav_construction_on.jpg',1)"><img src="Filer_for_individual/nav_construction_off.jpg" alt="CONSTRUCTION SAFETY SERVICES" name="construction" id="construction" width="223" border="0" height="43"></a><a href="http://72.52.247.122/%7Ehomeland/safety.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('safety','','images/nav_safetytraining_on.jpg',1)"><img src="Filer_for_individual/nav_safetytraining_off.jpg" alt="SAFETY TRAINING" name="safety" id="safety" width="129" border="0" height="43"></a><a href="http://72.52.247.122/%7Ehomeland/emergency.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('emergency','','images/nav_emergency_on.jpg',1)"><img src="Filer_for_individual/nav_emergency_off.jpg" alt="EMERGENCY PREPAREDNESS" name="emergency" id="emergency" width="189" border="0" height="43"></a><a href="http://72.52.247.122/%7Ehomeland/company.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('registration','','images/nav_registration_on.jpg',1);showSec(2);"><img src="Filer_for_individual/nav_registration_on.jpg" alt="REGISTRATION" name="registration" id="registration" width="109" border="0" height="43"></a><a href="http://72.52.247.122/%7Ehomeland/links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/nav_links_on.jpg',1)"><img src="Filer_for_individual/nav_links_off.jpg" alt="LINKS" name="links" id="links" width="55" border="0" height="43"></a><a href="http://72.52.247.122/%7Ehomeland/employment.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('employment','','images/nav_employment_on.jpg',1)"><img src="Filer_for_individual/nav_employment_off.jpg" alt="EMPLOYMENT OPPORTUNITIES" name="employment" id="employment" width="203" border="0" height="43"></a><br>
 

	</div>
 

	<div style="visibility: hidden;" id="sec2" onmouseover="showSec(2)" onmouseout="hideSec(2)">
 

		<a href="http://72.52.247.122/%7Ehomeland/company.html" class="subnavlinks">Company Registration</a><br>
 

		<a href="http://72.52.247.122/%7Ehomeland/individual.html" class="subnavlinks">Individual Registration</a><br>
 

	</div>

<div id="int_rightside">
 

		<div id="calendar_wrapper">
 

			

			

<table width="194" border="0" cellpadding="0" cellspacing="0">
 

<tbody><tr><td><a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('calleft','','images/int_cal_prev_on.jpg',1)" href="http://72.52.247.122/%7Ehomeland/individual.html?mo=9&amp;yr=2008" class="navTableText"><img src="Filer_for_individual/int_cal_prev_off.jpg" alt="&lt;" name="calleft" id="calleft" width="32" border="0" height="29"></a></td><td class="calendar_date">OCTOBER &nbsp; 2008</td><td><a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('calright','','images/int_cal_next_on.jpg',1)" href="http://72.52.247.122/%7Ehomeland/individual.html?mo=11&amp;yr=2008" class="navTableText"><img src="Filer_for_individual/int_cal_next_off.jpg" alt="&gt;" name="calright" id="calright" width="35" border="0" height="29"></a></td></tr>
 

</tbody></table>

			<div id="calendar_int">
 

				<br>
 

				

				<script type="text/JavaScript">

<!--

function popupEvent(ev, w, h) {

  var winl = (screen.width - w) / 2;

  var wint = (screen.height - h) / 2;

  win = window.open("http://72.52.247.122/~homeland/calendar/functions/popup.php?ev=" + ev + "&readFile=0&readSQL=1&showCat=&oc=1","Calendar","scrollbars=yes,status=no,location=no,toolbar=no,menubar=no,directories=no,resizable=yes,width=" + w + ",height=" + h + ",top=" + wint + ",left=" + winl + "");

  if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }

  }

//-->

</script>

<table class="mainTable" cellpadding="0" cellspacing="1">

 <tbody><tr>

  <td class="monthYearText monthYearRow" colspan="7" title="Easy PHP Calendar 6">

    October

  </td>

 </tr>

 <tr class="dayNamesText">

  <td class="dayNamesRow" width="14%">Sun</td>

  <td class="dayNamesRow" width="14%">Mon</td>

  <td class="dayNamesRow" width="14%">Tue</td>

  <td class="dayNamesRow" width="14%">Wed</td>

  <td class="dayNamesRow" width="14%">Thu</td>

  <td class="dayNamesRow" width="14%">Fri</td>

  <td class="dayNamesRow" width="14%">Sat</td>

 </tr>

 <tr class="rows" onclick="location.href='calendar/index.php?mo=10&amp;yr=2008';" style="cursor: pointer;">

  <td class="sOther">28</td>

  <td class="sOther">29</td>

  <td class="sOther">30</td>

  <td class="s2">1</td>

  <td class="s2">2</td>

  <td class="s2">3</td>

  <td class="s200">4</td>

</tr>

 <tr class="rows" onclick="location.href='calendar/index.php?mo=10&amp;yr=2008';" style="cursor: pointer;">

  <td class="s200">5</td>

  <td class="s2">6</td>

  <td class="s2">7</td>

  <td class="s2">8</td>

  <td class="s2">9</td>

  <td class="s2">10</td>

  <td class="s200">11</td>

</tr>

 <tr class="rows" onclick="location.href='calendar/index.php?mo=10&amp;yr=2008';" style="cursor: pointer;">

  <td class="s200">12</td>

  <td class="s2">13</td>

  <td class="s2">14</td>

  <td class="s2">15</td>

  <td class="s2">16</td>

  <td class="s2">17</td>

  <td class="s200">18</td>

</tr>

 <tr class="rows" onclick="location.href='calendar/index.php?mo=10&amp;yr=2008';" style="cursor: pointer;">

  <td class="s200">19</td>

  <td class="s2">20</td>

  <td class="s2">21</td>

  <td class="s2">22</td>

  <td class="s2 today">23</td>

  <td class="s2">24</td>

  <td class="s200">25</td>

</tr>

 <tr class="rows" onclick="location.href='calendar/index.php?mo=10&amp;yr=2008';" style="cursor: pointer;">

  <td class="s200">26</td>

  <td class="s2">27</td>

  <td class="s2">28</td>

  <td class="s2">29</td>

  <td class="s2">30</td>

  <td class="s23">31</td>

  <td class="sOther">1</td>

</tr>

 <tr class="rows" onclick="location.href='calendar/index.php?mo=10&amp;yr=2008';" style="cursor: pointer;">

  <td class="sOther">2</td>

  <td class="sOther">3</td>

  <td class="sOther">4</td>

  <td class="sOther">5</td>

  <td class="sOther">6</td>

  <td class="sOther">7</td>

  <td class="sOther">8</td>

</tr>

</tbody></table>
 

			</div>
 

		</div>
 

	<div class="clear"> </div>
 

	<div id="hottopics_wrapper">
 

		<img src="Filer_for_individual/int_hottopics_hdr.jpg" alt="HOT TOPICS" width="194" height="50"><br>
 

		<div id="hottopics">
 

			<a href="http://72.52.247.122/%7Ehomeland/safety.html#osha10">&gt; NYC required OSHA 10<br>&nbsp;&nbsp;&nbsp;hour course</a>

<p>&nbsp;</p>
 

<a href="http://72.52.247.122/%7Ehomeland/construction.html">&gt; Licensed Site Safety<br>&nbsp;&nbsp;&nbsp;Managers &amp; Coordinators</a>

<p>&nbsp;</p>
 

<a href="http://72.52.247.122/%7Ehomeland/safety.html#4hour">&gt; NYC required Supported<br>&nbsp;&nbsp;&nbsp;Scaffold Courses</a>

<p>&nbsp;</p>
 

<a href="http://72.52.247.122/%7Ehomeland/emergency.html">&gt; New NYC Fire Code<br>&nbsp;&nbsp;&nbsp;Requirements </a>

<p>&nbsp;</p>
 

<a href="http://72.52.247.122/%7Ehomeland/construction.html#concrete">&gt; NYC Concrete Safety<br>&nbsp;&nbsp;&nbsp;Managers </a>

<p>&nbsp;</p>

		</div>
 

	</div>
 

	</div>
 

	<img src="Filer_for_individual/int_phdr_individualreg.jpg" alt="Individual Registration" width="754" height="58">
 

	<div id="inttext">
 

		

		<div id="error_list" class="hide"></div>
 

		<p><em>* Fields marked with an asterisk below are required.</em></p>
 

		<div id="form">
 

			<form name="individualRegistrationForm" id="individualRegistrationForm" method="post" action="individual.html">
 

			<input name="PROCESS" id="PROCESS" value="TRUE" type="hidden">
 

			<h1>Registrant Information</h1>
 

			<p><em>Names will be printed on your certification card as below.</em></p>
 

			<div class="form_label">
 

				<label id="fname_label">* First Name:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="first_name" id="first_name" class="textinput" type="text">
 

			</div>
 

			<br>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="lname_label">* Last Name:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="last_name" id="last_name" class="textinput" type="text">
 

			</div>
 

			<br>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="lname_label">Company Name:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="company_name" id="company_name" class="textinput" type="text">
 

			</div>
 

			<br>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="address1_label">* Mailing Address #1:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="address1" id="address1" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="address2_label">Address #2:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="address2" id="address2" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="city_label">* City:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="city" id="city" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="state_label">* State:</label>
 

			</div>
 

			<div class="form_field">
 

				<select name="state" id="state">

					<option value="">--- Select One ---</option>

					<option value="AL">Alabama</option>

					<option value="AK">Alaska</option>

					<option value="AZ">Arizona</option>

					<option value="AR">Arkansas</option>

					<option value="CA">California</option>

					<option value="CO">Colorado</option>

					<option value="CT">Connecticut</option>

					<option value="DE">Delaware</option>

					<option value="DC">District of Columbia</option>

					<option value="FL">Florida</option>

					<option value="GA">Georgia</option>

					<option value="HI">Hawaii</option>

					<option value="ID">Idaho</option>

					<option value="IL">Illinois</option>

					<option value="IN">Indiana</option>

					<option value="IA">Iowa</option>

					<option value="KS">Kansas</option>

					<option value="KY">Kentucky</option>

					<option value="LA">Louisiana</option>

					<option value="ME">Maine</option>

					<option value="MD">Maryland</option>

					<option value="MA">Massachusetts</option>

					<option value="MI">Michigan</option>

					<option value="MN">Minnesota</option>

					<option value="MS">Mississippi</option>

					<option value="MO">Missouri</option>

					<option value="MT">Montana</option>

					<option value="NE">Nebraska</option>

					<option value="NV">Nevada</option>

					<option value="NH">New Hampshire</option>

					<option value="NJ">New Jersey</option>

					<option value="NM">New Mexico</option>

					<option value="NY">New York</option>

					<option value="NC">North Carolina</option>

					<option value="ND">North Dakota</option>

					<option value="OH">Ohio</option>

					<option value="OK">Oklahoma</option>

					<option value="OR">Oregon</option>

					<option value="PA">Pennsylvania</option>

					<option value="RI">Rhode Island</option>

					<option value="SC">South Carolina</option>

					<option value="SD">South Dakota</option>

					<option value="TN">Tennessee</option>

					<option value="TX">Texas</option>

					<option value="UT">Utah</option>

					<option value="VT">Vermont</option>

					<option value="VA">Virginia</option>

					<option value="WA">Washington</option>

					<option value="WV">West Virginia</option>

					<option value="WI">Wisconsin</option>

					<option value="WY">Wyoming</option>

				</select>
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="zip_label">* Zip Code:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="zip" id="zip" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="phone_label">* Daytime Phone Number:</label>
 

			</div>
 

			<div class="form_field">
 

				( <input name="phone1" id="phone1" class="phone_areacode" type="text"> )  <input name="phone2" id="phone2" class="phone_prefix" type="text"> - <input name="phone3" id="phone3" class="phone_suffix" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="cellphone_label">Cell Phone Number:</label>
 

			</div>
 

			<div class="form_field">
 

				( <input name="cellphone1" id="cellphone1" class="phone_areacode" type="text"> )  <input name="cellphone2" id="cellphone2" class="phone_prefix" type="text"> - <input name="cellphone3" id="cellphone3" class="phone_suffix" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="email_label">* Email Address:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="email" id="email" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<p><em>* Please include any licenses (Plumbers, Fire Safety Director, etc).</em></p>
 

			<div class="form_label">
 

				<label id="license_fname_label">License Numbers:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="license_numbers" id="license_numbers" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 
 

			<h1>Course Information</h1>
 

			<p><em>* Please consult our course calendar for available course dates.</em></p>
 

			<div class="form_label">
 

				<label id="course_label">* Course:</label>
 

			</div>
 

			<div class="form_field">
 

				<select name="course" id="course" onchange="JavaScript: fnCalcPrice();">
 

						<option value="">--- Select One ---</option>
 

                        <option value="4 hour Supported Scaffold Course (Local Law 52) - $150">4 hour Supported Scaffold Course (Local Law 52) - $150</option>
 

                        <option value="32 hour Supported Scaffold Course (Local Law 52) - $550">32 hour Supported Scaffold Course (Local Law 52) - $550</option>
 

                        <option value="10 Hour OSHA Course - $295">10 Hour OSHA Course - $295</option>
 

                        <option value="7 Hour NYC Site Safety Refresher Course - $195">7 Hour NYC Site Safety Refresher Course - $195</option>
 

                        <option value="40 Hour NYC Site Safety Manager Course - $650">40 Hour NYC Site Safety Manager Course - $650</option>
 

                        <option value="30 Hour OSHA Course - $600">30 Hour OSHA Course - $600</option>
 

                        <option value="Master Plumber and Fire Suppression Refresher (7 hour) - $225">Master Plumber and Fire Suppression Refresher (7 hour) - $225</option>
 

                        <option value="EAP Director - $225">EAP Director - $225</option>
 

                        <option value="Fire Safety Director - $295">Fire Safety Director - $295</option>
 

				</select>
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="coursedate_label">* Course Date:</label>
 

			</div>
 

			<div class="form_field">
 

				<select name="course_month" id="course_month" class="smallselect">
 

					<option value="">-- Month --</option>
 

					<option value="January">January</option>
 

					<option value="February">February</option>
 

					<option value="March">March</option>
 

					<option value="April">April</option>
 

					<option value="May">May</option>
 

					<option value="June">June</option>
 

					<option value="July">July</option>
 

					<option value="September">September</option>
 

					<option value="October">October</option>
 

					<option value="November">November</option>
 

					<option value="December">December</option>
 

				</select>
 
 

				<select name="course_day" id="course_day" class="smallselect">
 

					<option value="">-- Day --</option>
 

					<option value="1">1</option>
 

					<option value="2">2</option>
 

					<option value="3">3</option>
 

					<option value="4">4</option>
 

					<option value="5">5</option>
 

					<option value="6">6</option>
 

					<option value="7">7</option>
 

					<option value="8">8</option>
 

					<option value="9">9</option>
 

					<option value="10">10</option>
 

					<option value="11">11</option>
 

					<option value="12">12</option>
 

					<option value="13">13</option>
 

					<option value="14">14</option>
 

					<option value="15">15</option>
 

					<option value="16">16</option>
 

					<option value="17">17</option>
 

					<option value="18">18</option>
 

					<option value="19">19</option>
 

					<option value="20">20</option>
 

					<option value="21">21</option>
 

					<option value="22">22</option>
 

					<option value="23">23</option>
 

					<option value="24">24</option>
 

					<option value="25">25</option>
 

					<option value="26">26</option>
 

					<option value="27">27</option>
 

					<option value="28">28</option>
 

					<option value="29">29</option>
 

					<option value="30">30</option>
 

					<option value="31">31</option>
 

				</select>
 

				<select name="course_year" id="course_year" class="smallselect">
 

					<option value="">-- Year --</option>
 

					<option value="2008">2008</option>
 

					<option value="2009">2009</option>
 

					<option value="2010">2010</option>
 

					<option value="2011">2011</option>
 

					<option value="2012">2012</option>
 

				</select>
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="numstudents_label">Number of Students:</label>
 

			</div>
 

			<div class="form_field">
 

				<select name="num_students" id="num_students" onchange="JavaScript: fnCalcPrice();">
 

					<option value="1">1</option>
 

					<option value="2">2</option>
 

					<option value="3">3</option>
 

					<option value="4">4</option>
 

					<option value="5">5</option>
 

				</select>
 

			</div>
 

			<div class="clear"> </div>
 

			<h1>Additional Student Information</h1>
 

			<p><em>* Provide License Numbers for each additional student (if applicable).</em></p>
 

			<div class="form_label">
 

				<label id="student1_fname_label">Student Name #1:</label>
 

			</div>
 

			<div class="form_field">
 

				<label>First:</label> <input name="student1_fname" id="student1_fname" class="student_name" type="text"> <label>Last:</label> <input name="student1_lname" id="studentl_fname" class="student_name" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="license_fname_label">License Numbers:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="license_numbers_s1" id="license_numbers_s1" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="student2_fname_label">Student Name #2:</label>
 

			</div>
 

			<div class="form_field">
 

				<label>First:</label> <input name="student2_fname" id="student2_fname" class="student_name" type="text"> <label>Last:</label> <input name="student2_lname" id="student2_fname" class="student_name" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="license_fname_label">License Numbers:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="license_numbers_s2" id="license_numbers_s2" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="student3_fname_label">Student Name #3:</label>
 

			</div>
 

			<div class="form_field">
 

				<label>First:</label> <input name="student3_fname" id="student3_fname" class="student_name" type="text"> <label>Last:</label> <input name="student3_lname" id="student3_fname" class="student_name" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="license_fname_label">License Numbers:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="license_numbers_s3" id="license_numbers_s3" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="student4_fname_label">Student Name #4:</label>
 

			</div>
 

			<div class="form_field">
 

				<label>First:</label> <input name="student4_fname" id="student4_fname" class="student_name" type="text"> <label>Last:</label> <input name="student4_lname" id="student4_fname" class="student_name" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="license_fname_label">License Numbers:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="license_numbers_s4" id="license_numbers_s4" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<h1>Payment Information</h1>
 

			<div class="form_label">
 

				<label id="cardnum_label">Name on Credit Card:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="name_on_card" id="name_on_card" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 
 
 
 

			<div class="form_label">
 

				<label id="payment_method_label">* Payment Method:</label>
 

			</div>
 

			<div class="form_field">
 

				<select name="payment_method" id="payment_method">
 

					<option value="">--- Select One ---</option>
 

					<option value="Visa">Visa</option>
 

					<option value="Mastercard">Mastercard</option>
 

					<option value="American Express">American Express</option>
 

					<option value="Check / Money Order (Mailed)">Check / Money Order (Mailed)</option>
 

				</select>
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="cardnum_label">Credit Card Number:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="card_number" id="card_number" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="cczip_label">Credit Card Zip Code:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="card_zip" id="card_zip" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="expdate_label">Credit Card Expiration Date:</label>
 

			</div>
 

			<div class="form_field">
 

				<select name="exp_month" id="exp_month" class="smallselect">
 

					<option value="">-- Month --</option>
 

					<option value="January">January</option>
 

					<option value="February">February</option>
 

					<option value="March">March</option>
 

					<option value="April">April</option>
 

					<option value="May">May</option>
 

					<option value="June">June</option>
 

					<option value="July">July</option>
 

					<option value="September">September</option>
 

					<option value="October">October</option>
 

					<option value="November">November</option>
 

					<option value="December">December</option>
 

				</select>
 
 

				<select name="exp_day" id="exp_day" class="smallselect">
 

					<option value="">-- Day --</option>
 

					<option value="1">1</option>
 

					<option value="2">2</option>
 

					<option value="3">3</option>
 

					<option value="4">4</option>
 

					<option value="5">5</option>
 

					<option value="6">6</option>
 

					<option value="7">7</option>
 

					<option value="8">8</option>
 

					<option value="9">9</option>
 

					<option value="10">10</option>
 

					<option value="11">11</option>
 

					<option value="12">12</option>
 

					<option value="13">13</option>
 

					<option value="14">14</option>
 

					<option value="15">15</option>
 

					<option value="16">16</option>
 

					<option value="17">17</option>
 

					<option value="18">18</option>
 

					<option value="19">19</option>
 

					<option value="20">20</option>
 

					<option value="21">21</option>
 

					<option value="22">22</option>
 

					<option value="23">23</option>
 

					<option value="24">24</option>
 

					<option value="25">25</option>
 

					<option value="26">26</option>
 

					<option value="27">27</option>
 

					<option value="28">28</option>
 

					<option value="29">29</option>
 

					<option value="30">30</option>
 

					<option value="31">31</option>
 

				</select>
 

				<select name="exp_year" id="exp_year" class="smallselect">
 

					<option value="">-- Year --</option>
 

					<option value="2008">2008</option>
 

					<option value="2009">2009</option>
 

					<option value="2010">2010</option>
 

					<option value="2011">2011</option>
 

					<option value="2012">2012</option>
 

				</select>
 

			</div>
 

			<div class="clear"> </div>
 

			<h1>Credit Card Billing Information</h1>
 

			<p><em>* Fill out this section only if this information is different from Payment Information.</em></p>
 

			<div class="form_label">
 

				<label id="cc_address1_label">Mailing Address #1:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="cc_address1" id="cc_address1" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="cc_address2_label">Address #2:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="cc_address2" id="cc_address2" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="cc_city_label">City:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="cc_city" id="cc_city" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="cc_state_label">State:</label>
 

			</div>
 

			<div class="form_field">
 

				<select name="cc_state" id="cc_state">

					<option value="">--- Select One ---</option>

					<option value="AL">Alabama</option>

					<option value="AK">Alaska</option>

					<option value="AZ">Arizona</option>

					<option value="AR">Arkansas</option>

					<option value="CA">California</option>

					<option value="CO">Colorado</option>

					<option value="CT">Connecticut</option>

					<option value="DE">Delaware</option>

					<option value="DC">District of Columbia</option>

					<option value="FL">Florida</option>

					<option value="GA">Georgia</option>

					<option value="HI">Hawaii</option>

					<option value="ID">Idaho</option>

					<option value="IL">Illinois</option>

					<option value="IN">Indiana</option>

					<option value="IA">Iowa</option>

					<option value="KS">Kansas</option>

					<option value="KY">Kentucky</option>

					<option value="LA">Louisiana</option>

					<option value="ME">Maine</option>

					<option value="MD">Maryland</option>

					<option value="MA">Massachusetts</option>

					<option value="MI">Michigan</option>

					<option value="MN">Minnesota</option>

					<option value="MS">Mississippi</option>

					<option value="MO">Missouri</option>

					<option value="MT">Montana</option>

					<option value="NE">Nebraska</option>

					<option value="NV">Nevada</option>

					<option value="NH">New Hampshire</option>

					<option value="NJ">New Jersey</option>

					<option value="NM">New Mexico</option>

					<option value="NY">New York</option>

					<option value="NC">North Carolina</option>

					<option value="ND">North Dakota</option>

					<option value="OH">Ohio</option>

					<option value="OK">Oklahoma</option>

					<option value="OR">Oregon</option>

					<option value="PA">Pennsylvania</option>

					<option value="RI">Rhode Island</option>

					<option value="SC">South Carolina</option>

					<option value="SD">South Dakota</option>

					<option value="TN">Tennessee</option>

					<option value="TX">Texas</option>

					<option value="UT">Utah</option>

					<option value="VT">Vermont</option>

					<option value="VA">Virginia</option>

					<option value="WA">Washington</option>

					<option value="WV">West Virginia</option>

					<option value="WI">Wisconsin</option>

					<option value="WY">Wyoming</option>

				</select>
 

			</div>
 

			<div class="clear"> </div>
 

			<div class="form_label">
 

				<label id="cc_zip_label">Zip Code:</label>
 

			</div>
 

			<div class="form_field">
 

				<input name="cc_zip" id="cc_zip" class="textinput" type="text">
 

			</div>
 

			<div class="clear"> </div>
 

			<h1>Additional Information</h1>
 

			<div class="form_label">
 

				<label id="comments_label">Notes / Comments:</label>
 

			</div>
 

			<div class="form_field">
 

				<textarea name="additional_info" id="additional_info" cols="35" rows="5"></textarea>
 

			</div>
 

			<div class="clear"><br></div><br />

            Total price: <div id="calculatedPrice" style="font-size: 12pt; font-weight: bold;"></div><br />

			<div align="center">
 

				<img src="Filer_for_individual/int_btn_submit.jpg" alt="Submit" onclick="validate_form()" style="cursor: pointer;" width="73" border="0" height="21">
 

			</div>
 

			</form>
 

		</div>
 

		

	</div><br>
 

	<div class="clear"> </div>
 

</div>
 

<div id="footer">
 

		<div>
 

		<a href="http://72.52.247.122/%7Ehomeland/index.html" class="noleftmargin">Home</a> / <a href="http://72.52.247.122/%7Ehomeland/about.html">About Us</a> / <a href="http://72.52.247.122/%7Ehomeland/contact.html">Contact Us</a> / <a href="http://72.52.247.122/%7Ehomeland/construction.html">Construction Safety Services</a>  / <a href="http://72.52.247.122/%7Ehomeland/safety.html">Safety Training</a>/ <a href="http://72.52.247.122/%7Ehomeland/emergency.html">Emergency Preparedness</a> / <a href="http://72.52.247.122/%7Ehomeland/company.html">Registration</a> / <a href="http://72.52.247.122/%7Ehomeland/links.html">Links</a> / <a href="http://72.52.247.122/%7Ehomeland/employment.html">Employment Opportunities</a> </div>
 

		<span>
 

			Homeland Safety Consultants, Inc. | 40 Exchange Place New York, NY 10005 | 212-344-1105
 

		</span>
 

	<br><br>

</div>
 

<map name="emailresume" id="emailresume">

	<area shape="rect" coords="22,73,168,107" href="mailto:admin@homelandsafetyinc.com" alt="EMAIL RESUME NOW">

</map>
 

<map name="Map" id="Map">

	<area shape="rect" coords="55,25,576,84" href="http://72.52.247.122/%7Ehomeland/index.html" alt="HOMELAND SAFETY INC">

</map>
 

</body></html>

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 22799919
Works like a charm.  Thanks bluV11t!

- Yvan

0
 

Expert Comment

by:caledoniack
ID: 25228973
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 25238451
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

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now