Firefox和IE表单未正确提交

So here is my problem. I have the following form:

<form name="picture_categories" action="scripts/catalog.php" method="post">
            <input class="visibleForm" onclick="return false;" type="image" src="images/smartphones.png"/>
            <label for="smartphones">Smartphones</label>
            <input type="hidden" name="device" value="smartphones" />
            <div class="hiddenForm" style="display:none">
                <input src="images/logos/apple-logo.png" type="image" name="manuf" value="APPLE" />
                <input src="images/logos/samsung-logo.png" type="image" name="manuf" value="Samsung" />
                <input src="images/logos/blackberry-logo.png" type="image" name="manuf" value="Blackberry" />
                <!-- <input src="images/logos/htc_logo.png" type="image" name="manuf" value="HTC" /> add to catalog first-->
                <input src="images/logos/lg-logo.png" type="image" name="manuf" value="LG" />
            </div>
    </form>

Supposedly, when I click on one of inputs[name='manuf'] it submitts its value along with hidden input ('device') value to next page. Now, the next page has following script:

<?php session_start(); ?>
<?php
    if(isset($_POST['device'])) {
        $_SESSION['device'] = $_POST['device'];
        }
    if (isset($_POST['manuf'])) {
        $_SESSION['manuf'] = $_POST['manuf'];
        }

        header ("Location: ../display_catalog.php");
?>

And the last page - display_catalog.php uses $_SESSION data to display related part of the catalog.

The code works excellent in Chrome; however:

  • In Firefox somehow ignores $_SESSION['manuf'] variable. So it sorts my catalog correctly by $_SESSION['device'], but does not want to sort it by manufacturer name.
  • In IE it completely ignores both $_SESSION variables.

What could be the issue here?.

That's because input buttons of type image carry the x,y coordinate of the button, not the value (the button is used to make an image act as a submit). Its behaviour is very browser-dependent, that's why you see it working so differently across browsers.

If you want to customize with images and have a submit button properly working you could use the <button> element and style it with CSS background property or put an img element directly:

Something like:

<button type="submit" name="manuf" value="apple"><img src="apple-image.png"></button>
<button type="submit" name="manuf" value="samsung"><img src="somsung-image.png"></button>