First time using Javascript Please help with calculations

Popsicletoes · 01-17-2012, 04:48 PM

Hello,
I was given an assignment to change an existing form into one that will automatically perform calculations and since I have never done this before I am learning as I go. The form needs to do the following:
gr_percentage = list_percentage + sale_percentage
gr_comm_dollars = gr_percentage * price
list_comm_dollars = list_percentage * price
and so on. I also need to calculate the following
gr_total_dollars = gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars (all of which will be calculated on entries for the sale and list portions).

I though that I had it figured out but upon testing the form it does nothing. Please let me know what I need to change in order for the calculations to work properly. Thank you

Code:

<script type="text/javascript">

	function calculate(Id)
	 {
		 var price = document.getElementById('price').value;
		 var REO_list_percentage = document.getElementById('REO_list.percentage').value;
		 var REO_sale_percentage = document.getElementById('REO_sale_percentage').value;
		 var REO_sale_dollars = document.getElementById('REO_sale_dollars').value
		 var REO_list_dollars = document.getElementById('REO_list_dollars').value
		 var REO_sale_bonus_dollars = document.getElementById('REO_sale_bonus_dollars').value;
		 var REO_list_bonus_dollars = document.getElementById('REO_list_bonus_dollars').value;
		 var REO_sale_fixed_dollars = document.getElementById('REO_sale_fixed_dollars').value;
		 var REO_list_fixed_dollars = document.getElementById('REO_list_fixed_dollars').value;
		 var gr_comm_dollars = document.getElementById('gr_comm_dollars').value;
		 var gr_bonus_dollars = document.getElementById('gr_bonus_dollars').value;
		 var gr_fixed_dollars = document.getElementById('gr_fixed_dollars').value;
		 
		document.getElementById('gr_comm_percentage').value=REO_list_percentage + REO_sale_percentage;
		document.getElementById('gr_comm_dollars').value=gr_comm_percentage/100*price;
		document.getElementById('reo_list_dollars').value=REO_list_percentage/100*price;
		document.getElementById('reo_sale_dollars').value=REO_sale_percentage/100*price;
		document.getElementById('gr_fixed_dollars').value=REO_sale_fixed_dollars + REO_list_fixed_dollars;
		document.getElementById('gr_bonus_dollars').value=REO_sale_bonus_dollars + REO_list_bonus_dollars;
		document.getElementById('gr_total_dollars').value=gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars;
		document.getElementById('REO_sale_total_dollars').value = REO_sale_comm_dollars + REO_sale_fixed_dollars + reo_sale_bonus_dollars;
		document.getElementById('REO_list_total_dollars').value = REO_list_comm_dollars + REO_list_fixed_dollars + reo_list_bonus_dollars;
		
		gr_comm_dollars = isNAN(gr_comm_dollars)?0:parseFloat(gr_comm_dollars,10);
		gr_fixed_dollars = isNAN(gr_fixed_dollars)?0:parseFloat(gr_fixed_dollars,10);
		gr_bonus_dollars = isNAN(gr_bonus_dollars)?0:parseFloat(gr_bonus_dollars,10);
		
		
		
		
}													   
	</script>
</head>
//here is the form
            <tr >
							<td><cfoutput><cfif #form.list_type# IS 1 OR #form.list_type# IS 2><b>*</b></cfif></cfoutput><b>Sold Price</b> </td>
                            <td><input type="text" id="price" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_comm_dollars','REO_sale_dollars','REO_list_dollars')" /></td>
                            </tr>    
                            <tr><td colspan="2"><b>Commission Information</b>
                            </td>
                            </tr>          
                        <!---Form headings--->
                        <tr><td>&nbsp;</td>
                        <td colspan="2" align="center"><b>Main Commission</b></td>
                        	<td align="center"><b>Fixed</b></td>
                            <td align="center"><b>Bonus/<br />Other</b></td>
                            <td align="center"><b>Total</b></td>
                         </tr>
                         <tr>
                         <td>&nbsp;</td>
                         <td><b>%</b></td>
                         <td><b>$</b></td>
                         <td><b>$</b></td>
                         <td><b>$</b></td>
                         <td><b>$</b></td>
                         </tr>
                         <!---End form headings--->
						
                            <tr><td><b>*</b>Gross Comm</td>
							<td><input type="Text" id="gr_comm_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_comm_dollars')" > </td>
							<td><input type="text" id="gr_comm_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_total_dollars')"> </td>
                            <td><input type="text" id="gr_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_total_dollars')"> </td>
                             <td><input type="text" id="gr_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate('gr_total_dollars')"> </td>
                              <td><input type="text" name="gr_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
                            
						</tr>
						<tr>
							<cfoutput>
							<cfif #form.list_type# IS 2>
							<td><b>*</b>REO List </td><!---Comp. Dollar--->
							<td><input type="Text" id="REO_list_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_list_dollars')"> </td>
							<td><input type="text" id="REO_list_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
                            <td><input type="text" id="REO_list_fixed_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
                             <td><input type="text" id="REO_list_bonus_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
                             <td><input type="text" id="REO_list_total_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
                            
                            
                            
                           <!---List type 1 begins here---> 
                            
                            
							<cfelseif #form.list_type# IS 1 ><td><b>*</b>Amt Pd to O/B</td>
							<td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
							<td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" > </td>
							<cfelse><td>Amt Pd to O/B</td>
							<td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
							<td>$<input type="text" name="OB_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
							</cfif>
							</cfoutput>
						</tr>
						<tr>
							<cfoutput>
							<cfif #form.list_type# IS 2>
							<td><b>*</b>REO Sale  </td><!---Comp. Dollar--->
							<td><input type="Text" id="REO_sale_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_sale_dollars')"> </td>
							<td><input type="text" id="REO_sale_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')" > </td>
                            <td><input type="text" id="REO_sale_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td>
                              <td><input type="text" id="REO_sale_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td>
                                <td><input type="text" id="REO_sale_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
                            
                            
                            
                            
                            
                            
                            
                            
							<cfelse><td><b>*</b>REO Gross</td>
							<td><input type="Text" name="comp_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
							<td>$<input type="text" name="comp_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
							</cfif>
							</cfoutput>
						</tr>														
						<tr>

djh101 · 01-17-2012, 05:27 PM

onchange="calculate" should be onchange="calculate()". Even if there aren't any variables associated with the function, the parenthesis are what tell the browser that calculate is a function and not a variable.

Popsicletoes · 01-17-2012, 07:09 PM

Thank you, I updated the onChange to include the variables and the form still is not performing the calculations, I posted the updated code above so any other suggestions would be greatly appreciated. Thanks again.

djh101 · 01-17-2012, 08:07 PM

First, your calculate function only has one parameter, so something like calculate('gr_comm_dollars','REO_sale_dollars','REO_list_dollars') isn't going to work. Instead, you would have to call the function 3 times.

Second, you don't even use the Id parameter in your function, so having it in there really serves no purpose.

Try the above. If you are using Google Chrome or Firefox (not sure about Internet Explorer), you can hit Ctrl+Shift+J to view the error console which will inform you of any Javascript errors.

Popsicletoes · 01-17-2012, 09:20 PM

Thanks, i removed those parameters. I will pull up there errors and see what's going on...thanks!