Doing an updated total of money values

Pockets · November 29, 2008

Hey all, I am working on a project that requires a form with money values for expenses to be input and the total to be updated using AJAX. This is the HTML code I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title></title>
</head>

<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
    // Create a function that will receive data sent from the server
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
	document.getElementById("totalsofar").innerHTML=xmlHttp.responseText;
}
else{
	alert("There was an error in the request");
}
}

var fooddollars = document.expenses.getElementbyID("fooddollars").value;
var foodcents = document.expenses.getElementbyID("foodcents").value;
var transdollars = document.expenses.getElementbyID("transdollars").value;
var transcents = document.expenses.getElementbyID("transcents").value;
var clothdollars = document.expenses.getElementbyID("clothdollars").value;
var clothcents = document.expenses.getElementbyID("clothcents").value;
var otherdollars = document.expenses.getElementbyID("otherdollars").value;
var othercents = document.expenses.getElementbyID("othercents").value;

xmlHttp.open("GET", "http://localhost/total.php?fooddollars="+fooddollars+"&foodcents="+foodcents+
"&transdollars="+transdollars+"&transcents="+transcents+"&clothdollars="+clothdollars+"&clothcents="+clothcents+
"&otherdollars="+otherdollars+"&othercents="+othercents, true);
xmlHttp.send(null);

  }
  
</script>

<form action="" name="expenses" method="GET">
<table>
<tr>
<th>Expenses</th>
<th>$</th>
<td> </td>
<th>c</th>
</tr>

<tr>
<td>Food: </td>
<td><input type="text" onkeyup="ajaxFunction();" name="fooddollars" value="00"/></td>
<td>.</td>
<td><input type="text" onkeyup="ajaxFunction();" name="foodcents" value="00"/></td>
</tr>

<tr>
<td>Transportation: </td>
<td><input type="text" onkeyup="ajaxFunction();" name="transdollars" value="00" /></td>
<td>.</td>
<td><input type="text" onkeyup="ajaxFunction();" name="transcents" value="00" /></td>
</tr>

<tr>
<td>Clothing: </td>
<td><input type="text" onkeyup="ajaxFunction();" name="clothdollars" value="00" /></td>
<td>.</td>
<td><input type="text" onkeyup="ajaxFunction();" name="clothcents" value="00" /></td>
</tr>

<tr>
<td>Other: </td>
<td><input type="text" onkeyup="ajaxFunction();" name="otherdollars" value="00" /></td>
<td>.</td>
<td><input type="text" onkeyup="ajaxFunction();" name="othercents" value="00" /></td>
</tr>

</table>
</form>

<p>Total so far:</p>
<div id="totalsofar">
</div>

</body>

</html>

Here's the PHP:

<?php
$fooddollars = (int)$_GET['fooddollars'];
$foodcents = (int)$_GET['foodcents'];
$transdollars = (int)$_GET['transdollars'];
$transcents = (int)$_GET['transcents'];
$clothdollars = (int)$_GET['clothdollars'];
$clothcents = (int)$_GET['clothcents'];
$otherdollars = (int)$_GET['otherdollars'];
$othercents = (int)$_GET['othercents'];

(int)$dollars = $fooddollars + $transdollars + $clothdollars + $otherdollars;
(int)$cents = $foodcents + $transcents + $clothcents + $othercents;

(int)$total = $dollars + ($cents / 10);

echo $total;
?>

It doesn't seem to be working, although I can see the values are being passed correctly to the PHP due to the URL. Any help?

Pockets · December 4, 2008

Okay, so I gave up on that part. Now I just want to get an XML document loaded and display it. I tried using the w3schools example here: http://www.w3schools.com/XML/tryit.asp?filename=tryxml_httprequest_js.

On w3schools, the code works fine. However, when I try to do it on my own machine, it keeps coming up with: "Problem retrieving XML data:" without the status text. Could anybody tell me what could be wrong?

xtopolis · December 5, 2008

I posted a working version of the W3C Ajax Suggest example in this thread:

http://www.phpfreaks.com/forums/index.php/topic,228046.msg1053308.html#msg1053308

It has some comments in it, mostly on just the ajax part, but might help you.

As for your script, it isn't correct. Use firefox's Error Console and it will tell you what's wrong. Specifically:

[code[document.expenses.getElementbyID("fooddollars").value;[/code](it is case sensitive, and you capitalized wrong).

A better method would be this:

function id(elem){
  return document.getElementById(elem);
}
//example
var fooddollars = id("fooddollars").value;

Sign In

Doing an updated total of money values

Recommended Posts

Pockets

Link to comment

Share on other sites

Pockets

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information