foobar
08-26-2008, 08:37 AM
Hello,
I have the following script and when I use a queryString to pass vars to php the onChange="ajaxFunction" does not seem to work, meaning the page does not get automatically refreshed w/ the output when values are entered into the text box.
When I don't use queryString to pass the vars to php, the php script displays errors b/c it can't read any vars.
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
//document.myForm.time.value = ajaxRequest.responseText;
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
//var loanamt = document.getElementById('loanamt').value;
//var rate = document.getElementById('rate').value;
//var term = document.getElementById('term').value;
//var queryString = "?loanamt=" + encodeURIComponent(loanamt) + "&rate=" + encodeURIComponent(rate) + "&term=" + encodeURIComponent(term);
//ajaxRequest.open("GET","calc.php" + queryString, true);
ajaxRequest.open("GET","calc.php", true);
ajaxRequest.send(null);
}
//-->
</script>
<form name='myForm'>
Loan Amt: <input type='text' onChange="ajaxFunction();" name='loanamt' id='loanamt' /> <br />
Rate: <input type='text' onChange="ajaxFunction();" name='rate' id='rate' /> <br />
Term: <select name="term" onChange="ajaxFunction();" id='term' /> <br />
<option label=180 value=180>180</option>
<option label=240 value=240>240</option>
<option label=360 value=360>360</option>
<option label=480 value=480>480</option>
<option label=io value=io>Interest Only</option>
</select> <br />
</form>
<div id='ajaxDiv'>Your results will display here </div>
</body>
</html>
calc.php:
<?php
include('financial_class.php');
$debug=1;
$loanamt= $_GET['loanamt'];
$rate= $_GET['rate'] * .01;
$term= $_GET['term'];
$f = new Financial;
$rate_a = $rate / 12;
if($debug == 1) {
echo 'Loan Amnt is ' . $loanamt . "<br>";
echo 'Rate is ' . $rate . "<br>";
echo 'Term is ' . $term . "<br>";
echo 'Rate / 12 is ' . $rate_a . "<br>";
}
if($term == io) {
$pymnt = $loanamt * $rate_a;
$pymnt = number_format($pymnt, 2, '.', '');
echo "Payment : $pymnt";
exit;
}
$pymnt = $f->PMT($rate_a,$term,-$loanamt);
$pymnt = number_format($pymnt, 2, '.', '');
echo "Payment : \$$pymnt";
?>
How can I make it so that the variables are passed to the php script properly AND the page automatically displays the output without having to manually refresh the page or use a submit button?
Thanks in advance and sorry if I didn't explain this very well.
-foobar
I have the following script and when I use a queryString to pass vars to php the onChange="ajaxFunction" does not seem to work, meaning the page does not get automatically refreshed w/ the output when values are entered into the text box.
When I don't use queryString to pass the vars to php, the php script displays errors b/c it can't read any vars.
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
//document.myForm.time.value = ajaxRequest.responseText;
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
//var loanamt = document.getElementById('loanamt').value;
//var rate = document.getElementById('rate').value;
//var term = document.getElementById('term').value;
//var queryString = "?loanamt=" + encodeURIComponent(loanamt) + "&rate=" + encodeURIComponent(rate) + "&term=" + encodeURIComponent(term);
//ajaxRequest.open("GET","calc.php" + queryString, true);
ajaxRequest.open("GET","calc.php", true);
ajaxRequest.send(null);
}
//-->
</script>
<form name='myForm'>
Loan Amt: <input type='text' onChange="ajaxFunction();" name='loanamt' id='loanamt' /> <br />
Rate: <input type='text' onChange="ajaxFunction();" name='rate' id='rate' /> <br />
Term: <select name="term" onChange="ajaxFunction();" id='term' /> <br />
<option label=180 value=180>180</option>
<option label=240 value=240>240</option>
<option label=360 value=360>360</option>
<option label=480 value=480>480</option>
<option label=io value=io>Interest Only</option>
</select> <br />
</form>
<div id='ajaxDiv'>Your results will display here </div>
</body>
</html>
calc.php:
<?php
include('financial_class.php');
$debug=1;
$loanamt= $_GET['loanamt'];
$rate= $_GET['rate'] * .01;
$term= $_GET['term'];
$f = new Financial;
$rate_a = $rate / 12;
if($debug == 1) {
echo 'Loan Amnt is ' . $loanamt . "<br>";
echo 'Rate is ' . $rate . "<br>";
echo 'Term is ' . $term . "<br>";
echo 'Rate / 12 is ' . $rate_a . "<br>";
}
if($term == io) {
$pymnt = $loanamt * $rate_a;
$pymnt = number_format($pymnt, 2, '.', '');
echo "Payment : $pymnt";
exit;
}
$pymnt = $f->PMT($rate_a,$term,-$loanamt);
$pymnt = number_format($pymnt, 2, '.', '');
echo "Payment : \$$pymnt";
?>
How can I make it so that the variables are passed to the php script properly AND the page automatically displays the output without having to manually refresh the page or use a submit button?
Thanks in advance and sorry if I didn't explain this very well.
-foobar