Hi,
Here is the whole code.
<legend id="start">My Savings Calculator</legend>
<table class="ccalc_table">
<form method="post" action="" onsubmit="return validateInvCalc(this);">
<tr>
<td>How much do you currently have saved? :</td>
<td><input name="invested_amount" type="number" pattern="\d*" placeholder="An amount" size="9" value="<?php echo @$_POST['invested_amount']?>" /> ></td>
</tr>
<tr>
<td>How much do you want to save each year? </td>
<td><input name="contribution" type="number" pattern="\d*" placeholder="An optional amount" size="9" value="<?php echo empty($_POST['contribution'])?0:$_POST['contribution']?>" /></td>
</tr>
<tr>
<td>What Interest Rate do you receive (%)?</td>
<td align="left" valign="top"><input name="ROI" type="number" pattern="\d*" placeholder="An interest rate"size="9" value="<?php echo @$_POST['ROI']?>" /></td>
</tr>
<tr>
<td>How many years are you saving for?</td>
<td align="left" valign="top"><input name="period" type="number" pattern="\d*" placeholder="How many years?" size="9" value="<?php echo @$_POST['period']?>" /></td>
</tr>
<tr>
<td>Preferred Currency?</td>
<td align="left">
<select name="currency" value=" <?php echo @$_POST['currency']?>" >
<option value="">Select...</option>
<option value="">None</option>
<option value=">£">£</option>
<option value="$" >$</option>
<option value="€">&euro</option>
<option value="¥">¥</option>
</select>
</td>
<tr>
<td> </td>
<td><input type="submit" value="Calculate" onclick="window.location='#results';"/></td>
</tr>
<tr>
<td><input type="hidden" name="ok" value="1" /></td>
<td> </td>
</tr>
</form>
</table>
</fieldset>
<fieldset>
<legend id="results">My Results</legend>
<script src="/Templates/hootLoot/javascript/showHide.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.show_hide').showHide({
speed: 500, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'Show me',// the button text to show when a div is closed
hideText: 'Hide!' // the button text to show when a div is open
});
});
</script>
<div class="grid-container">
<div class="hide-on-mobile grid-100 grid-parent">
<p>Would you like to see the calculations? <a href="#" class="show_hide" rel="#slidingDiv"> Show Me</span></p> </a>
<div id="slidingDiv" style="display:none";>
<?php if(!empty($_POST['ok'])):
$current_year=date("Y");
$total_contribution=0;
// balance before adding anything
$balance=$_POST['invested_amount'];
$new_balance=$balance;
$total_interest=0;
$total_cash=0;
$roi=0;?>
<p> </p><table id="calcs_table" class='ccalc_table ccalc_result'>
<tr><th>Year</th><th>Balance at <br>the start</th><th>Money <br>Added</th><th>Interest <br>Earned</th><th>Balance at <br>the end</th>
<th>% Total <br>Return</th></tr><tbody>
<?php for($i=0;$i<$_POST['period'];$i++):
$year=$current_year+$i;
// add contribution
$total_contribution+=$_POST['contribution'];
// interest in $ for the period
$interest=$new_balance*($_POST['ROI']/100);
$total_interest+=$interest;
// now new balance
$new_balance=$new_balance+$interest-$cash+$_POST['contribution'];;
$old_balance=$new_balance-$interest-$cash-$_POST['contribution'];;
$principal=$new_balance;
// total return at this point
$roi=round(((($new_balance+$total_cash)/($balance+$total_contribution))-1)*100);
for ($i = 0; $i <= $_POST['period']; $i++) {
echo "This count is: $i";
echo "['" . $year . "'," . $principal . "],<br>";
}
?>
<!--Google Chart - https://developers.google.com/chart/interactive/docs/gallery/linechart-->
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Balance');
// for($i=0;$i<$_POST['period'];$i++){
// data.addRows([
// echo "['" . $year . "'," . $balance . "],";
// ]);
// }
for($i = 0; $i <= <?php echo @$_POST['period']?> ; $i++) {
data.addRows([
<?php
echo "['" . $year . "'," . $balance . "],";
?>
]);
}
var options = {
title: 'My Savings',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
<!-- Create Table output-->
<tr><td><?php echo $year?></td>
<td><?php echo @$_POST['currency']?><?php echo number_format($old_balance)?></td>
<td><?php echo @$_POST['currency']?><?php echo number_format($_POST['contribution'])?></td>
<td><?php echo @$_POST['currency']?><?php echo number_format($interest)?></td>
<td><?php echo @$_POST['currency']?><?php echo number_format($new_balance)?></td>
<td><?php echo number_format($roi)?>%</td></tr>
<?php endfor;?>
</tbody><tr><th>Total:</td><th></td>
<th><?php echo @$_POST['currency']?><?php echo number_format($total_contribution)?></th>
<th><?php echo @$_POST['currency']?><?php echo number_format($total_interest)?></th>
<th><?php echo @$_POST['currency']?><?php echo number_format($new_balance);?></th>
<th><?php echo number_format($roi)?>%</th></tr>
</table>
<?php endif; ?>
<!-- Error messages-->
<script type="text/javascript">
function validateInvCalc(frm)
{
if(frm.invested_amount.value=="" || isNaN(frm.invested_amount.value))
{
alert("Please enter the amount of savings you currently have");
frm.invested_amount.focus();
return false;
}
if(frm.period.value=="")
{
alert("Please select number of years");
frm.period.focus();
return false;
}
if(frm.ROI.value=="" || isNaN(frm.ROI.value))
{
alert("Please enter the interest rate you will receive on your investment");
frm.ROI.focus();
return false;
}
}
</script>
</div>
</div>
</div>
<br>
<!-- Results table-->
<table>
<th>Your Results</th> <th> </th><th> </th>
<tr>
<td>You started off with: </td>
<td align="left"><?php echo @$_POST['currency']?><?php echo number_format($balance)?> </td>
<td> </td>
</tr>
<tr>
<td>You saved: </td>
<td align="left"><?php echo @$_POST['currency']?><?php echo number_format($total_contribution)?> </td>
<td> </td>
</tr>
<tr>
<td>You have earned interest of: </td>
<td align="left"><?php echo @$_POST['currency']?><?php echo number_format($total_interest)?> </td>
<td> </td>
</tr>
<tr>
<td>At the end you will have: </td>
<td align="left"><?php echo @$_POST['currency']?><?php echo number_format($new_balance)?> </td>
<td> </td>
</tr>
</table>
<br>
<br>
<div class="grid-container">
<div class="grid-33 tablet-grid-33 grid-parent"> </div>
<div class="grid-66 tablet-grid-66 grid-parent">
<input type="submit" value="Start Again" onclick="window.location='#start';"/>
</div>
</div>
<!-- Chart Output-->
<div class="grid-container">
<div class="grid-100 grid-parent">
<div id="curve_chart" style="width: 100%; height: auto"></div>
</div>
</div>
</fieldset>
