[Midevil Chaos]

Hi, I have been creating a mortgage calculator, but now I am out of ideas in how to resolve the problems I've been having. I have my js file below, with my index below it.


//////////////// CHANGES TO BRING ///////////////////
//////////////// CHANGES TO BRING ///////////////////
//////////////// CHANGES TO BRING ///////////////////


///////////////////
UNSUCCESSFUL SO FAR
The invalid email addon wasn't working for me... even with different formulas... So for now, I have deleted it.

///////////////////
UNSUCCESSFUL SO FAR
Add 3% to property_value if down_payment is less than 20%

///////////////////
UNSUCCESSFUL SO FAR
Disable fixed_checked when variable_check is selected (and vice versa)

///////////////////
UNSUCCESSFUL SO FAR
When calculating, add monthly payments (amortization_month)
This also includes yearly payments (amortization_years)

///////////////////
UNSUCCESSFUL SO FAR
While using the calculate button: in the interest field...

the fixed_rate ---|
the variable_rate ----> None are working
the multi_rate ---|

///////////////////
UNSUCCESSFUL SO FAR
The loop will have to be fixed... right now, it's doubling the final payments

///////////////////
UNSUCCESSFUL SO FAR
(amortization_years.value < 1 && amortization_months.value < 1)
(amortization_months.value < 1 && amortization_years.value < 1)

green is appearing, when an error should occur

///////////////////
Haven't tackled this so far (outside of table? Good idea maybe)
add name, phone number, address etc. in submit form
add/fix css

///////////////////
Haven't tackled this so far
incorporate rates and terms (link)

/////////////////////////////////////////////////////
/////////////////////////////////////////////////////
/////////////////////////////////////////////////////

//////////////// GLOBAL VARIBALES ///////////////////
//////////////// GLOBAL VARIBALES ///////////////////
//////////////// GLOBAL VARIBALES ///////////////////

var full_name;


var checkboxes_x = document.getElementById(checkboxes_x);

var fixed_checked = document.getElementById('fixed_rate');
var variable_checked = document.getElementById('variable_rate');
var multi_checked = document.getElementById('multi_rate');

var full_total = document.getElementById('full_total');


///////////////////// ARRAYS ////////////////////////
///////////////////// ARRAYS ////////////////////////
///////////////////// ARRAYS ////////////////////////


var a_name = new Array();
var a_number =  new Array();
var a_address =  new Array();
var a_email = new Array();

var a_mortgage = new Array();
var a_interest = new Array();
var a_capital_plus_interest = new Array();
var a_payment = new Array();

//////////////// RETURNING_FORM //////////////////////
//////////////// RETURNING_FORM //////////////////////
//////////////// RETURNING_FORM //////////////////////

/*
function disabled_fixed_rate(){
	
	if (variable_rate.disabled == true))
		fixed_rate.disabled = disabled;
	
	}else (variable_rate.value == false)
		fixed_rate.disabled = false;
	}
*/

