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>

I don't think these have ever included the value, an image form input can't be relied on in that way. Make life easy for yourself, add into your form and use that variable ($_POST['site']) :) — niaccurshi, Feb 28 '13 at 16:01
Agreed with niaccurshi - Chrome's behavior actually doesn't follow standards. See [this post](http://stackoverflow.com/questions/5681837/cant-find-an-input-type-image-value-in-post) — Kristen Waite, Feb 28 '13 at 16:03

Andy · Accepted Answer · 2013-02-28T16:52:46.990

2

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>

edited Feb 28 '13 at 16:52

answered Feb 28 '13 at 16:05

Andy

4,901
5
35
57

That works for a single item as you have, but what I've got on my page is a list of about 18 sites. Do I need to create a separate form for each one? That seems a bit unwieldy. – Katherine Skipper Feb 28 '13 at 16:16
Can you explain what it is exactly you're trying to achieve? I may be able to advise a simpler solution. EDIT: Just saw your edit, bare with me and I'll edit my answer – Andy Feb 28 '13 at 16:28
Scada.php is basically a grid of images with associated site names. When a user clicks on one, it brings them to site.php, which displays data gathered from that site (site status as on or off, etc. etc.). Eventually the main grid will also talk to the database, so that it shows site issues "live" (as in, it will poll for new data and change the color of a given site's display box to orange for a concern or red for a problem). I can remove the radiotower.jpg if it's an issue; I just think it makes the grid look neater and less like a wall-o-text. – Katherine Skipper Feb 28 '13 at 16:31
Okay, that does look more practical. I have no experience with JQuery, so two newb questions: do I need the JQuery library for this to run? And how do I retrieve the #sitename variable in site.php? Thanks so much for your help! – Katherine Skipper Feb 28 '13 at 16:46
You'll need to include the jQuery library yes, it's good practice to get this from a CDN so your users can use a cached version if its available, I've included the snippet you'll need to add your HTML file in my answer. The sitename variable will be set in the $_POST array because the hidden input value is being filled before the form is submitted :) – Andy Feb 28 '13 at 16:51
No worries. Care to accept the answer if you think it's good enough? – Andy Feb 28 '13 at 17:13

score 0 · Answer 2 · answered Feb 28 '13 at 16:05

0

Surly the input type should be text if the value expected is "Dublin" -- Chrome might be cleaver enough to recognise that the input is actually text whereas FF and IE might be more gullible, and not even try to set the variable.

answered Feb 28 '13 at 16:05

Izzy

1,764
1
17
31

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

2 Answers2