Firefox和IE表单未正确提交

Question

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?.

Answer 1

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>