update checkout invoice with AJAX

[samoht]

hello all,

I am building an online candy store. After loading up a cart the user can proceed to check out - and if the user has an account they will be directed to the confrim order page that shows the order + ship and bill info and has a submit button at the bottom.

Now, my boss wants to have a coupon entry on the same page that will update the order invoice without refreshing or leaving the page. (sounds like AJAX to me) So I build a button above the invoice that goes to a js. function and passes the coupon number but I am very very new at AJAX and am not sure how to update my HTML table (ie. the Invoice) or If I have the correct coding for the AJAX.

Here is what I have so far:

<?php
//my head info
// ***AJAX ***
function createXMLHttpRequest() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
// not sure about this
function addcoupon(promo_code){
var MAXIMUM_WAITING_TIME = 20000; // 20 seconds
var xhReq = createXMLHttpRequest();
xhReq.open("GET", "addcoupon.php?CouponCode=" + escape(coupon_code), true);
xhReq.setRequestHeader("If-Modified-Since", "Mon, 1 Jan 2007 00:00:00 GMT");
var requestTimer = setTimeout(function() { // Handle timeout situation, e.g. Retry or inform user.
document.getElementById('OrderItems').innerHTML = "<span class='errors'>Oops! We are experiencing heavy traffic, please try again.</span>";
xhReq.abort();
}, MAXIMUM_WAITING_TIME);

xhReq.onreadystatechange = function() {
if (xhReq.readyState != 4) { return; }
clearTimeout(requestTimer);
if (xhReq.status != 200) { return; }
var results = xhReq.responseText;
switch (results) {
case('1'): discount = results[0];
promoName = results[1];
document.getElementById('promo').innerHTML = discount;
document.getElementById('promoName').innerHTML = promoName;
break;
case('0'): alert('Coupon is inactive or invalid.');
break;
default: alert("An error occurred, please try again.");
}

};
xhReq.send(null);
}

}
function coupon_prompt() {

var message = "Please Enter Your Code";
var promo_code = "6 digit code goes here";

var return_value = prompt(message,promo_code);

// TEST TO SEE IF NULL OR STRING RETURNED
if (return_value != null) {
// 'OK' SCRIPT GOES HERE
addcoupon(promo_code);
} else {
// 'CANCEL' SCRIPT GOES HERE
}
}

?>
...
// my button
<a class="coup" style="cursor:pointer" onClick="coupon_prompt()">Have Coupon?</a>
...
<?php

//***********this is the invioce HTML table ********
$numItem = count($cartContent);
$subTotal = 0;
for ($i = 0; $i < $numItem; $i++) {
extract($cartContent[$i]);
$subTotal += $PriceSell * $qty;
?>
<tr class="labelcell">
<td class="content">
<?php echo "$qty x $Name"; ?>
</td>
<td align="right">
<?php echo displayAmount($PriceSell); ?>
</td>
<td align="right">
<?php echo displayAmount($qty * $PriceSell); ?>
</td>
</tr><?php
}
if(isset($promo)){//this is really just a guess at this point??
?>
<tr class="labelcell">
<td class="content">
<?php echo $promoName; ?>
</td>
<td align="right">&nbsp;</td>
<td align="right">
<?php echo $promoAmount; ?>
</td>
</tr><?php
}
?>
<tr class="labelcell">
<td colspan="2" align="right">
Sub-total
</td>
<td align="right">
<?php echo displayAmount($subTotal); ?>
</td>
</tr>
<tr class="labelcell">
<td colspan="2" align="right">
Shipping
</td>
<td align="right">
<?php echo displayAmount($shopConfig['shippingCost']); ?>
</td>
</tr>
<tr class="labelcell">
<td colspan="2" align="right">
Total
</td>
<td align="right">
<?php echo displayAmount($shopConfig['shippingCost'] + $subTotal); ?>
</td>
</tr>
</table>

any ideas on what I'm missing - or help in th right direction?

Thanks,