Button tag in bloody Internet Explorer

Rich April 29, 2006 Reply

I just got bit by this bug today, took me a while to figure out what was going on. I was using <button> for precisely the reason that it lets you set a different label ("Edit Foo") from its value ("edit-<foo's id>").

My solution was this bit of javascript:

function submitAndRedirect(submitButtonID, redirectCode) {
        var submitButton = document.getElementById(submitButtonID);
        var redirectElementID = "input_submit_redirect_" + submitButton.form.id;
        if (document.getElementById(redirectElementID)) {
                document.getElementById(redirectElementID).value = redirectCode;
        } else {
                element = document.createElement("input");
                element.name = "submit_redirect";
                element.id = redirectElementID;
                element.type = "hidden";
                element.value = redirectCode;

                submitButton.form.appendChild(element);
        }
}

Then changed the <button> code to:

<input type="submit" id="button_99_edit" name="submit" value="Edit Foo" onclick="submitAndRedirect('button_99_edit', 'edit-99')"/>

It creates a hidden form item that my server-side code can look for, and gives it the value 'edit-99'.

I *would* add this to my list of items I'm praying Microsoft fixes in IE 7, but I don't think there's room left. It's already so big.

Peter Bengtsson April 30, 2006 Reply

Shame it doesn't work without javascript though.

You could make it much simpler if you'd just write you input tag like this:

<input type="submit"
name="99"
value="Edit this"
onclick="this.value=this.name;this.name='idvalue'"
/>

...or I just don't understand your particular application problem.

Jeff March 14, 2007 Reply

Thank you for this solution. This has had me stumped for a few days. I think I still have a few hairs left that didn't get pulled out.