Hi,
I am very new to javascript and ajax. I am trying to make a page where you can choose different options for a package and the price will be automatically updated, similar to the way you can customize a computer at apple's website
here.
I modified a script I got from a book and got it to work in Firefox but it gives me this error in ie7:
Line: 10
Char: 1
Error: Object expected
Code:0
Here is the a link to it
http://tophermorrison.com/form/
Here is the html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Choice Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ajax_javascript.js"></script>
</head>
<body onload="process('design', 50, 0);">
<div id="container">
<div> Price </div>
<div id="price">750</div>
</div>
<br />
<br />
<span class="content_heading">Choice Box 1 </span>
<div class="pick_box"> Choose an optinon below
<div class="choice_box">
<div id="design"></div>
</div>
</div>
</body>
</html>
here is the javascript
Code:
// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function process(category, sprice, math)
{
price =document.getElementById("price").innerHTML;
price = parseInt(price);
// proceed only if the xmlHttp object isn't busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// execute the quickstart.php page from the server
xmlHttp.open("GET", "ajax_php.php?math=" + math + "&price=" + price + "&sprice=" + sprice + "&category=" + category, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
else
// if the connection is busy, try again after one second
setTimeout('process()', 1000);
}
// executed automatically when a message is received from the server
function handleServerResponse()
{
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200)
{
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML structure
xmlDocumentElement = xmlResponse.documentElement;
var html = '';
count = xmlDocumentElement.childNodes[2].firstChild.data;
category = xmlDocumentElement.childNodes[1].firstChild.data;
price = xmlDocumentElement.childNodes[0].firstChild.data;
count = parseInt(count) + 3;
i = 3;
e = 3;
html = 'default';
while( i < count){
count = count - 1;
class = xmlDocumentElement.childNodes[e].getAttribute("class");
iname = xmlDocumentElement.childNodes[e].getAttribute("iname");
iprice = xmlDocumentElement.childNodes[e].getAttribute("iprice");
math = xmlDocumentElement.childNodes[e].getAttribute("math");
checked = xmlDocumentElement.childNodes[e].firstChild.data;
message = xmlDocumentElement.childNodes[e].getAttribute("message");
e = e + 1;
if(html == 'default'){
html = '<div class="' + class + '" onclick="process(' + "'" + iname + "'" + ',' + iprice + ',' + math + ');"><input class="radio" name="' + iname + '" type="radio" value="' + iprice + '" ' + checked + '/>' + message + '</div>';
}else{
html = html + '<div class="' + class + '" onclick="process(' + "'" + iname + "' " + ', ' + iprice + ', ' + math + ');"><input class="radio" name="' + iname + '" type="radio" value="' + iprice + '" ' + checked + '/>' + message + '</div>';
}
document.getElementById(category).innerHTML = html;
}
document.getElementById("price").innerHTML = price;
}
// a HTTP status different than 200 signals an error
else
{
alert("There was a problem accessing the server: " + xmlHttp.statusText);
}
}
}
and here is the php
PHP Code:
<?PHP
//Generate XML output
header('Content-Type: text/xml');
//generate xml header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
$category = $_GET['category'];
$selected_price = $_GET['sprice'];
$math = $_GET['math'];
$price = $_GET['price'];
$new_price = $price + $math ;
$design = array(
array(
'name' => 'design',
'message' => 'Select option 1',
'price' => 50,
),
array(
'name' => 'design',
'message' => 'Select option 2',
'price' => 100,
),
array(
'name' => 'design',
'message' => 'Select option 3',
'price' => 150,
),
array(
'name' => 'design',
'message' => 'Select option 4',
'price' => 200,
),
array(
'name' => 'design',
'message' => 'Select option 5',
'price' => 250,
),
);
function getdata($price, $iname, $iprice, $desc){
if($price > $iprice){
$diff = $price - $iprice;
$message = $desc . ' [Subtract $' . $diff . '.00]';
$math = '-' . $diff;
$class = 'deselected';
$checked = 'alt=""';
}else if($price < $iprice){
$diff = $iprice - $price;
$message = $desc . ' [Add $' . $diff . '.00]';
$math = $diff;
$class = 'deselected';
$checked = 'alt=""';
}else{
$message = $desc . ' [Included in price]';
$math = 0;
$class = 'selected';
$checked = 'checked="checked"';
}
echo '<option iname="', $iname, '" math="', $math, '" class="', $class, '" message="', $message, '" iprice="', $iprice, '">', $checked, '</option>' ;
}
if($category == 'design'){
$total = count($design);
echo '<elements><price>', $new_price, '</price><category>', $category, '</category><count>', $total, '</count>';
for($i=0; $i<$total; $i++) {
$name_value = $design[$i]['name'];
$price_value = $design[$i]['price'];
$design_value = $design[$i]['message'];
getdata($selected_price, $name_value, $price_value, $design_value);
}
echo '</elements>';
}
?>
Can anyone help me?