I am having problems with this page [see code below], and its cross browser compatibility. It works fine on both Safari and Chrome but not on IE and Firefox. I was wondering if it was something to do with the input tag.
The page can be viewed at http://www.arcomis.com/order/basket. The features that don’t work are the refresh/update number of copies, and remove buttons, and the Buy with Google button. (To see these features you may have to add something to the basket, best done with this page: http://www.arcomis.com/catalogue/view/id/4852; click order on RHS).
If there is a better way for me to display the code let me know, and if you need login details let me know! Thanks, i’m a bit of a newbie to all this.
login with exttest and password: testing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:image" content="http://www.arcomis.com/img/logo_top.gif"/>
<title>Arcomis : Your Basket</title>
<link href="/css/main.css" media="screen,projection,print" rel="stylesheet" type="text/css" />
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
</head>
<body class="tundra">
<div id="headBar">
<div id="top_container">
<div id="navigation_top">
<div id="login">
<img src="/img/user.gif" width="13" height="27">
<span id="user_name">sarahgupta</span>
<a href="/account">manage account</a>
<a href="/login/logout">logout</a>
</div>
<img src="/img/tabs/u_home.gif" width="93px" height="27px" class="nav_icon_u_hidden"/>
<img src="/img/tabs/u_commissioning.gif" width="153px" height="27px" class="nav_icon_u_hidden"/>
<a href="/publishing"><img src="/img/tabs/u_publishing.gif" width="104px" height="27px" class="nav_icon_u"/></a>
<img src="/img/tabs/u_news.gif" width="93px" height="27px" class="nav_icon_u_hidden"/>
<img src="/img/tabs/u_about.gif" width="93px" height="27px" class="nav_icon_u_hidden"/>
</div>
<div id="top_rightcol"><a href="/"><img src="/img/logo_top.gif" width="128px" height="94px"/></a></div>
</div>
</div>
<div id="mid_container">
<div id="navigation">
<a href="/ "><img src="/img/tabs/d_home.gif" width="91px" height="33px" class="nav_icon_d"/></a>
<a href="/commissioning"><img src="/img/tabs/d_commissioning.gif" width="151px" height="33px" class="nav_icon_d"/></a>
<a href="/publishing"><img src="/img/tabs/d_publishing.gif" width="102px" height="33px" class="nav_icon_d_hidden"/></a>
<a href="/news"><img src="/img/tabs/d_news.gif" width="91px" height="33px" class="nav_icon_d"/></a>
<a href="/about"><img src="/img/tabs/d_about.gif" width="91px" height="33px" class="nav_icon_d"/></a>
</div>
<div id="mid_rightcol"><a href="/"><img src="/img/logo_bottom.gif" width="130px" height="35px"/></a></div>
</div>
<div id="main_container">
<div id="wrapper">
<div id="content">
<h2>Your basket items</h2>
The following items are in your basket.<br/><br/>
<form action=" /order/basket" method="POST">
<table class="dataTable">
<thead>
<tr>
<td width="55%">Item</td> <td width="10%">Type</td><td width="10%" align="center">Price/copy</td><td width="10%">Copies</td><td width="15%">Price</td><td width="10%">Remove</td>
</tr>
</thead>
<tbody>
<tr class="alt2" valign="middle">
<td>
The Arcomis Flute Album
</td>
<td align="center">
Download
</td>
<td align="center">
£2.79
</td>
<td align="center">
<input type="text" name="copies_0" value="3" style="width:20px;font-size:8pt;border:0;"/><input type="image" src="/img/buttons/update.gif" alt="update number of copies/licenses" title="update number of copies/licenses" name="update" value="0"/>
</td>
<td align="right">
£8.37
</td>
<td align="center"><input type="image" src="/img/buttons/remove.gif" alt="remove item from basket" title="remove item from basket" name="remove" value="0"/>
</td>
</tr>
<tr class="alt1" valign="middle">
<td>
Ghost Dances
</td>
<td align="center">
Download
</td>
<td align="center">
£4.00
</td>
<td align="center">
<input type="text" name="copies_1" value="1" style="width:20px;font-size:8pt;border:0;"/><input type="image" src="/img/buttons/update.gif" alt="update number of copies/licenses" title="update number of copies/licenses" name="update" value="1"/>
</td>
<td align="right">
£4.00
</td>
<td align="center"><input type="image" src="/img/buttons/remove.gif" alt="remove item from basket" title="remove item from basket" name="remove" value="1"/>
</td>
</tr>
</tbody>
<tr class="postage">
<td colspan="2" style="background:#ffffff"></td>
<td colspan="2"><a href="/order/delivery">Postage</a></td>
<td align="right">£0.00</td>
<td style="background:#ffffff"></td>
</tr>
<tr class="total">
<td colspan="2" style="background:#ffffff"></td>
<td colspan="2">TOTAL</td>
<td align="right">£12.37</td>
<td style="background:#ffffff"></td>
</tr>
</table>
<br/>
<br/>
If this completes your order please proceed to the payments area which is operated by Google Checkout on behalf of Arcomis.
<br/>
<br/>
<a href="/catalogue" class="option" style="background: url(/img/icons/explore.gif) left center no-repeat">Return to catalogue</a>
<input type="image" src="https://checkout.google.com/buttons/checkout.gif?merchant_id=759193895597719&w=168&h=44&style=white&variant=text&loc=en_GB" alt="checkout" name="checkout" value="checkout"/>
</form>
<br/>
<br/>
<b>N.B.</b> We have recently become aware that a web browser upgrade has been causing problems with the purchasing and downloading of scores from the Arcomis catalogue. If a problem occurs please <a href="mailto:info@arcomis.com">contact us</a> directly to resolve the issue.
</div>
<div id="main_rightcol">
</div>
<div id="cleardiv"></div>
</div>
<div id="footer1">
<a href="/">Home</a>
<a href="/commissioning">Commissioning</a>
<a href="/publishing">Publishing</a>
<a href="/news">News</a>
<a href="/about">About us</a>
<a href="/about/terms">Terms of Use</a>
</div>
<div id="footer2"><p>Arcomis Ltd - Company Number: 6436170 - Registered Address: CBTC, Senghenydd Road, Cardiff, CF24 4AY</p></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :
"http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost +
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8254016-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</div>
</body>
</html>
PHP is:
<? $this->headTitle('Your Basket') ?>
<h2>Your basket items</h2>
The following items are in your basket.<br/>
<br/>
<?php if($this->basket->isEmpty()){?> Your basket is empty. <?php } else {?>
<form action=" <?= $this->url(array('controller' => 'order','action' => 'basket'))?>" method="POST">
<table class="dataTable">
<thead>
<tr>
<td width="55%">Item</td>
<td width="10%">Type</td>
<td width="10%" align="center">Price/copy</td>
<td width="10%">Copies</td>
<td width="15%">Price</td>
<td width="10%">Remove</td>
</tr>
</thead>
<tbody>
<?php
$counter = 0; foreach($this->basket->items as $key => $item)
{
$counter++;
$rowClass = ( $counter % 2 == 0 ) ? ('alt1') : ('alt2'); ?>
<tr class="<?=$rowClass ?>" valign="middle">
<td>
<?=$item->pieceTitle?>
</td>
<td align="center">
<? if($item->isPrinted){?> Printed <?} else {?> Download <?}?>
</td>
<td align="center"> £<?=number_format($item->piecePrice,2)?>
</td>
<td align="center">
<input type="text" name="copies_<?=$key//$item->pieceID?>" value="<?=$item->copies?>" style="width:20px;font-size:8pt;border:0;"/>
<input type="image" src="<?
=$this->getBase()?>/img/buttons/update.gif" alt="update number of copies/licenses" title="update number of copies/licenses" name="update" value="<?=$key//$item->pieceID?>"/>
</td>
<td align="right"> £<?=number_format($item->getTotalPieceCost(),2)?>
</td>
<td align="center">
<input type="image" src="<?=$this->getBase()?>/img/buttons/remove.gif" alt="remove item from basket" title="remove item from basket" name="remove"
value="<?=$key//$item->pieceID?>"/>
</td>
</tr>
<?php
} ?>
</tbody>
<tr class="postage">
<td colspan="2" style="background:#ffffff">
</td>
<td colspan="2">
<a href="<?= $this->url(array('controller' => 'order','action' => 'delivery'))?>">Postage</a>
</td>
<td align="right">£<?=number_format($this->basket->getTotalPPCost(),2)?>
</td>
<td style="background:#ffffff">
</td>
</tr>
<tr class="total">
<td colspan="2" style="background:#ffffff">
</td>
<td colspan="2">TOTAL</td>
<td align="right">£<?=number_format($this->basket->getTotalCost(),2)?>
</td>
<td style="background:#ffffff">
</td>
</tr>
</table>
<br/>
<br/> If this completes your order please proceed to the payments area which is operated by Google Checkout on behalf of Arcomis. <br/>
<br/>
<a href="<?= $this->url(array('controller' => 'catalogue'),null, true)?>" class="option" style="background: url(<?=$this->getBase()?>/img/icons/explore.gif) left center no-repeat">Return to catalogue</a>
<input type="image" src="https://checkout.google.com/buttons/checkout.gif?merchant_id=759193895597719&w=168&h=44&style=white&variant=text&loc=en_GB" alt="checkout" name="checkout" value="checkout"/>
</form>
<?php
} ?>
<br/>
<br/>
<b>N.B.</b> We have recently become aware that a web browser upgrade has been causing problems with the purchasing and downloading of scores from the Arcomis catalogue. If a problem
occurs please <a href="mailto:info@arcomis.com">contact us</a> directly to resolve the issue.
Try the page in Firefox, Chrome, and IE. Watch and compare the POST requests in an HTTP inspector tool like Fiddler2.
Chrome sent
remove=0andupdate=0when clicking the remove/update buttons, but Firefox did not. Your processing code is probably looking for$_POST['remove']or$_POST['update'].See HTML Input (type=image) not working on Firefox 4 for a possible solution.