function returning_form(){

////// VALIDATION //////
var valid = true;

	
	var valid_green = "green solid 2px";

	var full_name = document.getElementById ('full_name');
	var number = document.getElementById ('number');
	
	var address = document.getElementById ('address');
	var email = document.getElementById ('email');
	
	var property_value = document.getElementById ('property_value');
	
	var amortization_years = document.getElementById ('amortization_years');
	var amortization_months = document.getElementById ('amortization_months');
	
	var interest_rate = document.getElementById ('interest_rate');
	var down_payment = document.getElementById ('down_payment');
	
	
	full_name.style.border = "1px solid black";
	number.style.border = "1px solid black";
	address.style.border = "1px solid black";
	email.style.border = "1px solid black";
	property_value.style.border = "1px solid black";
	amortization_years.style.border = "1px solid black";
	amortization_months.style.border = "1px solid black";
	interest_rate.style.border = "1px solid black";
	down_payment.style.border = "1px solid black";
	
	
	
///////////////// VALIDATION GREEN /////////////////////
///////////////// VALIDATION GREEN /////////////////////
///////////////// VALIDATION GREEN /////////////////////

	
	if (valid_green)
		{full_name.style.border = "green solid 2px";
		number.style.border = "green solid 2px";
		address.style.border = "green solid 2px";
		email.style.border = "green solid 2px";
		property_value.style.border = "green solid 2px";
		amortization_years.style.border = "green solid 2px";
		amortization_months.style.border = "green solid 2px";
		interest_rate.style.border = "green solid 2px";
		down_payment.style.border = "green solid 2px";
		}

		
///////////////// VALIDATION RED /////////////////////	
///////////////// VALIDATION RED /////////////////////	
///////////////// VALIDATION RED /////////////////////	

		if (full_name.value == "" || !isNaN (full_name.value)){
			full_name.style.border = "red solid 2px";
			valid = false;
		
		}if (number.value == "" || isNaN(number.value)){
			number.style.border = "red solid 2px";
			valid = false;
		
		}if (address.value == ""){
			address.style.border = "red solid 2px";
			valid = false;
		
		}if (email.value == "" /*|| validateEmail*/){
			email.style.border = "red solid 2px";
			valid = false
		
		}if (property_value.value == "" || isNaN(property_value.value) || (property_value.value <= 60000)){
			property_value.style.border = "red solid 2px";
			valid = false;
		
		}if (amortization_years.value == "" || isNaN(amortization_years.value) || (amortization_years.value > 35) || (amortization_years.value < 1 && amortization_months.value < 1)){
			amortization_years.style.border = "red solid 2px";
			valid = false;
		
		}if (amortization_months.value == "" || isNaN(amortization_months.value) ||  (amortization_months.value > 12) || (amortization_months.value < 1 && amortization_years.value < 1)){
			amortization_months.style.border = "red solid 2px";
			valid = false;
						
		}if (interest_rate.value == "" || isNaN(interest_rate.value) || (interest_rate.value < 1.99) || (interest_rate.value > 7.99)){
			interest_rate.style.border = "red solid 2px";
			valid = false;
	

		}if (down_payment.value == "" || isNaN(down_payment.value) || ((down_payment.value > (property_value.value*.51)))){
			down_payment.style.border = "red solid 2px";
			valid = false;}
			
	

		
//////////////////////// RATE SWITCH /////////////////////////
//////////////////////// RATE SWITCH /////////////////////////
//////////////////////// RATE SWITCH /////////////////////////
		var fixed_rate = property_value*((interest_rate/12*100)/Math.pow(1-(1+interest_rate/(12*100)),(amortization_months-1)));
		var variable_rate = Math.round(interest_rate*Math.pow(10,2))/Math.pow(10,2);
		var multi_rate = (interest_rate/2)+(variable_rate/2);	

		
	switch(checkboxes_x){
			case '0':
				checkboxes_x = fixed_rate;
			break;
			
			case '1':
				checkboxes_x = variable_rate;
			break;
			
			case '2':
				checkboxes_x = multi_rate;
			break;}
			
		
///////////////// FINAL VALIDATION GREEN /////////////////////
///////////////// FINAL VALIDATION GREEN /////////////////////
///////////////// FINAL VALIDATION GREEN /////////////////////
		
		if (valid == true)
		{full_name.style.border = "green solid 2px";
		number.style.border = "green solid 2px";
		address.style.border = "green solid 2px";
		email.style.border = "green solid 2px";
		property_value.style.border = "green solid 2px";
		amortization_years.style.border = "green solid 2px";
		amortization_months.style.border = "green solid 2px";
		interest_rate.style.border = "green solid 2px";
		down_payment.style.border = "green solid 2px";
	
		

		
	
		
		
		/*+3% 
		if down payment is less than 20% of property value*/
		
		add_3_percent();
		additem();
		
		/*for (i=0
		var total_payment
		total_payment = property_value-down_payment*/
		}

		
/////////////////////// RETURN FALSE /////////////////////////
/////////////////////// RETURN FALSE /////////////////////////
/////////////////////// RETURN FALSE /////////////////////////
	
		
	return false;
}		
		
		
		
////////////// PUSH --- plus 3 percent function ///////////////
////////////// PUSH --- plus 3 percent function ///////////////
////////////// PUSH --- plus 3 percent function ///////////////


function additem(valid){

	/*a_name.push(full_name.value);
	a_number.push(number.value);
	a_address.push(address.value);
	a_email.push(email.value);*/

	a_mortgage.push(property_value.value);
	a_interest.push(interest_rate.value);
	a_capital_plus_interest.push((interest_rate.value + down_payment.value));
	a_payment.push(down_payment.value);

	}
		
		
function add_3_percent(valid){
	if ((((down_payment.value < (property_value.value*.2))))) {property_value.value + (property_value.value*.03);
	} else {property_value.value + 0;
	}
	
	}

		
		
//////////////////////// RESULTS /////////////////////////////
//////////////////////// RESULTS /////////////////////////////
//////////////////////// RESULTS /////////////////////////////

