PDA

View Full Version : can't pass javascript vars to php



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

foobar
08-26-2008, 06:30 PM
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

Please disregard. I found the typos with the loanamt var. In some places I had 'loanamnt' when it should have been 'loanamt' and that was the cause of the problem. Typical noob problem.

Twey
08-27-2008, 05:01 PM
alert("Your browser broke!");Well, no, it probably just doesn't support XHR. How will you deal with that? You need a fallback.

Additionally, http://dynamicdrive.com/forums/showpost.php?p=158839&postcount=1 — 1.1, effectively 1.2, 1.3, 1.4, 3.1, 5.2, 5.3, 5.5.