PHP $_POST index undefined in Firefox and IE, works in Chrome

Question

I have two files, a main page scada.php and a sub-page site.php. Scada.php contains links like this:

<FORM action="site.php" method="post">
<li><td class="normal"><input type="image" name="sitename" 
value="Dublin" src="radiotower.jpg" alt="Dublin" title="Dublin"/>
Dublin
</td></li>
</form>

Site.php accesses the name of the site here:

<?php
 $site = $_POST["sitename"];
 echo "<title id='title'>".$site."</title>";
?>

It then retrieves it with JS to show on the page and use in a database query:

<script>
var site = document.getElementById("title").innerHTML;
document.getElementById("alert").innerHTML = "<h2>"+site+"</h2>";
</script>

I checked the string length of sitename to make sure it's only including the characters of the name ("Dublin") and not the HTML title tags, and the length is correct at 6 characters.

This works fine in Chrome; everything smooth, runs as expected. In IE and Firefox, it issues an error that says "sitename" is an undefined index. I ran a vardump on the globals in site.php, and the result is that Chrome turns up 3 variables (sitename_x, sitename_y, and sitename). Firefox and IE only turn up two (sitename_x and sitename_y) and sitename is missing.

I've searched for $_POST problems that only occur in Firefox and IE and haven't found anything useful. Someone mentioned a submit button not getting pressed, but that's definitely not the issue here because the ONLY way to interact with the page is to press the input button. Where on earth is the variable sitename getting lost to??

EDIT: I was a bit unclear initially. The form contains multiple inputs, so this is more accurate:

<FORM action="site.php" method="post">
<li><td class="normal"><input type="image" name="sitename" value="Dublin"
src="radiotower.jpg" alt="Dublin" title="Dublin"/>
Dublin
</td></li>
<li><td class="normal"><input type="image" name="sitename" value="Temple" 
src="radiotower.jpg" alt="Temple" title="Temple"/>
Temple
</td></li>
</FORM>

Answer 1

An image form input should only return the x and y coordinates on which it was clicked. I would say Chrome is in the wrong here and not following standards by returning the name and value pair as well as the coordinates

Make a separate hidden input for sitename and you'll be good to go, like:

<form>
  <input type="hidden" name="sitename" value="Dublin" />
  <input type="image" name="siteimg" src="radiotower.jpg" />
</form>

EDIT: If using jQuery is not a problem, I think you'd be better off with an approach like this

<form action="" method="post" id="form">
    <div><img src="radiotower.jpg" alt="Dublin" title="Dublin" class="location" /></div>
    <div><img src="radiotower.jpg" alt="Temple" title="Temple" class="location" /></div>
    <div><input type="hidden" name="sitename" id="sitename" value="" /></div>
</form>

<script>
$(function() {
    $('.location').click(function() {
        var site = $(this).attr('alt');
        $('#sitename').val(site);

        $('#form').submit();
    });
});
</script>

EDIT 2: Add this to your HTML to include jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>