function printdata(){
	//document.getElementById('entire_form').style.display = 'none';
	//window.print();
		
		
	var results = document.getElementById('results');
	results.innerHTML = "";
		
	 
		
	var mytable ='<table style="border:solid black 1px;text-align:center;width:900px;margin-top:5px;margin-left:50px;">'
	
		mytable += '<tr>';
		mytable += '<td style="width:125px;height:100px;border:inset grey 6px;font-weight:bold;color:green;">'+'Month' +' '+'</td>';
		mytable += '<td style="width:125px;height:100px;border:inset grey 6px;font-weight:bold;color:green;">'+'Mortgage Amount'+'</td>';
		mytable += '<td style="width:300px;height:100px;border:inset grey 6px;font-weight:bold;color:green;">'+'Interest'+' '+'</td>';
		mytable += '<td style="width:350px;height:100px;border:inset grey 6px;font-weight:bold;color:green;">'+'Capital + Interest'+' '+'</td>';
		mytable += '<td style="width:200px;height:100px;border:inset grey 6px;font-weight:bold;color:green;">'+'Payment'+ '' + '</td>' ;
		mytable += '<td style="width:200px;height:100px;border:inset grey 6px;font-weight:bold;color:green;">'+'Final Balance'+' '+'</td>';
		mytable +='</tr>';

		

		var full_total=0;
	
	for (i=0; i<a_interest.length; i++){

		
		full_total = full_total + (a_mortgage[i] - a_payment[i]);
				
		
		mytable += '<tr>';
		mytable += '<td style="width:125px;height:80px;border:solid black 2px;">'+[i+1]+'</td>';
		mytable += '<td style="width:125px;height:100px;border:solid black 2px;">'+ '<span style="color:blue;font-weight:bold;">'+a_mortgage[i]+'</span>'+ '</td>';
		mytable += '<td style="width:300px;height:100px;border:solid black 2px;">'+a_interest[i]+ '</td>';
		mytable += '<td style="width:350px;height:100px;border:solid black 2px;">'+a_capital_plus_interest[i] +'</td>';
		mytable += '<td style="width:200px;height:100px;border:solid black 2px;">'+a_payment[i]+' '+'</td>';	
		
		mytable += '<td style="width:200px;height:100px;border:groove red 3px;">'+full_total+'$'+'</td>' ;
		mytable +='</tr>'
		
	}
	mytable += '</table>'
		results.innerHTML += mytable;

}


			
		
/*	
function validateEmail(email){

	if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){
		return true;
	}else{
		return false
	}}

*/

<!DOCTYPE HTML>

	<html>
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>Mortage Calculator</title>
			<script type="text/javascript" src="scripts.js"></script>
			<link href="styles.css" rel="stylesheet" type="text/css" />
			
		</head>

		<body>
	

<!-- ///// FORM ///// -->
	
	<div id="entire_form">
					<form action="#" onSubmit="return returning_form()" id="mortage_form">
							<div><label>Full Name: </label><input type="text" class="fields" id="full_name" name="full_name" value="" /></div>
							<div><label>Phone Number: </label><input type="text" class="fields" id="number" name="number" value="" /></div>
							
							<div><label>Address: </label><textarea name="address" id="address"></textarea></div>							
							<div><label>Email: </label><input type="text" class="fields" id="email" name="email" value="" /></div>
							
							<div><label>Property Value: </label><input type="text" class="fields" id="property_value" name="property_value" value="" /></div>
							<div><label>Amortization Period: </label><input type="text" id="amortization_years" name="amortization_years" value="" />
								Years <span class="space"></span><input type="text" id="amortization_months" name="amortization_months" value="" />Months</div>
							
							<div><label>Interest Rate: </label><input type="text" class="short_field" id="interest_rate" name="interest_rate" value="" />% <span class="rates_width" id="space">Rates and Terms</span></div>
							<div><label>Down Payment: </label><input type="text" class="fields" id="down_payment" name="down_payment" value="" /></div>
							
							<div class="checkboxes_x" id="checkboxes_x"><span class="checkboxes">Fixed Rate</span><input type="checkbox" id="fixed_rate" name="fixed_rate" value="0" />
							<span class="checkboxes2">Variable Rate</span><input type="checkbox" id="variable_rate" name="variable_rate" value="1" />
							<span class="checkboxes3">Multi-Rate</span><input type="checkbox" id="multi_rate" name="multi_rate" value="2" /></div>
							
							<button type="submit" onClick="javascript: printdata()" id="submit_button" name="submit_button" value="Submit for calculation">Calculate</button>				

					</form>

									
<!-- // END OF FORM //-->	
			</div>			
			
			<div id="full_total">
					</div>
			<div id="results">
					</div>
			
			
			
			
			
			
			
			
		</body>
		
		
		
	</html>

Edited by Midevil Chaos, 31 July 2012 - 02:51 PM.