I need another set of eyes, as I'm going backwards at this point. Have php/javascript to autoupdate a 'shopping cart' as the user inputs data. However, there seems to be a conflict between codes. This is my first time implementing AJAX methods. The table that you can see in the HTML needs to allow for user input, then uses the JS to communicate with the PHP. However, at this juncture, that's not happening.
The user should see a value change 'onchange' as you can see.
Here's enough HTML to see user input/return:
<html>
<head>
<script src="PurchaseTableClientSide.js"></script>
</head>
<body>
<form>
<table border="1">
<tr>
<th>Item Name<br></th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>CD 1<br></td>
<td>$12.50</td>
<td><input type="number" id="quantityCD1" step="1" min="0" onchange="calculatePrice()"></td>
<td id="totalCD1">0.00</td>
</tr>Here's the PHP:
<?php
error_reporting(0);
//variable to store the result.
$xml = new SimpleXMLElement("<response/>");
if(isset($_GET['qCD1']) && isset($_GET['qCD2']) && isset($_GET['qMVA'])) {
$totalCD1 = 12.50 * $_GET['qCD1'];
$totalCD2 = 12.95 * $_GET['qCD2'];
$totalMVA = 19.95 * $_GET['qMVA'];
$subtotal = $totalCD1 + $totalCD2 + $totalMVA;
$shipping = $subtotal * 0.5;
$total = $subtotal + $shipping;
//http://php.net/manual/en/simplexmlelement.addchild.php
$xml->addChild('totalCD1', $totalCD1);
$xml->addChild('totalCD2', $totalCD2);
$xml->addChild('totalMVA', $totalMVA);
$xml->addChild('subtotal', $subtotal);
$xml->addChild('shipping', $shipping);
$xml->addChild('total', $total);
$xml->addChild('error', False);
} else {
//Inform the client that there was an error.
//Currently not used, but sounds like a cool idea.
$xml->addChild('error', True);
}
//Define the content as being XML response
header("Content-Type:text/xml");
//Send it back to the user
echo $xml->asXML();
?>And here is the javascript:
//Global variable for the AJAX connection.
var xmlHttp;
function calculatePrice()
{
var quantityCD1 = document.getElementById("quantityCD1").value;
var quantityCD2 = document.getElementById("quantityCD2").value;
var quantityMovieA = document.getElementById("quantityMovieA").value;
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="purchaseTable.php";
url=url+"?qCD1="+quantityCD1;
url=url+"&qCD2="+quantityCD2;
url=url+"&qMVA="+quantityMovieA;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
//Check to make sure the response is good.
if (xmlHttp.readyState==4) {
//Get an XML parser out of it.
var xmlDoc = xmlHttp.responseXML.documentElement;
//Pull the data from the XML response and put it in the HTML.
//http://www.ajaxtutorial.net/index.php/2006/02/28/ajax-with-php-using-responsexml/
document.getElementById("totalCD1").innerHTML = xmlDoc.getElementsByTagName('totalCD1')[0].firstChild.nodeValue;
document.getElementById("totalCD2").innerHTML = xmlDoc.getElementsByTagName('totalCD2')[0].firstChild.nodeValue;
document.getElementById("totalMVA").innerHTML = xmlDoc.getElementsByTagName('totalMVA')[0].firstChild.nodeValue;
document.getElementById("shipping").innerHTML = xmlDoc.getElementsByTagName('shipping')[0].firstChild.nodeValue;
document.getElementById("total").innerHTML = xmlDoc.getElementsByTagName('total')[0].firstChild.nodeValue;
}
}
//Connect to the PHP server.
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}</div>
