button-tag in MSIE

handgestrickt had to construct a very complex form. it was necessary to transfer several named actions when the user clicks a button. additionally these buttons were embedded in one form-tag.

according to the HTML-specs you can use the following construct:

<form action="foo.php" method="post">
    <input type="checkbox" name="batch[]" value="1" /> value 1<br />
    <input type="checkbox" name="batch[]" value="2" /> value 2<br />
    <input type="checkbox" name="batch[]" value="3" /> value 3<br />
    <input type="checkbox" name="batch[]" value="4" /> value 4<br />
    ...
    <button type="submit" name="action" value="edit">Edit</button>
    <button type="submit" name="action" value="copy">Copy</button>
    <button type="submit" name="action" value="delete">Delete</button>
</form>

in all standard compliant browsers, the name-value-pair gets transfered as expected. all Internet Explorers do the following: they pass all buttons at once, with the name as key and the inner HTML of the button-tags as the value.

you can start to fiddle with JavaScript now. a lot of solutions delete all button-tags and take the value of the clicked element as the value of a hidden form field. beside the fact, that this does not work without javascript, it has an ugly side: when you click a button, for a short moment, all the buttons on the page disappear. ugly!

my solution is very simple, yet powerful. and beside this, you can pass an unlimited amount of values by one button click. the trick: we put all the name-value-pairs into the name-attribute, beginning with a question-mark, so it looks like a usual query-string. we do not use button-tags at all, but input-tags of the type "submit" and "image".

example:

<input type="submit" name="?action=edit&foo1=bar1&foo2=bar2&foo3=bar3" value="Edit" />
<input type="submit" name="?action=copy&foo1=bar1&foo2=bar2&foo3=bar3" value="Copy" />
<input type="image" name="?action=delete&foo1=bar1&foo2=bar2&foo3=bar3" alt="Delete" src="delete.jpg" />

on the server-side, we have to find those entries and reorganize our request:

<?php
class foo {
    function button_limitations() {
        global $_GET,$_POST;
        $this->_button_limitations($_GET);
        $this->_button_limitations($_POST);
        return true;
    }
    
    function _button_limitations(&$var) {
        foreach($var as $key=>$value) {
            $key = stripslashes($key);
            if(substr($key,0,1) == '?') {
                unset($var[$key]);
                if( //type="image" coordinates
                    substr($key,-2) == '_x' ||
                    substr($key,-2) == '_y'
                ) $key = substr($key,0,-2);
                $key_value_pairs = explode('&',substr(stripslashes($key),1));
                for($a=0,$b=count($key_value_pairs);$a<$b;$a++) {
                    list($key2,$value2) = explode('=',$key_value_pairs[$a]);
                    $var[$key2] = $value2;
                }
            }
        }
        return true;
    }
}
?>