ajax display help

hanes · April 7, 2013

After modifying my webpage instead of my result popping up in php (which worked correctly) i just need help using ajax for the result to display on the html page.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="retire_calc2.js"></script>
<link rel="stylesheet" type="text/css" href="retire_calc2.css">
</head>
<body>
<title> Retirement Calculator </title>
<center>
<hr size="10" noshade>
<h1> Welcome to your Retirement Calculator </h1>
<hr size="10" noshade>
<br><br><br>

<form id="myRetCalcForm" action="retire_calc2.php" method="post">
Current Age: <input type="text" id="currentAge" name="currentAge" /><br />
<p class="errorText" id="currentAgeError"></p>

Contribution Amount: <input type="text" id="contAmount" name="contAmount"> <sele
ct name="frequencyOption"> <option value="yearly">Annually</option> <option valu
e="monthly">Monthly</option> </select>
<p class="errorText" id="contAmountError"></p>

Interest Rate (Percent):  <input type="text" id="intRate" name="intRate" /><br /
>
<p class="errorText" id="intRateError"></p>

<p class="typicalReply" id="typicalReply"></p>
</form>
<script type="text/javascript" src="retire_calc2.js"></script>
<hr/>
Result: <div id="result"></div>

</body>
</html>

function validateAge() {
    currentAgeField = document.getElementById("currentAge");
    currentAge = currentAgeField.value;
    var properAge = currentAge <  65 && currentAge > 0;
    var ageError = document.getElementById("currentAgeError");
    if(properAge) {
        currentAgeField.className = "okInput";
        ageError.innerHTML = "";
        return true;
    } else {
        currentAgeField.className = "errorInput";
        ageError.innerHTML = "The age has to be between 0 and 65.";
        return false;
    }
}
document.getElementById("currentAge").onchange = validateAge;
function validateContAmount() {
    contAmountField = document.getElementById("contAmount");
    contAmount= contAmountField.value;
    var properAmount = contAmount > 0;
    var amountError = document.getElementById("contAmountError");

    if(properAmount) {
        contAmountField.className="okInput";
        amountError.innerHTML = "";
        return true;
    } else {
        contAmountField.className = "errorInput";
        amountError.innerHTML = "Please enter an amount that is greater than 0."
;
        return false;
    }
}
document.getElementById("contAmount").onchange = validateContAmount;
function validateIntRate() {
        intRateField = document.getElementById("intRate");
        intRate = intRateField.value;
        var properIntRate = intRate > 0;
        var intRateError = document.getElementById("intRateError");

        if(properIntRate) {
                intRateField.className = "okInput";
                intRateError. innerHTML = "";
                return true;
        } else {
                intRateField.className = "errorInput";
                intRateError.innerHTML = "Please enter an interest rate greater
then 0.";
                return false;
        }
}
document.getElementById("intRate").onchange = validateIntRate;


function formatMoney(num) {
    num = num.toFixed(2);
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function parseResult() {
   if (this.readyState == 4 && this.status == 200) {
        var result = document.getElementById("result");
        result.innterText = this.responseText;
   }
}

function makeAjaxRequest() {
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = parseResult;
  ajax.open("GET", "retire_calc2.php?" + getValues());
  ajax.send(null);
}

function getValues() {
  var values = "";
  for (var i=0; i<=last; ++i) {
    if (i>0) values += "&";
    var v = document.getElementById("v" + i).value;
    values += "v[" + i + "]=" + v;
  }
  return encodeURI(values);
}

function validateAll() {
  for (var i=0; i<=last; ++i) {
    if (!validate(i)) {
      return false;
    }
  }
  makeAjaxRequest();
  return true;
}

{
    background-color: white;
}
.errorInput
{
    background-color: yellow;
}
.errorText
{
    color: red;
}

<html>
<head>
<title>Process the HTML form</title>
</head>
<body>

<?php
$age = $_POST["currentAge"];
$contribution = $_POST["contAmount"];
$rate = $_POST["intRate"];

echo '<pre>';
printf('%3s | %10s | %10s<br>', 'Age', 'Interest', 'Total Amount');
for ($y=$age+1; $y<=65; $y++) {
    $capital += $contribution;
    $interest = $capital*$rate/100;
    $capital += $interest;
    printf('%3d | %10.2f | %10.2f<br>', $y, $interest, $capital);
}

$ret = "65";
$years = 100-$ret;
$takeout = $capital/$years;

print "<br/>";
print "Final Results:";
print "<br/>";
print "<br/>";
$formattedAmount = number_format($capital, 2);
print "Total: ";
print "$";
echo $formattedAmount;
print "<br/>";
print "<br/>";
$formattedAmount = number_format($interest, 2);
print "Interest Earned: ";
print "$";
echo $formattedAmount;
print "<br/>";
print "<br/>";

print "After retirement, you will be able to take out ";
print "$";
print number_format($takeout, 2);
print " per year.";
?>

</body>
</html>

Edited April 7, 2013 by hanes

Sign In

ajax display help

Recommended Posts

hanes

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information